How to display dynamic image in a modal in a CodeIgniter 3 application

In this topic, we will show how you can display a photo in a bootstrap modal using jQuery with CodeIgniter 3 and MySQL. I will create a simple application in CodeIgniter 3 to display a list of users with their details along with their photos. When you click on a photo thumbnail, larger size of the photo will be popped up.

This topic will show how you can display data from database in a html table and also show modal image using jQuery.

Look at the below code snippet. While calling the modal, data-id attribute is used to send a value to the modal.

In above code a modal is called when user clicks 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.

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.

bootstrap modal image

Below are the columns in this table.

  1. id - It is unique id of a user, primary key and auto incremented
  2. name - Name of the user
  3. email - Email of the user
  4. image - Image file name of the user
Create table script for this table are given below; you can use this code to create the table.

user_profile.sql

After you create the table, verify that the table structure is same as above and the rows are inserted in the table. Data in the table should be as below:

show popup on image with jQuery

Folder Structure

Before I go to next step, let me show the folder structure I am using. I have created a folder named 'userlist' under xampp/htdocs and kept all CodeIgniter folder/files in this folder along with our custom files. So, the root directory is xampp/htdocs/userlist.

Bootstrap open Enlarge image in modal

You can see, we have the Controller - UserController.php, the Model - ModelUser.php and the view - view_users.php. Folder 'assets' is created for the purpose of keeping all custom stylesheets, JavaScripts and image files. Here we have css/style.css for our application.

Also, note that since we will be displaying photos, so we need a folder where photos to be kept. So, I have created a folder named 'uploads' under root directory and kept few image files in it.

Step 2 - Write Controller code (UserController.php)

Our controller class will have an index() method to get all users using a model method and load the view with the user data.

Controller

In the index() method, we call a model method named get_user() to get all the users from the database and load the view "view_users" with the user data. Below is the code for UserController:

Note that we have folder named 'uploads' in our root directory. In this folder all images are kept. So, I have defined image_file_path in application/config/config.php and here I am using it. $this->config->item('image_file_path') gives me the image file path from config.php, see below, how it is defined in config file. Changes in config file and other setup files are discussed in Step 6.

Step 3 - Write Model code (ModelUser.php)

We have seen only one method of the model used in the controller. This is get_user(). So now let's see the code for this method in the model:

application/models/ModelUser.php

get_user() method selects data from user_profile table. It selects all users from the table. It returns the result set to the controller.

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.

display image in modal jquery

It is a simple html table where I am displaying details of each user in a for loop. When you click on the photo, a larger size of the profile photo will be displayed in a modal. So, I will put the modal code also in this view. Let's see the code:

application/views/view_users.php

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:

assets/css/style.css

I just added few simple styles here, you can always add better styles.

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 with the defined. Then it displays the image in the modal. Let's see the code below:

It creates an <img> element with source as image name with upload path. <img> element is written in the modal-body.

Our controller, model and views are developed. Now we need to do some setup changes before we run the application. Let's do that in next step.

Step 6 - Update Configuration files and Test the Application

Let us now update few setup files before we run the application.

We will update below files in config folder:

fit the image into modal popup using Bootstrap

  1. Update autoload.php (application/config/autoload.php)

    I have added 'database' in autoload libraries.

    Also, 'url' are added in helper array.

  2. Update config file (application/config/config.php)

    I added 'image_file_path' for the image path. This is used in the controller. Using this path photo is displayed in the view. Set 'base_url' and 'index_page' as below in this file:

  3. Update database setup file (application/config/database.php)

    As I mentioned before, I am using a database named 'demo' in localhost with user 'root' and blank password, so I updated database.php as below:

  4. Update routes file (application/config/routes.php) I updated routes.php for default controller which is UserController. So, below code is for routes.php
  5. Update .htaccess (hypertext access) file to remove index.php from the URL

    .htaccess file is used to do configuration changes for a directory. I have kept .htaccess file in my root folder which is xampp/htdocs/userlist.

    Display modal image in CodeIgniter

    Content of .htaccess file is given below:

    Using URL rewriting rule, it redirects all request except those which are not existing files or directories.

Test The Application

Make sure in your XAMPP control panel Apache and MySQL services are running. Open the browser and run localhost/userlist. You will see the users are displayed as below:

how to display dynamic image in modal

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:

onclick image popup jquery

Our development and testing are done. Hope you could understand all the steps and could test it successfully.

show image in a bootsrap modalDownload source code

I have put codes for controller, model and view in a zip file. You can download it by clicking on the Download button below. You do not need to register yourself to download it. You can use the code as is or you can modify them as per your requirements.

I show an image in modal pop upConclusion

In this example I have showed how you can display a photo in a modal in CodeIgniter 3 dynamically by selecting data from the database. I 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.