https://copierts.ru/bitrix/templates/platforma/js/glass/glass.js?15476073064321

1var GLASS_magnify;
2var $GLASS_glass;
3
4var GLASS_uip = {
5	fadeDelay		: 200,
6	native_width	: 0,
7	native_height	: 0,
8	mouse_x			: 0,
9	mouse_y			: 0,
10	lupa			: ""
11};
12
13// Определяем положение курсора
14var GLASS_mouseMove = function(e) 
15{
16	// Получаем отступы до края картинки слева и сверху
17	var GLASS_magnify_offset = GLASS_uip.cur_img.offset();
18	GLASS_uip.mouse_x = e.pageX - GLASS_magnify_offset.left;
19	GLASS_uip.mouse_y = e.pageY - GLASS_magnify_offset.top;
20
21	if(GLASS_uip.mouse_x < GLASS_uip.cur_img.width() && GLASS_uip.mouse_y < GLASS_uip.cur_img.height() && GLASS_uip.mouse_x > 0 && GLASS_uip.mouse_y > 0)
22	{ // Если условие истинно переходим дальше
23		GLASS_magnify(e);
24	} else { // иначе скрываем
25		GLASS_uip.lupa.hide();
26	}
27	return;
28};
29
30var GLASS_magnify = function(e) 
31{
32	var rx = Math.round(GLASS_uip.mouse_x/GLASS_uip.cur_img.width()*GLASS_uip.native_width -GLASS_uip.lupa.width()/2)*-1;
33	var ry = Math.round(GLASS_uip.mouse_y/GLASS_uip.cur_img.height()*GLASS_uip.native_height - GLASS_uip.lupa.height()/2)*-1;
34	var bg_pos = rx + "px " + ry + "px";
35	var glasspop_top  = e.pageY - GLASS_uip.cur_img.offset().top - GLASS_uip.lupa.height()/2;
36	var glasspop_left = e.pageX - GLASS_uip.cur_img.offset().left - GLASS_uip.lupa.width()/2;
37	
38	// Теперь присваиваем полученные значения css свойствам лупы
39	GLASS_uip.lupa.css({
40		left: glasspop_left,
41		top: glasspop_top,
42		backgroundPosition: bg_pos
43	});
44	return;
45};
46
47$(document).ready(function(){
48	
49	if(RSAL_PHONETABLET!="Y")
50	{
51		// hide glass on click
52		$(document).on('click', '.glass_lupa', function(){
53			$GLASS_glass = $(this).parents('.glass');
54			$GLASS_glass.find('.glass_lupa').removeClass('active').fadeOut(GLASS_uip.fadeDelay);
55			$GLASS_glass.find('.js_picture_glass').unbind('mousemove');
56		});
57		
58		// hide/show glass when mouseleave
59		$(document).on('mouseleave','.glass',function(){
60			if(GLASS_uip.lupa.length)
61				GLASS_uip.lupa.fadeOut(GLASS_uip.fadeDelay);
62		});
63		
64		// show glass on click
65		$(document).on('click', '.js_picture_glass', function(){
66			$GLASS_glass = $(this).parents('.glass');
67			GLASS_uip.lupa = $GLASS_glass.find('.glass_lupa');
68			GLASS_uip.lupa.addClass('active');
69			// Движение курсора над изображению
70			$(this).parents('.glass').find('.js_picture_glass').on('mousemove',function(){
71				GLASS_uip.cur_img = $GLASS_glass.find('.js_picture_glass'); // Текущее изображение
72				GLASS_uip.lupa.fadeIn(GLASS_uip.fadeDelay); // Плавное появление лупы
73				var src = GLASS_uip.cur_img.attr('src'); // определяем путь до картинки
74				if(src) // Если существует src, устанавливаем фон для лупы 
75				{
76					GLASS_uip.lupa.css({
77						'background-image': 'url(' + src + ')',
78						'background-repeat': 'no-repeat'
79					});
80				}
81				
82				if (!GLASS_uip.cur_img.data('GLASS_native_width') || GLASS_uip.cur_img.data('src')!=src)
83				{
84					var image_object = new Image();
85					image_object.onload = function(){
86						// определяем реальные размеры картинки
87						GLASS_uip.native_width = image_object.width;
88						GLASS_uip.native_height = image_object.height;
89						// Записываем эти данные
90						GLASS_uip.cur_img.data('GLASS_native_width', GLASS_uip.native_width);
91						GLASS_uip.cur_img.data('GLASS_native_height', GLASS_uip.native_height);
92						GLASS_uip.cur_img.data('src',src);
93						// Вызываем функцию mouseMove и происходит показ лупы 
94						GLASS_mouseMove.apply(this, arguments);
95						GLASS_uip.lupa.on('mousemove', GLASS_mouseMove);
96					};
97					image_object.src = src;
98					return;
99				} else {
100					// получаем реальные размеры изображения  
101					GLASS_uip.native_width = GLASS_uip.cur_img.data('GLASS_native_width');
102					GLASS_uip.native_height = GLASS_uip.cur_img.data('GLASS_native_height');
103				}
104				// Вызываем функцию mouseMove и происходит показ лупы
105				GLASS_mouseMove.apply(this, arguments);
106				GLASS_uip.lupa.on('mousemove', GLASS_mouseMove);
107			}); 
108		});
109	}
110	
111});