https://pyroskin.com/bitrix/templates/semantis/js/cloud-zoom.1.0.2.js

1//////////////////////////////////////////////////////////////////////////////////
2// Cloud Zoom V1.0.2
3// (c) 2010 by R Cecco. <http://www.professorcloud.com>
4// MIT License
5//
6// Please retain this copyright header in all versions of the software
7//////////////////////////////////////////////////////////////////////////////////
8(function ($) {
9
10    $(document).ready(function () {
11        $('.cloud-zoom, .cloud-zoom-gallery').CloudZoom();
12    });
13
14    function format(str) {
15        for (var i = 1; i < arguments.length; i++) {
16            str = str.replace('%' + (i - 1), arguments[i]);
17        }
18        return str;
19    }
20
21    function CloudZoom(jWin, opts) {
22        var sImg = $('img', jWin);
23		var	img1;
24		var	img2;
25        var zoomDiv = null;
26		var	$mouseTrap = null;
27		var	lens = null;
28		var	$tint = null;
29		var	softFocus = null;
30		var	$ie6Fix = null;
31		var	zoomImage;
32        var controlTimer = 0;      
33        var cw, ch;
34        var destU = 0;
35		var	destV = 0;
36        var currV = 0;
37        var currU = 0;      
38        var filesLoaded = 0;
39        var mx,
40            my; 
41        var ctx = this, zw;
42        // Display an image loading message. This message gets deleted when the images have loaded and the zoom init function is called.
43        // We add a small delay before the message is displayed to avoid the message flicking on then off again virtually immediately if the
44        // images load really fast, e.g. from the cache. 
45        //var	ctx = this;
46        setTimeout(function () {
47            //						 <img src="/images/loading.gif"/>
48            if ($mouseTrap === null) {
49                var w = jWin.width();
50                jWin.parent().append(format('<div style="width:%0px;position:absolute;top:75%;left:%1px;text-align:center" class="cloud-zoom-loading" >Loading...</div>', w / 3, (w / 2) - (w / 6))).find(':last').css('opacity', 0.5);
51            }
52        }, 200);
53
54
55        var ie6FixRemove = function () {
56
57            if ($ie6Fix !== null) {
58                $ie6Fix.remove();
59                $ie6Fix = null;
60            }
61        };
62
63        // Removes cursor, tint layer, blur layer etc.
64        this.removeBits = function () {
65            //$mouseTrap.unbind();
66            if (lens) {
67                lens.remove();
68                lens = null;             
69            }
70            if ($tint) {
71                $tint.remove();
72                $tint = null;
73            }
74            if (softFocus) {
75                softFocus.remove();
76                softFocus = null;
77            }
78            ie6FixRemove();
79
80            $('.cloud-zoom-loading', jWin.parent()).remove();
81        };
82
83
84        this.destroy = function () {
85            jWin.data('zoom', null);
86
87            if ($mouseTrap) {
88                $mouseTrap.unbind();
89                $mouseTrap.remove();
90                $mouseTrap = null;
91            }
92            if (zoomDiv) {
93                zoomDiv.remove();
94                zoomDiv = null;
95            }
96            //ie6FixRemove();
97            this.removeBits();
98            // DON'T FORGET TO REMOVE JQUERY 'DATA' VALUES
99        };
100
101
102        // This is called when the zoom window has faded out so it can be removed.
103        this.fadedOut = function () {
104            
105			if (zoomDiv) {
106                zoomDiv.remove();
107                zoomDiv = null;
108            }
109			 this.removeBits();
110            //ie6FixRemove();
111        };
112
113        this.controlLoop = function () {
114            if (lens) {
115                var x = (mx - sImg.offset().left - (cw * 0.5)) >> 0;
116                var y = (my - sImg.offset().top - (ch * 0.5)) >> 0;
117               
118                if (x < 0) {
119                    x = 0;
120                }
121                else if (x > (sImg.outerWidth() - cw)) {
122                    x = (sImg.outerWidth() - cw);
123                }
124                if (y < 0) {
125                    y = 0;
126                }
127                else if (y > (sImg.outerHeight() - ch)) {
128                    y = (sImg.outerHeight() - ch);
129                }
130
131                lens.css({
132                    left: x,
133                    top: y
134                });
135                lens.css('background-position', (-x) + 'px ' + (-y) + 'px');
136
137                destU = (((x) / sImg.outerWidth()) * zoomImage.width) >> 0;
138                destV = (((y) / sImg.outerHeight()) * zoomImage.height) >> 0;
139                currU += (destU - currU) / opts.smoothMove;
140                currV += (destV - currV) / opts.smoothMove;
141
142                zoomDiv.css('background-position', (-(currU >> 0) + 'px ') + (-(currV >> 0) + 'px'));              
143            }
144            controlTimer = setTimeout(function () {
145                ctx.controlLoop();
146            }, 30);
147        };
148
149        this.init2 = function (img, id) {
150
151            filesLoaded++;
152            //console.log(img.src + ' ' + id + ' ' + img.width);	
153            if (id === 1) {
154                zoomImage = img;
155            }
156            //this.images[id] = img;
157            if (filesLoaded === 2) {
158                this.init();
159            }
160        };
161
162        /* Init function start.  */
163        this.init = function () {
164            // Remove loading message (if present);
165            $('.cloud-zoom-loading', jWin.parent()).remove();
166
167
168/* Add a box (mouseTrap) over the small image to trap mouse events.
169		It has priority over zoom window to avoid issues with inner zoom.
170		We need the dummy background image as IE does not trap mouse events on
171		transparent parts of a div.
172		*/
173            $mouseTrap = jWin.parent().append(format("<div class='mousetrap' style='background-image:url(\".\");z-index:999;position:absolute;width:%0px;height:%1px;left:%2px;top:%3px;\'></div>", sImg.outerWidth(), sImg.outerHeight(), 0, 0)).find(':last');
174
175            //////////////////////////////////////////////////////////////////////			
176            /* Do as little as possible in mousemove event to prevent slowdown. */
177            $mouseTrap.bind('mousemove', this, function (event) {
178                // Just update the mouse position
179                mx = event.pageX;
180                my = event.pageY;
181            });
182            //////////////////////////////////////////////////////////////////////					
183            $mouseTrap.bind('mouseleave', this, function (event) {
184                clearTimeout(controlTimer);
185                //event.data.removeBits();                
186				if(lens) { lens.fadeOut(299); }
187				if($tint) { $tint.fadeOut(299); }
188				if(softFocus) { softFocus.fadeOut(299); }
189				zoomDiv.fadeOut(300, function () {
190                    ctx.fadedOut();
191                });																
192                return false;
193            });
194            //////////////////////////////////////////////////////////////////////			
195            $mouseTrap.bind('mouseenter', this, function (event) {
196				mx = event.pageX;
197                my = event.pageY;
198                zw = event.data;
199                if (zoomDiv) {
200                    zoomDiv.stop(true, false);
201                    zoomDiv.remove();
202                }
203
204                var xPos = opts.adjustX,
205                    yPos = opts.adjustY;
206                             
207                var siw = sImg.outerWidth();
208                var sih = sImg.outerHeight();
209
210                var w = opts.zoomWidth;
211                var h = opts.zoomHeight;
212                if (opts.zoomWidth == 'auto') {
213                    w = siw;
214                }
215                if (opts.zoomHeight == 'auto') {
216                    h = sih;
217                }
218                //$('#info').text( xPos + ' ' + yPos + ' ' + siw + ' ' + sih );
219                var appendTo = jWin.parent(); // attach to the wrapper			
220                switch (opts.position) {
221                case 'top':
222                    yPos -= h; // + opts.adjustY;
223                    break;
224                case 'right':
225                    xPos += siw; // + opts.adjustX;					
226                    break;
227                case 'bottom':
228                    yPos += sih; // + opts.adjustY;
229                    break;
230                case 'left':
231                    xPos -= w; // + opts.adjustX;					
232                    break;
233                case 'inside':
234                    w = siw;
235                    h = sih;
236                    break;
237                    // All other values, try and find an id in the dom to attach to.
238                default:
239                    appendTo = $('#' + opts.position);
240                    // If dom element doesn't exit, just use 'right' position as default.
241                    if (!appendTo.length) {
242                        appendTo = jWin;
243                        xPos += siw; //+ opts.adjustX;
244                        yPos += sih; // + opts.adjustY;	
245                    } else {
246                        w = appendTo.innerWidth();
247                        h = appendTo.innerHeight();
248                    }
249                }
250
251                zoomDiv = appendTo.append(format('<div id="cloud-zoom-big" class="cloud-zoom-big" style="display:none;position:absolute;left:%0px;top:%1px;width:%2px;height:%3px;background-image:url(\'%4\');z-index:99;"></div>', xPos, yPos, w, h, zoomImage.src)).find(':last');
252
253                // Add the title from title tag.
254                if (sImg.attr('title') && opts.showTitle) {
255                    zoomDiv.append(format('<div class="cloud-zoom-title">%0</div>', sImg.attr('title'))).find(':last').css('opacity', opts.titleOpacity);
256                }
257
258                // Fix ie6 select elements wrong z-index bug. Placing an iFrame over the select element solves the issue...		
259                if ($.browser.msie && $.browser.version < 7) {
260                    $ie6Fix = $('<iframe frameborder="0" src="#"></iframe>').css({
261                        position: "absolute",
262                        left: xPos,
263                        top: yPos,
264                        zIndex: 99,
265                        width: w,
266                        height: h
267                    }).insertBefore(zoomDiv);
268                }
269
270                zoomDiv.fadeIn(500);
271
272                if (lens) {
273                    lens.remove();
274                    lens = null;
275                } /* Work out size of cursor */
276                cw = (sImg.outerWidth() / zoomImage.width) * zoomDiv.width();
277                ch = (sImg.outerHeight() / zoomImage.height) * zoomDiv.height();
278
279                // Attach mouse, initially invisible to prevent first frame glitch
280                lens = jWin.append(format("<div class = 'cloud-zoom-lens' style='display:none;z-index:98;position:absolute;width:%0px;height:%1px;'></div>", cw, ch)).find(':last');
281
282                $mouseTrap.css('cursor', lens.css('cursor'));
283
284                var noTrans = false;