Installing Lightbox Gallery into your HTML Website

Click image to view tutorial. Or Click Here >>

This tutorial shows you how to install the Lightbox Gallery into your HTML website. The method we use is simple and is made for someone who doesn’t have much experience with code. You do however need to know basic information, like 1) you need to know Photoshop, and 2) you understand basic HTML in Dreamweaver. Specifically, we will be touching upon how to use the hotspot method to create links in your gallery and how this is used to create a Lightbox gallery.

View the video tutorial here >>

If you need the Lightbox JS files and folders, simply download them from the link below.
Download Lightbox Files >>

STEP 1:

Create a “gallery_images” folder in your “gallery” folder, and place all of your images in the this folder. In the gallery folder, also place the lightbox files (DO NOT PLACE THESE IN THE GALLERY_IMAGES FOLDER – or its not going to work).

STEP 2:

Paste the following code in your head to activate

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

STEP 3:

The last thing you are going to do is to add the following tags to the “href” tags for each of your link hotspots. Be sure you watch the video for correct placement. Paste this at the end of each href tag of each image.