View Full Version : Jquery image magnify, magnify onmouseover

10-11-2009, 11:20 PM
1) Script Title: jQuery Image Magnify

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/imagemagnify.htm (http://www.dynamicdrive.com/dynamicindex4/imagemagnify.htm)

3) Describe problem: Hi i am a newbie experimenting with this great script. Has anybody found a way to make it magnify on mouseover and close on mouseout ? that would be great ! I don`t really understand javascript so i can`t figure out how to do it. Also having trouble with the + curser which only works i firefox. Any help would be much appreciated. (http://azoomer.com/magnify/)

10-13-2009, 02:33 AM
Doesn't make a lot of sense with this script. The moment you mouse over the image, it will start to magnify. The magnified image is a separate element, so the the mouse has now moved out, but the magnified image is moving toward the center of the page, mouse now is over the thumbnail again, virtually endless looping. I can modify the script to ignore that, but because the smaller image is still there, to have its mouseout make it small again could be counter-intuitive. And what about the larger image, which has migrated to who knows where exactly in relation to the thumbnail?

The best solution for mouseover activation (using this script) would in my opinion be to have mouseover of the smaller image magnify it, and to still have the onclick of the larger image as the only way to dismiss the larger image. If you want that, I will supply the modification.

However, there is another script you might prefer:


where things happen a little differently, so mouseover/out is not only more workable - it's how the script works.

10-13-2009, 06:50 AM
Thanks a lot for your explanation. The other script http://www.dynamicdrive.com/dynamicindex4/expandoimage.htm looks very nice indeed and i will look into it. Yesterday i modified another script: the php photo album (http://www.dynamicdrive.com/dynamicindex4/php-photoalbum.htm) to a mouseover/mouseout solution and it works quite well, even though you have to mouseover the larger image to make it disappear. Take a look if you have time (http://www.azoomer.com/phpalbum/).
Thanks for your great scripts and kind help

10-13-2009, 07:53 AM
I've just had a look at the PHP Photo Album modification and though the page looks great, it has a similar issue to what I anticipate with the magnifier script if made completely mouseover/out driven. If you make the browser's window short enough, the transition from being over a thumbnail to being over the larger image isn't great enough to allow for any real control over the situation. In fact, you can get into a situation where one follows the other very rapidly in a sort of loop because the moment the larger image appears, the mouse is now over it, so it disappears, and then the mouse is over the thumbnail again. The browser doesn't even have to be all that short, and this is something that you cannot really take away from the control of the user, and more importantly - you cannot remove the possibility that the user's screen may constrain them to a short browser window.

10-13-2009, 10:37 AM
I am glad you looked at it. You are right it can become a problem when the larger image covers the thumbnails. I guess i will have to try to restrict the area where the larger image is shown, in some way, so that it doesn`t overlap the thumbs. I think the mousover effect is cool though. Perfect for lazy people like me. Best regards.

10-15-2009, 09:27 PM
In case someone wants to see here is (http://azoomer.com/phpfacebox/) an example where the PHP photo album (http://www.dynamicdrive.com/dynamicindex4/php-photoalbum.htm) is combined with the facebox viewer (http://www.dynamicdrive.com/dynamicindex4/facebox/index.htm). I took the advice from John and made it open on mouseover and close on click. Also the viewbox is padded from the top with css so that i does not overlap the thumbs even in a short browser. There`s a couple of peculiarities with the corner images showing up at the top on loading, and also the pages are unable to toggle when the larger images are open. But those are minor issues. The god thing about the combination is that the images load from a folder and do not have to be coded individually in an array and also the facebox is pretty with the semitransparent border. The way to combine the two scripts is explained here (http://www.dynamicdrive.com/dynamicindex4/php-photoalbum_suppliment.htm). Thanks again for the great scripts.