Creating dynamic Photo Gallery with jQuery, PHP & MySQL

Photo Galley is a most used section in any website . We can use photo gallery to display portfolio images , event's photos, client's logo etc . Today we will creating a dynamic photo gallery using Jquery in PHP, Mysql.

We also integrate fancybox image pop up for displaying larger image when user clicks on thumb image .

Creating Database Table

First of all we need a Database table for string images ,Below sql will create a table 'images'

Creating Directory to Store Images

Now we have to create folder to store uploaded images .We will create folder 'uploads' and 'thumb' inside this folder. It looks like

Database Configuration (config.php)

We need a database config file for Server authentication and database select . Mention below your host name (usually localhost)database name , username ,password

Dynamic Image Gallery (index.php)

In this file ,we will fetch images fro database table and show here . We also implement fancybox jquery plugin for image popup . Below js files to load in head section of index.php

   To bind fancyBox events on the image gallery, specify selector and call the fancybox() method:  

PHP & HTML Code in index.php

Here images are being fetched from database table and showing to file. Images path are calling from the folder 'uploads' . Specify the large image file path in href attribute. Add data-fancybox="group" attribute. Specify image caption in data-caption attribute.as shown below

CSS Code:

Below css used for layout define of our dynamic image gallery

Finally , you will see dynamic image gallery with pop up option (also called lightbox) . Hope this tutorial help someone who looking to create PHP,Mysql, Jquery Dynamic Image/Photo gallery . If you have any query, write it on below comment form .I will try my best to reply soon .