How To Use Lightbox With A Database

Photo of Mike Dalisay
Modified Saturday, October 9, 2010
by - @ninjazhai
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.

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. I have config_open_db.php file, just for database connection.

Step 5: Create a images folder, we'll assume that your photos are stored here. In this tutorial, I used some photos from this link.

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "">
<html xmlns="">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>How To Use jQuery Lightbox With A Database</title>
<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
$rs = mysql_query( $sql );

while ( $row = mysql_fetch_array( $rs ) ){ // 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> ";

    <script type="text/javascript" src="js/js/jquery.js">
    <script type="text/javascript" src="js/js/jquery.lightbox-0.5.js">
    <link rel="stylesheet" type="text/css" href="js/css/jquery.lightbox-0.5.css" media="screen" />

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

The Code of a Ninja Resources

For FREE programming tutorials, click the red button below and subscribe! :)
Thanks for the comments!
"First do it, then do it right, then do it better."
~ Addy Osmani
"Talk is cheap. Show me the code."
~ Linus Torvalds
Let's Stay Connected!
g+ r
Android app on Google Play
© 2011-2014 The Code Of A Ninja. All rights reserved. Proudly Powered by Google Blogger. Images, logos, marks or names mentioned herein are the property of their respective owners.