How to show modal image using jQuery in a CodeIgniter 3 application

In this topic, we will see how you can display a modal image using jQuery within a CodeIgniter 3 and MySQL application. On clicking the image you can call a jQuery scripts to display a larger image in a modal. I will create a simple application to display a list of users along with their photos from a database table. When you click on a photo thumbnail, larger size of the photo will be displayed in a modal.

Though you do not need to know CodeIgniter to display popup image, it is more about jQuery, but here I have applied it in a Codeigniter 3 application.

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 the modal.

Below jQuery scripts will 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.

jquery image popup

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
MySQL 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:

display photo in a modal

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.

display image in a 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, 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 photo in a modal in codeigniter

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 modal photo

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 the modal. Let's see the code below:

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:

How To Create Modal Images in CodeIgniter

  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.

    How do I display an image in modal

    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 server and MySQL services are running. Open the browser and run localhost/userlist. You will see the users are displayed as below:

How do I show an image in modal pop up

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:

How show image in a bootsrap modal

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

onclick image popup jqueryDownload 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.

What is an image modalConclusion

In this example I have showed how you can display a photo in a modal in CodeIgniter 3. Modal is a very good option to display information to the user. It gives a better user interface. I have used photo 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 link by passing a parameter to the modal.