Click thumbnail to enlarge image - whats the best way?

blackduck · Jun 30, 2004

Do you have to have two different sized images, so that when you click on the small image eg smallimg.gif, you have target_blank to open a new window and call a different file eg largeimg.gif which is the larger image?

Is this how it is done, or is there a better way?

thanks

GUJUm0deL · Jun 30, 2004

blackduck, well there is another way. Its not a good way, but you can do this:

<a href="somepage.html/someimage.gif"><img src="someimage.gif" width="100" height="50"></a>

Now the above portion in bold forces the image to be 100*150 in dimension. And when the user clicks the image, the actual image size will open up.

This is not a good way to do it because forcing the image to a small dimension can distort the image in a negative way. But if you don't have any webspace left and this is your only resort, have a disclaimer letting the user know that the full scale image is better quality.

[sub]
____________________________________
Just Imagine.

http://www.imajinarts.com

[sub]

sweevo · Jul 2, 2004

Blackduck, I think the way you described is best. It would allow summary thumbnails to be loaded quickly, and the user could then decide which larger image they would like to see. There is free software available to convert batch images into thumbnails.

There are other ways, included the method described by Gujumodel. This way is not only likely to distort the image, but the image is only being resized in its output on screen - it remains the same file size as the "larger" image. So, if you have a lot of images you will notice some serious slowdown on displaying the thubnails - sort of defeating the object.

blackduck · Jul 5, 2004

Thanks for the suggestions. Sweevo, re the free software, do you have any you particularly recommend, and is there a site I can download it from?

sweevo · Jul 5, 2004

If you search "thumbnail" at

http://www.download.com

you'll get loads of different ones (both free and demos/shareware). I'm afraid I haven't used any myself so you'll have to experiment with the ones you find to see which one suits your needs the most.

BabyJeffy · Jul 5, 2004

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

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Click thumbnail to enlarge image - whats the best way?

blackduck

Programmer

GUJUm0deL

Programmer

sweevo

Programmer

blackduck

Programmer

sweevo

Programmer

BabyJeffy

Programmer

Similar threads

Part and Inventory Search

Sponsor