---->

This is an example of how to create a gallery of images and use them in a SQL database. It is also an example of how to customize jQuery plugins such as Lightwindow to utilize the database table of information for the gallery. End result is thumbnail and enlarged images in a nice viewer. And all the material is coming from a database table.

 

Step 1:

For the first example, you will need to have a table created for your gallery in phpmyAdmin. Make sure this table includes 1) imageID (primary key), 2) thumb 3) enlarged 4) title 5) Desc.

 

Step 2:

You should also make sure that you have the proper Connections folder and appropriate conn_lessons.php file. You can only do this if your using files inside of MAMP's htdocs folder.

 

Step 3:

Create two files 1) thumbnail.php and 2) enlarged.php.

 

Step 4:

Style the both files as you like with CSS.

 

Step 5:

Drag an image thumbnail into your thumbnails.php file and wrap a div around it. Name it #gallery. Make it a link by using # for now.

 

Step 6:

Drag enlarged image into your enlarged.php file and wrap a div around it. Name it #galleryEnlarged.

 

Step 7:

Make sure to add Description, Title to your enlarged file.

 

Step 8:

Open your Bindings tab for your thumbnails file and click Recordset.

 

Step 9:

Name your recordset rs_thumbs.

 

Step 10:

Replace the image's src with the thumb php from the bindings tab by dragging and dropping. This code points to the table value "someimage.jpg".

 

Step 11:

Since we usually place the image gallery in a folder called gallery, add a "gallery/" in front of the php code you just dropped in. That way the file path will be correct.

 

Step 12:

Point the link for the image to your enlarged.php file.

 

Step 13:

Now add " ?imageID=1 " right after the enlarged.php in your code.

 

Step 14:

Double click on the # 1 in the code above and drag the imageID binding and drop, replacing the 1 value.

This should be <?php echo $row_rs_thumbs[ 'imageID'] ?>

 

Step 15:

Now on the enlarged.php page, create a recordset called rs_enlarged.

In the query tab at the bottom, make sure imageID = (and leave blank) and select Entered Value = 6. (We will replace the 6 later).

 

Step 16:

Drag and drop the Desc, Title, and Image from the bindings tab.

 

Step 17:

Make sure your img tag has the /gallery in front of the php tag. Also be careful if it has a fixed height in the tag. May want to remove that.

 

Step 18:

Now in the Query in your HTML, replace the 6 with a variable $imageID.

 

Step 18:

Add a conditional statement so we can assign the primary key values to the variable $imageID. If the imageID exists, then that imageID value will be passed. If it doesn't, the $imageID will pass the image that is associated with the imageID of 1 since this is being set up as our default in the else statement.

if (isset ($_GET['imageID']))
{
$imageID = $_GET['imageID'];
}
else
{
$imageID = 1;
}

 

Step 16:

Test and it should work!

Check out the L10 examples. You can also use the sample.php example for Ligthtwindow.