Question

I have found one website for image zooming using animate(). But in that he had implemented on elements. I am trying to make it to work on any image.

Here is the link to the code

My requirement is to find an image tag automatically and apply this effect on it. For this i have changed the code

 $('ul.gallery li img')  to $('img')

assuming that below is my HTML code..

 <img src="/xxx.jpg"><p>jghjghjegejf</p><img src="/2.jpg">

But the zoom image is appearing at the left corner of the window.

Here is the link to jsfiddle

Answer 1

Each of the images in the original script is in an <li> with the following style applied:

ul.gallery li { float: left; position: relative; width: 110px; height: 110px; }

The most important part is position: relative. This gives the images a point of reference to use to position themselves when growing. Since you’re applying your code to images that aren’t in relative–positioned elements, they’re positioning themselves relative to the document as a whole.

You can’t easily make the images behave this way without putting them in a container.