Home / Free JavaScripts / Image Slideshows & Galleries / Here

Description: BackBox is a new image gallery script which displays your pictures in a smooth and easy way. It works on the same principle as "Lightbox.js", though it supports the ability to dismiss the enlarged image when the user clicks the browser "back" button, instead of the default action of going to the previous page. The interface also adds explicit "pervious" and "next" links, plus a auto rotation mode.

Example:

Directions

Step 1: Add the below script references to the HEAD section of your page:

The above code references numerous files as you can see. Download the following zip file, and perserve its directory structure when uploading the extracted files:

backboxfiles.zip (includes images used in the above demo)

Step 2: In the BODY of your page:

1. Create a thumbnail image that when clicked on will display a series of enlarged images. Wrap this thumbnail in a special DIV tag that activates the "back button" feature for it.
2. Define a list of "empty" links on the page that point to the paths of the enlarged images beyond the first one.

Here is the result:

<div onclick="dhtmlHistory.add('location1',{message: 'backbox'});countdown()">
<a href="images/babyhand.jpg" rel="lightbox[slide]" caption="A Bunch of Grapes">
<img src="images/sunset.jpg" alt="lime" width="400" height="300" border="0" /></a>
</div>

<a href="images/desert.jpg" rel="lightbox[slide]" caption="Sunflower"></a>
<a href="images/beech.jpg" rel="lightbox[slide]" caption="Dolphin"></a>
<a href="images/lime.jpg" rel="lightbox[slide]" caption="Waterfall"></a>

The part in red is the HTML for the thumbnail, while the parts in green are empty links that contain the paths to the other enlarged images that should be shown as part of the slideshow. Note the rel="lightbox[slide]" inside each of the link- this tells the script that they are all part of the BackBox group called "slide". You can create different groups of images by giving each group a different name.

Step 3: Finally, at the very end of your page, right above the </body> tag, add the following script reference:

<script type="text/javascript" src="js/customsignsfooter.js"></script>

Tips

• Every thumbnail image which fires the BackBox must have the history div enclosing it, otherwise the back button will not shut down the BackBox.
• The empty links referencing the images for the slideshow can be anywhere on the page, not necessarily directly below the thumbnail image. The script will find them and add them to the slideshow.
• If the back button does not work in Internet Explorer, it may be because the file called "blank.html" is missing or in the wrong place. The references to it in dhtmlhistory.js need to be hard coded.