PopBox! - Free Thumbnail Viewing Software: Hints and Tips for Using

Do you want to click on a thumbnail image and have a larger image pop up on the same page? Here is our review of the free solution called PopBox!.

PopBox! is similar to another popular solution, Lightbox JS. Even though Lightbox V.2 has some unique characteristics, if you just want to click on a thumbnail and have the large image open in the same window, PopBox is near perfect and is fairly easy to implement.

The newest code supports two methodologies. The new method uses separate thumbnail images and loads only those images when the webpage loads. The old method loads the large images and creates thumbnails from them. The old method will validate strict XHTML. The new method won’t validate because of JavaScript custom attributes. As you decide between fast page loads and validated code, it just may depend on how many images you have on the webpage. If the rest of your code validates, a browser shouldn’t be concerned with a JavaScript custom attribute.

Below are the steps to implement PopBox! If you are a JavaScript guru, you will enjoy the detailed documentation on the author’s website.

Step 1 - Download Software Package

1. Go to http://www.c6software.com/Products/PopBox/Default.aspx and download the zip file. Extract the file contents and open the resulting folder.
2. Open the scripts folder. Copy PopBox.js and paste it in the folder where you save your scripts code.
3. Open the images folder. Copy and paste the following images to your images folder: magminus.cur, magminus.gif, magplus,cur, magplus.gif, and spinner40.gif. (Spinner40.gif displays if there is a wait for the large image to load; the other two gif files display on the large image; and the .cur files change the cursor when zooming in and zooming out.)
4. Open the stylesheets folder and open Styles.css. Copy the code and paste it into your main css file.

Step 2 - Insert JavaScript Code in HTML Document

Open the HTML document. Just before </head>, insert the following code. The first line assumes you are storing the JavaScript file in the "inc" folder. If the js file is in the same folder as the HTML file or in a different folder, modify this line accordingly:

<script src="inc/PopBox.js" type="text/javascript"></script>
<script type="text/javascript">
popBoxWaitImage.src = "img/spinner40.gif";
popBoxRevertImage = "img/magminus.gif";
popBoxPopImage = "img/magplus.gif";
</script>

Step 3 - Insert HTML for each Image

Use the code for Old Method or New Method to name your images. The ID in line #1 must be unique for each image on the webpage.

New Method:

<img id="image99"
src="images/pic1-thumb.jpg"
class="PopBoxImageSmall"
title=" text that displays when cursor hovers over image”
width="60" height="65"
alt="alt text here"
pbsrc="images/pic1-large.jpg"
pbCaption="caption that displays at bottom of large image"
onclick="Pop(this,50,'PopBoxImageLarge');" />


Old Method:

<img id="image1"
src="img/pic1-large.jpg"
alt="alt text here"
class="PopBoxImageSmall"
width="60" height="65"
title="caption that displays at bottom of large image"
onclick="Pop(this,50,'PopBoxImageLarge');" />

We could not get the "zoom in" and "zoom out" cursors to work in both IE and Firefox unless we used the full URL for the .cur images, shown in the example below, in all three places they are referenced in the CSS:

.PopBoxImageSmall
{
border: none 0px #ffffff;
cursor: url("http://www.example.com/images/magminus.cur"), pointer;
}

Be sure to read all you can on the author’s website before beginning. I tested PopBox! on an uncluttered webpage with no other scripts and cannot provide implementation assistance.

To review the other JavaScript-based free Thumbnail Viewing software we reviewed, please see our blog Lightbox-JS Image Thumbnail Viewing Software.