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", but supports the user clicking the browser back button to close the gallery.

The best way of showing anyone new how it works is with a demo, so click the image below:

Download the zip file with all the nessesary scripts to install this on your own website.

Installation

Installation is easy.

1. Unzip the file and save the folder called "backbox" to the root of your website.

2. Open the page you want to have the BackBox on

3. Reference the CSS file and the following javascripts:

<link rel="stylesheet" href="/backbox/backbox.css" type="text/css" />
<script type="text/javascript" src="/backbox/js/prototype.compressed.js"></script>
<script type="text/javascript" src="/backbox/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="/backbox/js/lightbox.js"></script>
<script type="text/javascript" src="/backbox/js/dhtmlHistory.js"></script>
<script type="text/javascript" src="/backbox/js/customsignsheader.js"></script>
Right before the close body tag, reference the footer.js file:

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

4. Place an image and link on your page. Note the rel="lightbox[slide]" in the link. This tells the script that you want this to fire the BackBox. The "[slide]" is a grouping mechanism. You can change this word to make different groups of images which fire using different starting images.

<a href="/backbox/images/babyhand.jpg" rel="lightbox[slide]" caption="A Bunch of Grapes"><img src="/backbox/images/sunset.jpg" alt="lime" width="400" height="300" /> </a>

5. Add the history div around the image. This is what makes the back button close the BackBox. The code should look like this:

<div onclick="dhtmlHistory.add('location1',{message: 'backbox'});countdown()">

<a href="/backbox/images/babyhand.jpg" rel="lightbox[slide]" caption="A Bunch of Grapes"><img src="/backbox/images/sunset.jpg" alt="lime" width="400" height="300" /> </a>

</div>

6. List links to all the other images you want in your lightbox

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

7. You should now have a funtioning BackBox.

Tips

• Every image or link which fires the BackBox must have the history div enclosing it, otherwise the back button will not shut down the BackBox.
• The /footer.js file needs to be right at the end. This means that if someone clicks an image before the script can load, the BackBox won't fire - but it degrades nicely.
• The images for the slideshow can be anywhere on the page. The script will find them and add them to the show.
• 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.

BackBox is licenced under a Creative Commons Licence so you can feel free to use it on a commercial project or website. However, it would be very kind if you would link to us! BackBox was first written for Danthonia Designs - Makers of house signs. You can see it in use on their site.

If you need help with BackBox, please click here and leave a comment on the page.