Growing Image

[Snookerman]

I'm sure Snookerman will correct them if there are.

Hehe, don't want to get the besserwisser tag now.

I can't believe I overlooked that my revised suggestion was not dynamic, since that was the point, so I started working on it, getting close but just not there. So when you posted this I was quite relieved and I noticed we took approximately the same approach. However, to maintain my besserwisser status, there are some issues. I tested it and the growing problem remains, although with a limit and also, sometimes the images don't react to the hovering.

I'll try to put both our codes together and hopefully I'll be able to sleep tonight without thinking about this code .

[Medyman]

I spent about 5 minutes on it, so I expect there to be issues. Though, I think this will suffice for 95% of use cases. The problem occurs some someone starts hovering on/off fairly fast and repeatedly. I tend to dismiss the import of coding to fit those fringe situations. The only practical instance when that would occur is during testing. If a casual web surfer is just being obnoxious, I don't really care to waste my time catering to that audience.

But by all means, make it perfect. Actually, in order to do so, I think you'll need to extend the jQuery object and create a plugin. That would be the easiest way, anyway.

[Snookerman]

Hehe, I think I'll take a look at it later, I'm too tired now. One thing I realized is that we never actually asked Simon if he actually needs this or if he just has one picture he wants to zoom. In any case, this might be helpful for other coders viewing this thread.

[jscheuer1]

See also:

http://www.dynamicdrive.com/forums/s...361#post175361

[Snookerman]

That's a great script, but do you know how to make images in natural size, zoom in and preferably with jQuery for those (read: me) who don't know much JavaScript. What we're trying to do here is zooming in on images without have to specify a smaller size for each one, which is more dynamic.

[jscheuer1]

The example link (from post 1 in this thread) used just one image with both the smaller and larger dimensions specified as numeric variables.

I looked at that code, it was horrible. And, you don't have to specify anything.

With my script, when the image is first moused over, it initializes by getting both the actual dimensions and those set in the attributes. No javascript knowledge is required. It's quite dynamic, and degrades well if not supported.

Now, ddadmin has suggested that I use Math.cos() to make the arc of expansion/contraction more of a curve. If that's what you are talking about, I'm not seeing how to make that work, yet. But I think I got the math right, it's just that the difference isn't great enough to be detected by the human (at least my) eye.