4 Replies Latest reply: Feb 3, 2013 4:10 PM by joindmvmnt RSS

    image magnifying

    joindmvmnt

      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!

        • 1. Re: image magnifying
          Jon Fritz II MVP

          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

          • 2. Re: image magnifying
            joindmvmnt Community Member

            Hello Jon Fritz II,

             

            Thanks for recommendation! I actually did end up using one of the jquery plugins in there. However, I am having trouble getting it to work. The plugin was downloaded from http://www.jacklmoore.com/zoom

            I searched online on how to make a jquery plugin work but no success, this is why I am turning to you. Could you give me some guidance? This is the code I have sofar, I have no previous experience with jquery so please bear with me. I am using Dreamweaver CS5 v.11

             

            Thank you in advance,

             

            <html xmlns="http://www.w3.org/1999/xhtml">

            <head>

            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

            <title>zoom in trial</title>

             

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

            <script> $(document).ready(function(){

                $('a.photo').zoom({

                    url: 'photo-big.jpg',

                    callback: function(){

                        $(this).colorbox({href: this.src});

                    }

                     });

            });

            </script>

             

            </head>

             

            <span class='zoom' id='ex1'>

                    <img  src="zoom/daisy.jpg" id='jack' width='555' height='320' alt='Daisy on the Ohoopee'/>

            </body>

            </html>

            • 3. Re: image magnifying
              Jon Fritz II MVP

              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"></script>

               

              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.

              • 4. Re: image magnifying
                joindmvmnt Community Member

                Jon Fritz II,

                Your help has been greatly appreciated,

                 

                I'm very thankful there are people like you out there. If you would like to see what I was able to achieve with your assistance please visit http://www.hastamorir.ca/Mens%20libertad.html

                 

                Thanks

                 

                 

                Date: Thu, 31 Jan 2013 06:19:01 -0800

                From: forums_noreply@adobe.com

                To: juan_casallas@hotmail.com

                Subject: image magnifying

                 

                 

                 

                 

                 

                 

                      

                           

                           

                           

                    Re: image magnifying

                 

                 

                    created by Jon Fritz II in Dreamweaver - View the full discussion

                 

                 

                 

                You appear to be missing the link to the actual jquery library file. You should have something like... In the  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  section, just above the link to the zoom.min.js script... 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.

                 

                 

                     Please note that the Adobe Forums do not accept email attachments. If you want to embed a screen image in your message please visit the thread in the forum to embed the image at http://forums.adobe.com/message/5037161#5037161

                     Replies to this message go to everyone subscribed to this thread, not directly to the person who posted the message. To post a reply, either reply to this email or visit the message page: http://forums.adobe.com/message/5037161#5037161

                     To unsubscribe from this thread, please visit the message page at http://forums.adobe.com/message/5037161#5037161. In the Actions box on the right, click the Stop Email Notifications link.

                      

                     Start a new discussion in Dreamweaver by email or at Adobe Community

                  For more information about maintaining your forum email notifications please go to http://forums.adobe.com/message/2936746#2936746.