How To Use jQuery Lightbox With A Database? Step by Step Guide!

Today I’m gonna show you how to use Lightbox while getting photo information from your database.

I think this is great if you wanna have something like a dynamic photo gallery in your site.

How To Use Lightbox With A Database

Step 1: Prepare your Database. We’ll have something like this:

  `title` varchar(32) NOT NULL,
  `description` text NOT NULL,
  `filename` varchar(32) NOT NULL,
  PRIMARY KEY (`id`)
-- Dumping data for table `photos`
INSERT INTO `photos` (`id`, `title`, `description`, `filename`) VALUES
(1, 'Mt. Batulao', 'Mt. Batulao''s New Trail', 'Mt-Batulao.jpg'),
(2, 'Mt. Polis', 'A few klicks outside Bontoc going up to Mt Polis', 'Mt-Polis.jpg'),
(4, 'Chocolate Hills 1', 'The wonderful chocolate hills', 'chocolatehills-1.jpg');

Step 2: Download Lightbox here.

Step 3: Unzip it on your web directory.

Step 4: Prepare your database configuration file for database connection. Create config_open_db.php file and place the following code.

$host = "your host";
$db_name = "your database name";
$username = "your database username";
$password = "your database password";
$conn = new PDO("mysql:host=" . $host . ";dbname=" . $db_name, $username, $password);

Step 5: Create a images folder, we’ll assume that your photos are stored here. You can download and use some photos for free from Unsplash.

Step 6: We’ll have the following codes on our index.php file.

<!DOCTYPE html>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>How To Use jQuery Lightbox With A Database</title>
        <link rel="stylesheet" type="text/css" href="js/css/jquery.lightbox-0.5.css" media="screen" />
<div>You may click the images below.</div>
<div id="gallery"> <!-- id to detect images for lightbox -->
include 'config_open_db.php'; // Database Connection
$sql = "select * from photos"; // Query the photos
$stmt = $conn->prepare( $sql );
while($row = $stmt->fetch(PDO::FETCH_ASSOC)){ // Loop through the records
    $file_name = $row['filename'];
    $title = $row['title'];
    $description = $row['description'];
    // We will append the $file_name variable to href and src attributes
    // to identify what image is being selected/shown
    // The rel='lightbox[philippines]' <a> attribute is
    // needed to use lightbox for set of images
    // It should be stored under one name, we gave the name 'philippines'
    // we also included the title and decription on the title attribute
    // so it will be shown on the overlay
    echo "<a href='images/$file_name' rel='lightbox[philippines]' title='$title - $description'>";
        echo "<img src='images/$file_name' width='150' height='100' />";
    echo "</a> ";
<div class='back-link'>
    <a href=''>Back to tutorial page</a>
<script type="text/javascript" src="js/js/jquery.js"></script>
<script type="text/javascript" src="js/js/jquery.lightbox-0.5.js"></script>
<script type="text/javascript">
// script to activate lightbox
$(function() {
    $('#gallery a').lightBox();

There are also lots of things that you can configure in jQuery Lightbox such as overlay background color, opacity, navigation behavior, button images, border size, resize speed, keyboard navigation, and etc.

You can find that in jquery.lightbox-0.5.js file in the js/ directory.

Download Source Code

You can download all the code used in this tutorial for only $9.99 $5.55!

Thank you for learning from our post about: How To Use jQuery Lightbox With A Database? Step by Step Guide!

By Mike Dalisay

I'm Mike Dalisay, a pro web developer since 2010. I love web development. Improving our tutorials and source codes makes me happy. Do you want to suggest an edit to our tutorial? Got something to ask about our source codes? You may use our comments section below or email our team at [email protected]


  1. Nice tutorial ^^,
    i would like to do the same thing but i dont need any image to show, just an HTML table with data from database.

    is it possible folowing the same tutorial ?

      1. Hi, but there no database access !!
        i found another modal lightbox called simplemodal created by ericmmartin! what do you think can i continue using this jquery plugin or i have to use jquery UI ?

        another question please, there is any tuturial on your blog or in your mlind :D talking about “Project structure for PHP” ?

        Thanks a lot

      2. HI @disqus_DPbX4G5LQh, simplemodal is good but I still recommend using jQuery UI, if you were able to learn it, you now have access to tons of other very useful jQuery UI features.

        The structure of your PHP project depends on how small or large it is. If it is a small PHP project, you can just categorize your files by folders, etc. But if it is a medium sized project, maybe you should learn MVC, lastly, if it is a large project, I recommend using a PHP framework like CakePHP or Laravel.

      3. Thank you so much, it’s a small project i just need how to structure my project,
        i have css, js,img and a config file wich access to database and another files doing some operation on database, i dont know ho structure them !!

        thanks a [email protected]

Leave a comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Back to top