21 Replies Latest reply on Aug 25, 2014 2:32 AM by Graeme898

    jQuery plug-in for image zooming

    Ejoni Level 1

      Hi together,

       

      Maybe someone can help me to find a solution for my problem with Adobe Edge Animate. I am trying to include a jQuery plug-in for

      image zooming, but it doesn´t work. The plugin is ImageLens.

      You can find it here:

      http://www.dailycoding.com/Posts/imagelens__a_jquery_plugin_for_lens_effect_image_zooming. aspx

       

      What I tried:

      Step by step:

       

      1. I created a simple symbol "map" in Edge Animate which is my image.

      2. I included the scripts "jquery.imageLens" and "jquery" from the plugin to Edge Animate.

      3. After that I opened the script panel and wrote there:

      sym.$('map').imageLens();

      3. Now, I can see the lens on the picture, but the zooming doesn´t work. That is my problem.

       

       

      If you know an easier way to get this zomming effekt with a lens, let me now! I hope, someone is interested in solving this problem. Thank you very much!

        • 1. Re: jQuery plug-in for image zooming
          resdesign Adobe Community Professional & MVP

          I believe you need to have a small image and a large image for it to work. The zoom will show the large image. I think I have a sample but I won't be at my PC until Tuesday. If you have not found a solution by then let me know.

          Sent from Mailbox

          1 person found this helpful
          • 2. Re: jQuery plug-in for image zooming
            Ejoni Level 1

            Hello resdesign,

            thank you for your answer. I think there are some different ways to realize the zoom effect. The plugin "ImageLens" doesn´t need two pictures which are small and big. I could test the plugin with a simple HTML-Site and it works with one picture. But I have to include it to Edge Animate... If you have an other way to build this zoom effect with Edge Animate, I would  appreciate your help.

            • 3. Re: jQuery plug-in for image zooming
              Ejoni Level 1

              I found a better and easier plugin foor zooming effect on this website:http://www.elevateweb.co.uk/image-zoom/examples

               

              To include the plugin, there is a simple Html-Code:

              <img id="zoom_01" src="small/image1.png" data-zoom-image="large/image1.jpg"/>


              To execute the plugin, there is a Javascript-Code:

              $("#zoom_01").elevateZoom();



              So, my question is: How can I include the HTML-Code to Edge Animate? Do I have to write the code in the script panel? If yes, how?

              Thanks!

              1 person found this helpful
              • 4. Re: jQuery plug-in for image zooming
                hemanthR Adobe Employee

                Add the below snippet in composition ready event listener or at 0th second trigger

                sym.$("<YOUR ELEMENT NAME>").append('<img id="zoom_01" src="small/image1.png" data-zoom-image="large/image1.jpg"/>');

                • 5. Re: jQuery plug-in for image zooming
                  resdesign Adobe Community Professional & MVP

                  I am back in town and I thought I would share this example. I found a tutorial I do not remember where but I adapted to Animate. This may be useful to you. All code is in compositionReady.

                   

                  sample file: Zoom example.zip - Box

                  • 6. Re: jQuery plug-in for image zooming
                    Ejoni Level 1

                    Wow, thank you a million resdesign. You solved my problem! I hope I can help you too, maybe some months later

                    • 7. Re: jQuery plug-in for image zooming
                      Ejoni Level 1

                      Thank you very much

                      • 9. Re: jQuery plug-in for image zooming
                        Ejoni Level 1

                        Oh nooo, I tried to include your zoom script to my animation, but there is something wrong. I see my picture, I see the lens.... but when I enter my picture with the mouse, the lens/zoomer disappears...and I don´t know why. I assume the line does sth wrong:

                            $(this).mousemove(function (e)

                         

                        Can resdesign or someone else help me? Thank you!

                         

                         

                         

                         

                        sym.$('.zoom_area').css({

                            'margin': 'auto',

                            'position': 'relative',

                            'width':550,

                            'height':400

                        });

                        sym.$('.zoom').css({

                            'box-shadow':'0 0 0 2px rgba(255,255,255,0.85),0 0 2px 2px rgba(20,20,20,0.25), inset 0 0 40px 2px rgba(20,20,20,.25)',

                            'position':'absolute',

                            'display':'none'

                        });

                         

                        sym.$('.zoom_area img').css({    'width': 550});

                        sym.$('.zoom_area').each(function () {

                                // find the element in the dom that have the zoom class

                                var zoom = $(this).find('.zoom');

                                // the big image is the background of the loop.

                                var zoom_on = $(this).find('.zImage');

                                // load the actual image in the loop

                                var image = new Image();

                                image.src = zoom_on.attr('src');

                                zoom.css({background: "url('"+$(this).find('.zImage').attr('src')+"')no-repeat"});

                                // the top left of element compare to the page.

                                var offset = $(this).offset();   

                                // gets the coordinate of the mouse compare to the image on the stage

                                $(this).mousemove(function (e) {

                                    var x = e.pageX - offset.left;

                                    var y = e.pageY - offset.top;

                                    // if the mouse enters the image fade in the zoom

                                    if (x > 0 && x < $(this).width() && y > 0 && y < $(this).height()){

                                        zoom.fadeIn(250);

                                    }

                                    else //fade out the zoom when it leaves

                                    {

                                        zoom.fadeOut(250);

                                    }

                                    // center the mouse in the zoom

                                    // calculate the ratio of the image compare to the original image - center it.

                                    var rx = -Math.round(image.width/zoom_on.width()*x- zoom.width()/2);

                                    var ry = -Math.round(image.height/zoom_on.height()*y- zoom.height()/2);

                                    zoom.css({

                                        left: (x-zoom.width()/2) + "px",

                                        top: (y-zoom.height()/2) + "px",

                                        backgroundPosition: (rx) +"px " + (ry) + "px"

                                    });

                                });

                        });

                        • 10. Re: jQuery plug-in for image zooming
                          resdesign Adobe Community Professional & MVP

                          Could you send me a link to your files?

                          • 11. Re: jQuery plug-in for image zooming
                            Ejoni Level 1

                            Sure,  it is easier... you can download the file here: https://www.dropbox.com/s/3ecp70wrsb7jem4/website.rar

                            "article03" is a symbol, you will find your zooming code in it.

                             

                            I have two questions:

                            1) Why does it not work with zooming?

                            2) In the program the "map" is in the green field, but when you open the html file, the "map" is moved to the right side.I can not explain why...

                             

                            Thank you very very much for your help...

                            • 12. Re: jQuery plug-in for image zooming
                              resdesign Adobe Community Professional & MVP

                              Could you repost your file? I cannot open the rar file.

                              • 13. Re: jQuery plug-in for image zooming
                                Ejoni Level 1

                                Can you open the zip-file?

                                 

                                Dropbox - website.zip

                                • 14. Re: jQuery plug-in for image zooming
                                  resdesign Adobe Community Professional & MVP

                                  The reason it is not working is because your composition is responsive. I will try and find a way to make it work for you with it or with another plugin.

                                  • 15. Re: jQuery plug-in for image zooming
                                    resdesign Adobe Community Professional & MVP

                                    Using the original plugin, here is the corrected file: zoom.zip - Box

                                     

                                    All you needed is this:

                                    sym.getSymbol("article03").$("map").elevateZoom();

                                    • 16. Re: jQuery plug-in for image zooming
                                      Ejoni Level 1

                                      wooow, it works . thank you again!

                                      • 17. Re: jQuery plug-in for image zooming
                                        Ejoni Level 1

                                        There is the next trouble . It works with zooming now, but the zooming is not just on the page where the map is. It is on the first page too, no idea why. If you have time, you can download it here:

                                         

                                        Dropbox - website2.zip

                                         

                                        Just move the mouse on the page, you will see the trouble...

                                        Thanks!

                                        • 18. Re: jQuery plug-in for image zooming
                                          Ejoni Level 1

                                          I solved it!

                                          I should write the code in the action panel for the "map" and not for the "stage"....

                                          I hope, I have no more questions ...

                                          • 19. Re: jQuery plug-in for image zooming
                                            resdesign Adobe Community Professional & MVP

                                            Sorry I was out for the day. Glad you solve your problem.

                                            • 20. Re: jQuery plug-in for image zooming
                                              Graeme898 Level 1

                                              I have been trying to implement this functionality and this is a great solution from resdesign.

                                              However I have been trying to get this working on a tablet (both Android and iPad) and I've been having some difficulties. Ideally it should work on both desktops and devices.

                                              Obviously, the mouseover function will not work on devices so I changes the project to show the lens when on mousedown / touchstart and hide the lens on mouseup / touchend. Here is the relevant code from resdesign's project on post 5. I have highlighted my changes in bold:

                                               

                                              .....

                                              // boolean to check if mouse down

                                              var isDown = false;

                                               

                                              // function to deal with zooming

                                              sym.$('.zoom_area').each(function () {

                                               

                                                   // find the element in the dom that have the zoom class

                                                   var zoom = $(this).find('.zoom');

                                                   // the big image is the background of the loop.

                                                   var zoom_on = $(this).find('.zImage');

                                                   // load the actual image in the loop

                                                   var image = new Image();

                                                   image.src = zoom_on.attr('src');

                                                   zoom.css({background: "url('"+$(this).find('.zImage').attr('src')+"')no-repeat"});

                                                   // the top left of element compare to the page.

                                                   var offset = $(this).offset();

                                               

                                                

                                                   $(document).on("mousedown touchstart", function(e) {

                                                        isDown = true;

                                                   });

                                               

                                                   $(document).on("mouseup touchend", function(e) {

                                                        if(isDown) {

                                                             isDown = false;

                                                        }

                                                   });

                                               

                                               

                                                   // gets the coordinate of the mouse compare to the image on the stage

                                                   $(this).on("mousemove touchmove", function (e) {

                                                        var x = e.pageX - offset.left;

                                                        var y = e.pageY - offset.top;

                                               

                                                   // if the mouse enters the image fade in the zoom

                                                   if (x > 0 && x < $(this).width() && y > 0 && y < $(this).height() && isDown){

                                                        zoom.fadeIn(250);

                                                   }

                                                   else //fade out the zoom when it leaves

                                                   {

                                                        zoom.fadeOut(250);

                                                   }

                                              .....

                                                   });

                                              });

                                               

                                               

                                              This works fine on a desktop. The lens will only appear when the mouse is down, moves with the mouse, and disappears when mouse up. On a tablet, however, the lens will not show up.

                                              Can someone help me achieve this on a device?

                                              Thanks.

                                              • 21. Re: jQuery plug-in for image zooming
                                                Graeme898 Level 1

                                                I solved it!! It now works on both desktops and tablets.

                                                It turns out the coordinates for a touch event are slightly different for a mouse event:

                                                 

                                                // mouse event coordinates

                                                var x = e.pageX - offset.left;

                                                var y = e.pageY - offset.top;


                                                // touch event coordinates

                                                var x = e.originalEvent.touches[0].pageX - offset.left;

                                                var y = e.originalEvent.touches[0].pageY - offset.top;

                                                 

                                                Unfortunately due to my work's network policies, I cannot post my project on any file sharing service. I will just paste the full code below and it can be copied into resdesign's project on post 5.



                                                sym.$('.zoom_area').css({

                                                     'margin': 'auto',

                                                     'position': 'absolute',

                                                     'width':550,

                                                     'height':400

                                                });

                                                 

                                                sym.$('.zoom_area img').css({'width': 550});

                                                 

                                                // set css for ellipse object

                                                sym.$('.zoom').css({

                                                     'box-shadow':'0 0 0 2px rgba(255,255,255,0.85),0 0 2px 2px rgba(20,20,20,0.25), inset 0 0 40px 2px rgba(20,20,20,.25)',

                                                     'position':'absolute',

                                                     'display':'none'

                                                });

                                                 

                                                // boolean to determine if touch start / end

                                                var isDown = false;

                                                 

                                                // function to deal with zooming

                                                sym.$('.zoom_area').each(function () {

                                                     // find the element in the dom that have the zoom class

                                                     var zoom = $(this).find('.zoom');

                                                     // the big image is the background of the loop.

                                                     var zoom_on = $(this).find('.zImage');

                                                     // load the actual image in the loop

                                                     var image = new Image();

                                                     image.src = zoom_on.attr('src');

                                                     zoom.css({background: "url('"+$(this).find('.zImage').attr('src')+"')no-repeat"});

                                                     // the top left of element compare to the page.

                                                     var offset = $(this).offset();

                                                 

                                                     // whenever the document detects a touch start, set isDown to true

                                                     $(document).on("touchstart", function(e) {

                                                          isDown = true;

                                                     });

                                                     // whenever the document detects a touch end, set isDown to false

                                                     $(document).on("touchend", function(e) {

                                                          if (isDown) {

                                                               isDown = false;

                                                          }

                                                     });

                                                 

                                                     // MOUSE MOVE EVENT

                                                     $(this).mousemove(function (e) {

                                                          // gets the coordinate of the MOUSE compare to the image on the stage

                                                          var x = e.pageX - offset.left;

                                                          var y = e.pageY - offset.top;

                                                 

                                                          // if the mouse enters the image fade in the zoom

                                                          if (x > 0 && x < $(this).width() && y > 0 && y < $(this).height()){

                                                               zoom.fadeIn(250);

                                                          }

                                                          else //fade out the zoom when it leaves

                                                          {

                                                               zoom.fadeOut(250);

                                                          }

                                                          // center the mouse in the zoom

                                                          // calculate the ratio of the image compare to the original image - center it.

                                                          var rx = -Math.round(image.width/zoom_on.width()*x- zoom.width()/2);

                                                          var ry = -Math.round(image.height/zoom_on.height()*y- zoom.height()/2);

                                                 

                                                          zoom.css({

                                                               left: (x-zoom.width()/2) + "px",

                                                               top: (y-zoom.height()/2) + "px",

                                                               backgroundPosition: (rx) +"px " + (ry) + "px"

                                                          });

                                                     });

                                                     // end of mouse move event


                                                     // TOUCH MOVE EVENT

                                                     $(this).touchmove(function (e) {

                                                          // gets the coordinate of the TOUCH compare to the image on the stage

                                                          var x = e.originalEvent.touches[0].pageX - offset.left;

                                                          var y = e.originalEvent.touches[0].pageY - offset.top;

                                                          // if the mouse enters the image and isDown is true, fade in the zoom

                                                          if (x > 0 && x < $(this).width() && y > 0 && y < $(this).height() && isDown){

                                                               zoom.fadeIn(250);

                                                          }

                                                          else //fade out the zoom when it leaves

                                                          {

                                                               zoom.fadeOut(250);

                                                          }

                                                          // center the touch in the zoom

                                                          // calculate the ratio of the image compare to the original image - center it.

                                                          var rx = -Math.round(image.width/zoom_on.width()*x- zoom.width()/2);

                                                          var ry = -Math.round(image.height/zoom_on.height()*y- zoom.height()/2);

                                                 

                                                          zoom.css({

                                                               left: (x-zoom.width()/2) + "px",

                                                               top: (y-zoom.height()/2) + "px",

                                                               backgroundPosition: (rx) +"px " + (ry) + "px"

                                                          });

                                                     });

                                                     // end of touch move event

                                                });