CODEWITHSUNDEEP
javascriptjquery
tonyf
tonyf

Reputation: 35557

How to achieve this zooming and unzooming functionality?

I am looking to achieving this effect from Mozilla Firefox, when clicking on a video thumbnail. I would also like to achieve this with photos as well. Check this link and click on the thumbnail play button.

Upvotes: 0

Views: 132

Answers (1)

Alconja
Alconja

Reputation: 14873

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.

Upvotes: 1

Related Questions