Skip navigation
joindmvmnt
Currently Being Moderated

image magnifying

Jan 22, 2013 1:57 PM

Tags: #image #magnifying #mouse_pointer

Hello,

 

I want to magnify an image when you hover over it and that it moves with the cursor.

 

You know those sites that display a detailed photo of say 800x600 but, display it in an area only 200x200 ?

the user moves the cursor around the 200x200 window and the full size 800x600 scrolls around the 200x200 window ?

It's kind of a magnifying glass effect

Anyone know how I can implement this ?

 

just like this when you hover over the largest picture on the site

http://us.shop.rvca.com/p/mens/tees-tanks/big-rvca?style=H603100B&clr= ABL

 

Please help!

 
Replies
  • Currently Being Moderated
    Jan 22, 2013 1:57 PM   in reply to joindmvmnt

    You could get that done with jQuery pretty easily.

     

    Here's a page that has a few different jQuery plug-ins that can handle that...

     

    http://www.tripwiremagazine.com/2012/12/jquery-image-zoom.html

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 31, 2013 6:18 AM   in reply to joindmvmnt

    You appear to be missing the link to the actual jquery library file. You should have something like...

     

    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>

     

    In the <head> section of your site. That file should have come with the jquery.zoom.min.js file but it appears the makers of that script expect you to know that you need it rather than giving it to you directly. No biggie. You can add this link to your <head> section, just above the link to the zoom.min.js script...

     

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></sc ript>

     

    Or you can open that link and copy the contents to a blank .js file to add to your site, then link to that file instead.

     

    That "should" get you going.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points