CodeIgniter jQuery Photo Gallery

Introduction

Here I am going to show you how to create photo gallery using PHP framework called Codeigniter. Photo gallery also known as image gallery, media gallery or photo album, which is used to manage your photos. You can view the images one by one from a list of images in a gallery.

In this example I will use some sample images to create photo gallery using CodeIgniter and jQuery frameworks. We will have corresponding thumbnails for images. The thumbnail images will be shown on the web page in gallery and when you click on a thumbnail then the corresponding bigger size of image will be displayed on an overlay.

You may also like to read Photo Gallery using Django.

Prerequisites

Apache 2.4 HTTP Server, PHP 7.4.3, CodeIgniter 3.1.11

Creating Project Directory

It’s assumed that you have setup Apache 2.4, PHP 7.4.3 and Codeigniter 3.1.11 in Windows system.

Now we will create a project root directory called codeIgniter-photo-gallery under the Apache server’s htdocs folder.

Now move all the directories and files from CodeIgniter 3.1.11 framework into codeIgniter-photo-gallery directory.

We may not mention the project root directory in subsequent sections and we will assume that we are talking with respect to the project’s root directory.

Creating Controller Class

Create a file called PhotoGallery.php under application/controllers with the below source code. This controller class handles request and response for the clients.

It loads the required helper classes. If you want, you may auto-load them in application/config/auto-load.php file.

Finally we load the view file which will show the photo gallery.

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class PhotoGallery extends CI_Controller {

	public function index()	{
		$this->load->helper('url');
		$this->load->helper('directory');
		$this->load->view('photo_gallery');
	}
}

Creating View File

Create a file called photo_gallery.php under application/views folder with below source code.

We load the required css and js files in the header section.

Then we declare the thumbs and images directories. We retrieve all thumbs using directory_map() into an array function.

Finally we iterate and create a photo gallery with thumbs. We put four images at each row. We put each thumb inside a hyperlink so that clicking on thumb will display the original image.

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?><!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Welcome to CodeIgniter Photo Gallery</title>
	
	<!-- CSS -->
	<link rel="stylesheet" href="<?php echo base_url(); ?>assets/css/style.css">
	<link rel="stylesheet" href="<?php echo base_url(); ?>assets/css/simplelightbox.min.css">

	<!-- JAVASCRIPT -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script type="text/javascript" src="<?php echo base_url(); ?>assets/js/simple-lightbox.min.js"></script>
</head>
<body>

	<div class='container'>
		<h1> Welcome to CodeIgniter Photo Gallery </h1>
		<div class="gallery">
			<?php
			$dir_thumbs = './assets/images/thumbs/';
			$dir_images = './assets/images/';
			$images = directory_map($dir_thumbs);
			
			$i = 1;
			foreach ($images as $key => $image) {
			?>
				<a href="<?php echo base_url($dir_images) . $image;?>">
					<img src="<?php echo base_url($dir_thumbs) . $image;?>" alt="<?php echo $image;?>">
				</a>
			<?php
				if($i++%4 == 0) {
					?>
					<div class="clear"></div>
					<?php
				}
			}
			?>
		</div>
	</div>

	<script type='text/javascript'>
		$(document).ready(function() {
			$('.gallery a').simpleLightbox();
		});
	</script>

</body>
</html>

Configuring Route

We need to override the default controller entry into application/config/routes.php file to load our controller on home page.

$route['default_controller'] = 'PhotoGallery';

Testing the Application

make sure your Apache 2.4 server is running and application is deployed successfully.

Home Page

Hit the URL http://localhost/codeIgniter-photo-gallery/index.php to access the home page:

Displaying Image

When you click on any thumb image you will see the original image is displayed on an overlay:

You can navigate left or right to see left or right image. You can close the overlay. You can see which image number is currently being shown.

You may also like to read Photo Gallery using Django.

Source Code

Download

Thanks for reading.

Roy Tutorials