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.
You need two files to do this, the Javascript code and the CSS code.
-
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.
-
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.
GG, as you might know I have an SBI website. When I added the Java script and the CSS code to the home page at the very bottom, you could see the code on the website. So I deleted it. Is there anywhere to put these html codes in SBI so that it will work with Thumbnails? Also, where is the location on the website or does it go on each page? Thanks for the help. Eileen
Eileen,
You’ll need to upload the javascript file to your special file manager first. Then the lines of code that go into the head part of the code need to modified to point to correct location for you. Like so…
”http://www.beginners-quilting.com/support-files/thumbnailviewer.js”
Then copy the rest of the code and make sure to upload the images to your graphics library.