View Full Version : thumbnail viewer how to question

shawn arnold
02-25-2009, 01:03 AM
Gotta throw it out there, I'm a newb. My question is about how to enlarge thumbnails. Basically I'll have a main picture of a product say 250px x250px and three thumbnails 75px x 75 px under it that I want to enlarge to the 250x250 size either when clicked on (in that case with a close button) or a mouseover type of effect where the images displays 250x250 when mouse is on it. Ive found a link to a somewhat close tutorial, but wanted to see if anyone had any ideas, help, or tutorials to point me towards. Btw in the link below im not wanting the thumbnail to be a cropped image. Anyways Thanks to all in advance.



02-25-2009, 01:51 AM
The essential markup and JavaScript you need are in that tutorial. It's perfectly possible to modify it to not use a CSS "cropping" technique. Have you tried to do this?

02-25-2009, 02:01 AM
If you'd like an event (such as an image swap) to happen when you click your mouse, you're going to need JavaScript. CSS can swap/enlarge images on rollover, but not on click.

If a lightweight, pure CSS solution suits you, look into remote rollovers (http://css-tricks.com/multiple-remote-linking-an-example-and-how-to/).

If you'd like the clicking functionality, the tutorial you linked to looks good with the exception of this CSS cropping part. I'd recommend sizing your images beforehand in a graphics program rather than letting the browser do the manipulation.

Another solution would be AJAX. Lightbox (http://www.lokeshdhakar.com/projects/lightbox2/) and Thickbox (http://jquery.com/demo/thickbox/) (both of which I've used and would recommend) are two additional ways of enlarging thumbnails.

shawn arnold
02-25-2009, 02:52 AM
thanks for the comments, I probably should have worded it better, but I was more or less seeing if the javascript way in the link was the best way, or if there were other ways that i was unaware of. thanks again