Results 1 to 6 of 6

Thread: Jquery image magnify, magnify onmouseover

  1. #1
    Join Date
    Oct 2009
    Posts
    845
    Thanks
    14
    Thanked 189 Times in 188 Posts

    Default Jquery image magnify, magnify onmouseover

    1) Script Title: jQuery Image Magnify

    2) Script URL (on DD): 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/)
    Thanks

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,475
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

    http://www.dynamicdrive.com/dynamici...pandoimage.htm

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    azoomer (10-13-2009)

  4. #3
    Join Date
    Oct 2009
    Posts
    845
    Thanks
    14
    Thanked 189 Times in 188 Posts

    Default

    Thanks a lot for your explanation. The other script http://www.dynamicdrive.com/dynamici...pandoimage.htm looks very nice indeed and i will look into it. Yesterday i modified another script: the php photo album 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.
    Thanks for your great scripts and kind help

  5. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,475
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. The Following User Says Thank You to jscheuer1 For This Useful Post:

    azoomer (10-13-2009)

  7. #5
    Join Date
    Oct 2009
    Posts
    845
    Thanks
    14
    Thanked 189 Times in 188 Posts

    Default

    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.

  8. #6
    Join Date
    Oct 2009
    Posts
    845
    Thanks
    14
    Thanked 189 Times in 188 Posts

    Default

    In case someone wants to see here is an example where the PHP photo album is combined with the facebox viewer. 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. Thanks again for the great scripts.
    Last edited by azoomer; 10-16-2009 at 12:48 AM.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •