How to display dynamic image in a modal in a CodeIgniter 3 application
In this topic, we will show how you can dynamically display a photo in a bootstrap modal using jQuery with CodeIgniter 3 and MySQL. We will create a simple application in CodeIgniter 3 to display a list of users with their photos. When you click on a photo thumbnail, larger size of the photo will be popped up. You will learn how you can display data from database in an html table and show the modal image using jQuery.
Take a look at the below code snippet. While calling the modal, data-id attribute is used to send a value to the modal.
In the above code, a modal is called when user clicks on the photo, note 'data-id' attribute with a value of the image name. This image will be displayed in a bootstrap modal.
Below jQuery scripts display the image in a modal.
<script>
// To display image in modal
$(document).on("click", ".view", function () {
var path = "uploads/";
var image = $(this).data('id');
var str = '<img src="'+path+image+'">';
$(".modal-body").html(str);
});
</script>
Let us see the entire application developed in CodeIgniter 3.
Step 1 - Create a table in MySQL database for user profiles
Let us create a table named 'user_profile' in MySQL database. This table will have user details, - user name, email and image. Table structure is given below:
Table: user_profile
This table stores details of all users.
Below are the columns in this table.
id - Unique user id, primary key and auto incremented
name - Name of the user
email - Email of the user
image - Image file name of the user
user_profile.sql
CREATE TABLE `user_profile` (
`id` int(11) NOT NULL,
`name` varchar(255) NOT NULL,
`email` varchar(255) NOT NULL,
`image` varchar(500) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
INSERT INTO `user_profile` (`id`, `name`, `email`, `image`) VALUES
(1, 'Avatar1', 'avatar1@test.com', 'avatar1.png'),
(2, 'Avatar2', 'avatar2@test.com', 'avatar2.png'),
(3, 'Avatar3', 'avatar3@test.com', 'avatar3.png');
ALTER TABLE `user_profile`
ADD PRIMARY KEY (`id`);
ALTER TABLE `user_profile`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=4;
Folder Structure
We will be using a folder named 'userlist' under xampp/htdocs. So, the root directory will be xampp/htdocs/userlist.
We will have an index() method to get all users and load the view with the user data.
In the index() method, we call a model method named get_user() to get all the users from the database and load the view with the user data.
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class UserController extends CI_Controller {
function __construct() {
parent::__construct();
$this->load->model('ModelUser');
}
public function index(){
$data['image_path'] = $this->config->item('image_file_path');
$data['user_data'] = $this->ModelUser->get_user();
$this->load->view('view_users',$data);
}
} // end of Controller class
Note that we have folder named 'uploads' in our root directory. In this folder all uploaded images are kept. So, we have defined image_file_path in application/config/config.php and here we are using it in lin 11 above. $this->config->item('image_file_path') gives the image file path from config.php and it is defined as below:
$config['image_file_path'] = 'uploads/';
Step 3 - Write Model code (ModelUser.php)
get_user() method in the model:
application/models/ModelUser.php
<?php
class ModelUser extends CI_Model {
function __construct() {
parent::__construct();
}
function get_user() {
$this->db->select('*');
$this->db->from('user_profile');
$query = $this->db->get();
return $query->result();
}
}
get_user() method selects all users from user_profile table.
Step 4 - Develop the view to display the users (view_users.php)
The view displays the list of users with links to view the photo of each user. Below is a list of users displayed.
It is a simple html table to display details of each user using a for-loop. When you click on a photo, a larger size of the profile photo will be displayed in a modal. So, we will put the modal code also in this view. Let's see the code:
Look at the last column of the table which is the Photo. Here a modal is called (this modal is defined later). A parameter which is $row->image is sent to the modal using data-id attribute.
There is a custom stylesheet used in the views. It is given below:
Step 5 - Write jQuery script to display photo in modal
jQuery script takes the parameter value sent to the modal and creates an <img> element with source as image file name. Then it displays the image in a Bootstrap modal. Let's see the code below:
<script>
// To display image in modal
$(document).on("click", ".view", function () {
var path = "uploads/";
var image = $(this).data('id');
var str = '<img src="'+path+image+'">';
$(".modal-body").html(str);
});
</script>
It creates an <img> element with source as image name with upload path. <img> element is written in the modal-body.
Step 6 - Update Configuration files and Test the Application
Let us now update few setup files before we run the application.
Run localhost/userlist in the browser. You will see the users are displayed as below:
You can see users are displayed along with their photos. Click on a photo of any user, photo will be displayed in a modal. See below when I clicked on one of the photos:
Our development and testing are done. Hope you could understand all the steps and could test it successfully.
Conclusion
In this example, we have seen how you can display a photo in a modal in CodeIgniter 3 dynamically by selecting data from the database. We have used photo here to display in the modal, but you can use it for any similar requirement, like you can display some data in a modal when user clicks on a button or a link, by passing a parameter to the modal.
Development Steps
Conclusion