https://subastas.tauleryfau.com/vendor/zoom/jquery.imageLens.js

1/*  
2    http://www.dailycoding.com/ 
3*/
4(function ($) {
5    $.fn.imageLens = function (options) {
6
7        var defaults = {
8            lensSize: 100,
9            borderSize: 4,
10            borderColor: "#888"
11        };
12        var options = $.extend(defaults, options);
13        var lensStyle = "background-position: 0px 0px;width: " + String(options.lensSize) + "px;height: " + String(options.lensSize)
14            + "px;float: left;display: none;border-radius: " + String(options.lensSize / 2 + options.borderSize)
15            + "px;border: " + String(options.borderSize) + "px solid " + options.borderColor 
16            + ";background-repeat: no-repeat;position: absolute;";
17
18        return this.each(function () {
19            obj = $(this);
20
21            var offset = $(this).offset();
22
23            // Creating lens
24            var target = $("<div style='" + lensStyle + "' class='" + options.lensCss + "'>&nbsp;</div>").appendTo($("body"));
25            var targetSize = target.size();
26
27            // Calculating actual size of image
28            var imageSrc = options.imageSrc ? options.imageSrc : $(this).attr("src");
29            var imageTag = "<img style='display:none;' src='" + imageSrc + "' />";
30
31            var widthRatio = 0;
32            var heightRatio = 0;
33
34            $(imageTag).load(function () {
35                widthRatio = $(this).width() / obj.width();
36                heightRatio = $(this).height() / obj.height();
37            }).appendTo($(this).parent());
38
39            target.css({ backgroundImage: "url('" + imageSrc + "')" });
40
41            target.mousemove(setPosition);
42            $(this).mousemove(setPosition);
43
44            function setPosition(e) {
45
46                var leftPos = parseInt(e.pageX - offset.left);
47                var topPos = parseInt(e.pageY - offset.top);
48
49                if (leftPos < 0 || topPos < 0 || leftPos > obj.width() || topPos > obj.height()) {
50                    target.hide();
51                }
52                else {
53                    target.show();
54
55                    leftPos = String(((e.pageX - offset.left) * widthRatio - target.width() / 2) * (-1));
56                    topPos = String(((e.pageY - offset.top) * heightRatio - target.height() / 2) * (-1));
57                    target.css({ backgroundPosition: leftPos + 'px ' + topPos + 'px' });
58
59                    leftPos = String(e.pageX - target.width() / 2);
60                    topPos = String(e.pageY - target.height() / 2);
61                    target.css({ left: leftPos + 'px', top: topPos + 'px' });
62                }
63            }
64        });
65    };
66})(jQuery);