How to achieve this zooming and unzooming functionlaity

Question

Hi,

I'm hoping someone can point me in the right direction with regards to achieving this effect from Mozilla Firefox, when clicking on a video thumbnail as I would also like to achieve this with photos as well, i.e, See:>

http://en-gb.www.mozilla.com/en-GB/firefox/3.5.1/whatsnew/

and click on the thumbnail play button.

Thanks. Tony.

Answer 1

If you're using jQuery, there's lots of plugins to provide zoom style thumb-to-full-size effects. For example fancybox (see the third single image example on this page).

Alternatively, if you want more control, you could build the features yourself without too much effort:

1. Load the full image with ajax
2. Replace the src attribute of your thumbnail image (make sure its a fixed size)
3. Do the zoom by animating your width/height (& position if necessary) to the full size of the final image

Note that depending on what you're showing (for example if you were doing this for embedded flash video), you may need to swap the order of 2 & 3, by zooming the thumbnail (or some other place holder image) & then swapping in the final, full size content.