PLUGIN_LOUPE

/* ******************************************
.loupe { background-color:#555;
background: rgb(0, 0, 0, 0.25);
border: solid 3px;
border-color: rgb(222, 222, 222, 0);
border-color: white;
border-radius: 100px;
}

$(‘.macro_foto’).loupe({
width: 200, // ширина лупы
height: 200, // высота лупы
loupe: ‘loupe’ // css класс лупы
});
****************************************** */

/**
* loupe — an image magnifier for jQuery
* (C) 2010 jdbartlett, MIT license
* http://github.com/jdbartlett/loupe
*/
(function ($) {
$.fn.loupe = function (arg) {
var options = $.extend({
loupe: ‘loupe’,
width: 200,
height: 150
}, arg || {});

return this.length ? this.each(function () {
var $this = $(this), $big, $loupe,
$small = $this.is(‘img’) ? $this : $this.find(‘img:first’),
move, hide = function () { $loupe.hide(); },
time;

if ($this.data(‘loupe’) != null) {
return $this.data(‘loupe’, arg);
}

move = function (e) {
var os = $small.offset(),
sW = $small.outerWidth(),
sH = $small.outerHeight(),
oW = options.width / 2,
oH = options.height / 2;

if (!$this.data(‘loupe’) ||
e.pageX > sW + os.left + 10 || e.pageX < os.left - 10 || e.pageY > sH + os.top + 10 || e.pageY < os.top - 10) { return hide(); } $(document).on('scroll', function () {time = setTimeout(hide, 10);} ) time = time ? clearTimeout(time) : 0; $loupe.show().css({ left: e.pageX - oW, top: e.pageY - oH }); $big.css({ left: -(((e.pageX - os.left) / sW) * $big.width() - oW)|0, top: -(((e.pageY - os.top) / sH) * $big.height() - oH)|0 }); }; $loupe = $('

‘)
.addClass(options.loupe)
.css({
width: options.width,
height: options.height,
position: ‘absolute’,
overflow: ‘hidden’
})
.append($big = $(‘‘).attr(‘src’, $this.attr($this.is(‘img’) ? ‘src’ : ‘href’)).css(‘position’, ‘absolute’))
.mousemove(move)
.hide()
.appendTo(‘body’);

$this.data(‘loupe’, true)
.mouseenter(move)
.mouseout(function () {
time = setTimeout(hide, 500);
});
}) : this;
};
}(jQuery));