0 Replies Latest reply on Apr 18, 2016 3:27 AM by benjyoung

    Javascript - Zoom - Script

    benjyoung Level 1

      I have this code from a plugin -

       

      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()/1);

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

        zoom.css({

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

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

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

        });

        });

      });

       

      All I'm trying to do is to remove the resized height and width so that it shall display the image as I have it without a zoom effect.

       

       

       

      How do I go about this?