A thumbnail image viewer can add a nice touch to your website when you have a gallery of photos or images that you’d like to display on one page. Your users will be able to view larger versions of the photos or images. This way you can display many more image on just one page.

Vegetables

You need two files to do this, the Javascript code and the CSS code.

  1. First thing you need is the Javascript for the popup of the image. Right click here to download the Javascript. Select “save link as” to save the file to your computer.

  2. You’ll also need some CSS code for the styling. Right click here to get the CSS code.

You also need images. You only need the larger size of the image, not the thumbnail. The thumbnail is taken care of in the code with CSS code. Just make sure the image is the size you’d like to display in the pop up.

Both files will need to go on your server somewhere. Make not of the path where you upload the files to. Then you’ll need to include them in your HTML code. Below is a simple example of how the HTML code will look.

The following two lines of code go in the <head></head> tags of your HTML file.  Make sure you change the path to point to right location on your website.  Replace “yourdomain” with your own domain name.

<link rel=”stylesheet” href=”http://www.yourdomain.com/thumbnailviewer.css” type=”text/css” />

<script src=”http://www.yourdomain.com/scripts/thumbnailviewer.js” type=”text/javascript” ></script>

Then add the code to the body of HTML code. Make sure to replace “yourdomain” with your domainname and “name-of-your-image” with the actual name and extention of your own image.

<a title=”This is a picture of vegetables” rel=”thumbnail” href=”http://yourdomain.com/images/name-of-your-image.jpg”>Vegetables</a>

<a title=”This is a picture of vegetables” rel=”thumbnail” href=”http://yourdomain.com/images/name-of-your-image.jpg”><img style=”width: 50px; height: 50px;” src=”http://yourdomain.com/images/name-of-your-image.jpg” alt=”" /></a>

Thats it. You can add as many images as you like to one page. This code may have some issues in older versions of IE. It hasn’t been tested in all of them. But it works in most major browsers.