PDA

View Full Version : enlarge image


K.Simmonds
05-29-2007, 03:39 PM
I want to put larger images of a thumbnail onto my site so that when you hover over the small thumnail (or click on it) you can see a larger image. I know I need the same image in 2 different sizes in my root folder, but I don't even know what question to look for in my Dreamweaver book or help line.
Any ideas ????

domedia
05-29-2007, 05:39 PM
Hi Keith, how do you want to see these images? Maybe something like thickbox would be sufficient?
http://jquery.com/demo/thickbox/

K.Simmonds
05-29-2007, 06:05 PM
Hi, and thanks for the reply. Thickbox ? More like thick head I'm afraid. Its all a bit over my head. I didn't think it would be this difficult. How I want to see the images is ... lots of small thumbnail photos of items, that when you hover (or click) on them, you see a larger more detailed image. I thought something like a rollover - but that image is the same size.

fwr1000
05-29-2007, 06:07 PM
Kieth, check help in DW for the "Swap Image Behavior".

Fred

K.Simmonds
05-29-2007, 06:31 PM
thanks for that - but that doesn't work either. I've looked it up but it says you have to use another image the same size as the original. I want another larger image to come up (in a new window).

domedia
05-29-2007, 06:52 PM
look at the link I gave you, it's not hard, and gives you the 2 js files you need and examples on how to add only a class to each thumbnail

fwr1000
05-29-2007, 07:33 PM
Right, it is not in a new window. If you want the larger image to show up on the same page though, it will work. Example is that you have 6 25 x 25 px thumbnails in a column on the left side of a page. On the right you start with one picture 250 x 250 px. As you mouse over each 25 x 25 thumb, the 250 x 250 larger picture is replaced with a 250 x 250 pic of the thumb you are mousing over. The "must be same size" refers to the enlarged pictures. You can't have different sizes for the larger images.

Soad
05-30-2007, 05:11 AM
A good method that I have tried is with layers, create a thumbnails and larger images stack all the layers on top on each other (use the Z & Y axis) in the properties for precise positioning and this works fine then go to behaviors and use show hide layers option then you can use the mouse rollover etc

Phrontis
05-30-2007, 09:05 PM
Example is that you have 6 25 x 25 px thumbnails in a column on the left side of a page. On the right you start with one picture 250 x 250 px. As you mouse over each 25 x 25 thumb, the 250 x 250 larger picture is replaced with a 250 x 250 pic of the thumb you are mousing over. The "must be same size" refers to the enlarged pictures. You can't have different sizes for the larger images.

This is precisely what I'm trying to do on a page. I have three thumbnails, and when the mouse rolls over each, I want a larger photo to appear higher on the page. Does anyone know of a tutorial that would show how to do this in Dreamwaver?

Thanks

fwr1000
05-30-2007, 09:22 PM
Technically they are called "disjointed rollovers". Here's one link I found for a tut

http://www.dwfaq.com/tutorials/basics/disjointed.asp

Fred

Phrontis
05-30-2007, 09:33 PM
Thanks, Fred.

It looks like a good tutorial. I'll start playing with it now. ...