/* ******************************************
.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 = $(‘
.mousemove(move)
.hide()
.appendTo(‘body’);
$this.data(‘loupe’, true)
.mouseenter(move)
.mouseout(function () {
time = setTimeout(hide, 500);
});
}) : this;
};
}(jQuery));