The following code sample shows how you can add a "View larger" image to your existing page through the use of some Javascript. In the event that Javascript is disabled, the code "falls back" on using a blank target for a new window.
The setup is as follows:
- a directory called
thumbnails that contains the small version of the images
- a directory called
largeimages that contains the large version of the thumbnail images (such that each image has the same name in each directory)
- the html page containing some extra Javascript code and the html for the images to display
To "enable" the popup window for an image, you need only assign the class
thumbnail to the image in question. When the user clicks the thumbnail image, the larger one will popup in a new window.
Some assumptions:
- all the "large images" are the same size
- the thumbnail image and the "large image" file names are the same
You can modify the directory names in use, and the size of the popup window by changing the values in the javascript as well.
Code:
<html>
<head>
<script type="text/javascript">
<!--
function bigImage(myObj)
{
var _thumbNailDirectoryPath = 'thumbnails/';
var _bigImageDirectoryPath = 'largeimages/';
var _bigImageWidth = '280';
var _bigImageHeight = '400';
var _myImageName = myObj.src.substr(myObj.src.lastIndexOf('/')+1);
var _myWindowName = _myImageName;
var _myWin = window.open(_bigImageDirectoryPath + _myImageName,_myWindowName,'width=' + _bigImageWidth + ',height=' + _bigImageHeight);
return false;
}
function initThumbs()
{
var _allImages = document.getElementsByTagName('img');
for (var loop = 0; loop < _allImages.length; loop++)
{
if (_allImages[loop].className == 'thumbnail')
_allImages[loop].onclick = new Function('return(bigImage(this))');
}
}
window.onload = initThumbs;
//-->
</script>
</head>
<body>
<br /><a href="largeimages/image_01.jpg" target="_blank"><img src="thumbnails/image_01.jpg" width="70" height="100" class="thumbnail" /></a>
<br /><a href="largeimages/image_02.jpg" target="_blank"><img src="thumbnails/image_02.jpg" width="70" height="100" class="thumbnail" /></a>
</body>
</html>
I hope this proves helpful,
Jeff
