CSS Popup Image Viewer: A Review, with Hints and Tips for Using

Do you have a webpage with one or more thumbnails representing larger photographs? And do you want the larger image to appear in the same window when the visitor's mouse hovers over the thumbnail? Here is one solution you can download for free.

CSS Popup Image Viewer is found at DynamicDrive.com. Using only HTML and CSS, the large image displays when the cursor hovers over the thumbnail. It works nicely and the HTML code below validates strict XHTML:


<a class="thumbnail" href="#thumb"><img src="image/pic1-thumb.jpg.jpg" width="60px" height="65px" alt="alt text here" /><span><img src="image/pic1-large.jpg" alt="" /><br />Caption text underneath image</span></a>


This solution uses the CSS method of visibility:hidden. Google specifically warns against using hidden text, but as debated in Google forums, the risk appears small when using it in this manner. It is still worth mentioning, though.

This simple solution works very nicely and the code will validate strict XHTML.

►  Take a look at some of our other posts, such as NEW Credit Card rules You Should Know About! and A Dozen Sample Math Formulas for Excel.

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.

Lightbox JS - Free Thumbnail Viewing Software Review

Do you want to click on a thumbnail image and have a larger image pop up on the same page? Lightbox JS code can be downloaded free from various websites, including DynamicDrive.com. Here is our review.

There are two versions of Lightbox: the original Lightbox Image Viewer, and the fancier Lightbox Image Viewer 2.03a. Lightbox uses the JavaScript onclick method. The user clicks the thumbnail and the large image displays in the same window. I tested Lightbox successfully and got the HTML below to validate strict XHTML:


<a href="image/pic1-large.jpg" rel="lightbox" class="thumb" title="Caption text underneath image"><img src="image/pic1-thumb.jpg" width="60" height="65" alt="alt text here" /></a>


In the HEAD section of your document, include these statements. Of course, if you incorporate the CSS provided into your own stylesheet, you don’t need the first line below:


<link rel="stylesheet" href="inc/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="inc/lightbox.js"></script>


I could not get the image to open in the same window - it kept opening in a new browser window. Finally, in the wee hours of the morning, I tried the following code and it worked! If you have that problem, put the following code in the HEAD section of your document after the HTML above:


<!--force image to open in same window-->
<script type="text/javascript">
if ( typeof window.addEventListener != "undefined" )
window.addEventListener( "load", initLightbox, false );
else if ( typeof window.attachEvent != "undefined" )
window.attachEvent( "onload", initLightbox );
else {
if ( window.onload != null ) {
var oldOnload = window.onload;
window.onload = function ( e ) {
oldOnload( e );
initLightbox();
};
}
else
window.onload = initLightbox;
}
</script>
<!--end of force image to open in same window-->


I only tested the basic version. The only thing I didn’t like was if the image height was greater than the browser window, the lower part of the image was hidden. This was not the case with PopBox!, a similar solution discussed in our blog PopBox! - Image Thumbnail Viewing Software. The demos of the enhanced Lightbox are interesting if you want the large image to display with some bells and whistles. However, V.2 may be more complicated to implement for the newbie. I cannot answer implementation questions. However, there is a forum available for help on the author’s website.