Saturday, 19 January 2013

Hover-Zoom Extended - dynamic/background image zoom on mouse hover with run time toggle


This Jquery plugin
- displays a your images in full size when the mouse hovers over them.
- works with dynamically created images.
- also works with background images on a div.
- press "Ctrl+b" or just "b" to enable or disable it on your web page.
- check out the transparecy feature of the hover-zoom'ed image!
Just include this plugin and all images in your webpage will have the Hover-Zoom effect.






How to use:

The download pack contains two files - hover_zoom.html and the plugin file hover_zoom_extended.js. I have also provided the minified version of the plugin file hover_zoom_extended.min.js

1. Include the plugin

Include the JS file in the <head> section of your webpage and you're done!
All <img> tags will have the Hover-Zoom effect.


If you have <div> tags with background-image css property, then just give the div a css class called "hover-zoom-element".


Press Ctrl+b or just b to toggle the hover-zoom effect on your webpage.
Let me know if you face any issues.

13 comments:

  1. Hello I installed the script on wordpress site. the script works fine but only on the first page. In categories script does not work. I tried different templates and everywhere the same.

    ReplyDelete
    Replies
    1. can you please share your wordpress site link .. so we can check it out!

      Delete
    2. Also if your categories is a link to a new HTML page .. you need to include the script in that page too ...

      Or better solution would be to include the script and the options at the template level in your blog, since the template is loaded every time ..

      Delete
    3. thanks. this is my home site for experiments :) I'll try to switch it to the external network. or I can send a template that I use, if you have a ready wordpress

      Delete
    4. A live link would be great!

      Delete
    5. there is - http://92.125.41.83/myfiles write if no image, then I have to change the entry in mysql

      Delete
    6. okay, so the problem is you are using relative paths for the script and your HTML cant find the scripts in your category pages --

      Update your script tags src to the below in all your pages-

      src="http://92.125.41.83/myfiles/hover_zoom_extended.min.separated.js"

      src="http://92.125.41.83/myfiles/jquery-latest.js"

      Delete
    7. Uh! thanks! now it is worked ! I completely forgot about the importance of the full path! :) thanks again

      Delete
    8. Its Not working at all
      Dont know why

      Delete
  2. Is there a way to exclude images from being affected? I only want certain images to have zoom.

    ReplyDelete
    Replies
    1. Yeah, It uses jQuery to catch all img tags from DOM so if you change it to catch all that img but not class "dont_hover_zoom" (or any other name) , you can simply exclude images.
      Example:
      [119] $("body").on("mousemove", "img:not(.dont_hover_zoom),.hover-zoom-element", function(e){.........

      Delete
  3. If I wanted to apply this to photos inside a CMS (example http://landsurveyorsunited.com/photo) what might I do to add a class to the generated Img urls?

    ReplyDelete
  4. i'm newbi
    help me how to use this hover zoom...
    Thankx

    ReplyDelete