Click one image to replace another

[fattyatkinson]

Hi. I have found some great code here to do pretty much anything I have tried, but one thing that I seem unable to find is how to click on one image to replace another on the same page. For example, I have a main picture with some thumbnails below it. I would like to click on the thumbnail and it be enlarged on the main picture. I have seen something similar using frames, but if possible I would like to avoid that. Is this possible in html or javascript??? help! Thanks.

[sohguanh]

Hi. I have found some great code here to do pretty much anything I have tried, but one thing that I seem unable to find is how to click on one image to replace another on the same page. For example, I have a main picture with some thumbnails below it. I would like to click on the thumbnail and it be enlarged on the main picture. I have seen something similar using frames, but if possible I would like to avoid that. Is this possible in html or javascript??? help! Thanks.

When you click on the thumbnail, the thumbnail slowly grow big OR
click on the thumbnail, the thumbnail enlarged picture appear on the main picture ?

For the latter it is easier, you need to prepare for each thumbnail their equivalent enlarged picture. Then bind a onclick callback on the thumbnail. Inside the onclick load the equivalent enlarged picture onto the main picture.

For the former, the effects I not so sure, you can explore jQuery gallery. I know they have "explode into pieces" effects but for small slowly become big effects I not so sure.

[tirna]

Imo you don't need separate thumbnail and enlarged image files. You can just set a smaller width in the <img> for the thumbnail.

Each thumbnail <img> then just needs an onclick function that resets the .src for the enlargement <img> to the .src of the thumbnail.

I would also preload the images to avoid any download delays when displaying an enlargement.

[sohguanh]

For the former, the effects I not so sure, you can explore jQuery gallery. I know they have "explode into pieces" effects but for small slowly become big effects I not so sure.

Hi I just browse through jQuery and they have something very similar to what you want. Unfortunately the example is illustrated using text wordings but I think the concept should apply to images also. The thumbnail when clicked slowly enlarge to become big.

http://jqueryui.com/demos/toggleClass/

Click on the "Run Effect" button to see the effect. Note it has a time component argument such that you can control the effect speed. I believe you can achieve the above effect in a couple lines of JavaScript code.

[Kor]

This is a JavaScript problem, thus I will move this Thread to the proper JavaScript Forum