https://yablor.ru/media/js/slimbox2.js

1(function($) {
2
3    // Global variables, accessible to Slimbox only
4    var win = $(window), options, images, activeImage = -1, activeURL, prevImage, nextImage, compatibleOverlay, middle, centerWidth, centerHeight,
5        ie6 = !window.XMLHttpRequest, hiddenElements = [], documentElement = document.documentElement,
6
7    // Preload images
8    preload = {}, preloadPrev = new Image(), preloadNext = new Image(),
9
10    // DOM elements
11    overlay, center, image, sizer, prevLink, nextLink, bottomContainer, bottom, caption, number;
12
13    /*
14        Initialization
15    */
16
17    $(function() {
18        // Append the Slimbox HTML code at the bottom of the document
19        $("body").append(
20            $([
21                overlay = $('<div id="lbOverlay" />')[0],
22                center = $('<div id="lbCenter" />')[0],
23                bottomContainer = $('<div id="lbBottomContainer" />')[0]
24            ]).css("display", "none")
25        );
26
27        image = $('<div id="lbImage" />').appendTo(center).append(
28            sizer = $('<div style="position: relative;" />').append([
29                prevLink = $('<a id="lbPrevLink" href="#" />').click(previous)[0],
30                nextLink = $('<a id="lbNextLink" href="#" />').click(next)[0]
31            ])[0]
32        )[0];
33
34        bottom = $('<div id="lbBottom" />').appendTo(bottomContainer).append([
35            $('<a id="lbCloseLink" href="#" />').add(overlay).click(close)[0],
36            caption = $('<div id="lbCaption" />')[0],
37            number = $('<div id="lbNumber" />')[0],
38            $('<div style="clear: both;" />')[0]
39        ])[0];
40    });
41
42
43    /*
44        API
45    */
46
47    // Open Slimbox with the specified parameters
48    $.slimbox = function(_images, startImage, _options) {
49        options = $.extend({
50            loop: false,                // Allows to navigate between first and last images
51            overlayOpacity: 0.8,            // 1 is opaque, 0 is completely transparent (change the color in the CSS file)
52            overlayFadeDuration: 400,        // Duration of the overlay fade-in and fade-out animations (in milliseconds)
53            resizeDuration: 400,            // Duration of each of the box resize animations (in milliseconds)
54            resizeEasing: "swing",            // "swing" is jQuery's default easing
55            initialWidth: 250,            // Initial width of the box (in pixels)
56            initialHeight: 250,            // Initial height of the box (in pixels)
57            imageFadeDuration: 400,            // Duration of the image fade-in animation (in milliseconds)
58            captionAnimationDuration: 400,        // Duration of the caption animation (in milliseconds)
59            counterText: "Image {x} of {y}",    // Translate or change as you wish, or set it to false to disable counter text for image groups
60            closeKeys: [27, 88, 67],        // Array of keycodes to close Slimbox, default: Esc (27), 'x' (88), 'c' (67)
61            previousKeys: [37, 80],            // Array of keycodes to navigate to the previous image, default: Left arrow (37), 'p' (80)
62            nextKeys: [39, 78]            // Array of keycodes to navigate to the next image, default: Right arrow (39), 'n' (78)
63        }, _options);
64        // The function is called for a single image, with URL and Title as first two arguments
65        if (typeof _images == "string") {
66            _images = [[_images, startImage]];
67            startImage = 0;
68        }
69
70        middle = win.scrollTop() + (win.height() / 2);
71        centerWidth = options.initialWidth;
72        centerHeight = options.initialHeight;
73        $(center).css({top: Math.max(0, middle - (centerHeight / 2)), width: centerWidth, height: centerHeight, marginLeft: -centerWidth/2}).show();
74        compatibleOverlay = ie6 || (overlay.currentStyle && (overlay.currentStyle.position != "fixed"));
75        if (compatibleOverlay) overlay.style.position = "absolute";
76        $(overlay).css("opacity", options.overlayOpacity).fadeIn(options.overlayFadeDuration);
77        position();
78        setup(1);
79
80        images = _images;
81        options.loop = options.loop && (images.length > 1);
82        return changeImage(startImage);
83    };
84
85    /*
86        options:    Optional options object, see jQuery.slimbox()
87        linkMapper:    Optional function taking a link DOM element and an index as arguments and returning an array containing 2 elements:
88                the image URL and the image caption (may contain HTML)
89        linksFilter:    Optional function taking a link DOM element and an index as arguments and returning true if the element is part of
90                the image collection that will be shown on click, false if not. "this" refers to the element that was clicked.

91                This function must always return true when the DOM element argument is "this".
92    */
93    $.fn.slimbox = function(_options, linkMapper, linksFilter) {
94        linkMapper = linkMapper || function(el) {
95            return [el.href, el.title];
96        };
97
98        linksFilter = linksFilter || function() {
99            return true;
100        };
101
102        var links = this;
103
104        return links.unbind("click").click(function() {
105            // Build the list of images that will be displayed
106            var link = this, startIndex = 0, filteredLinks, i = 0, length;
107            filteredLinks = $.grep(links, function(el, i) {
108                return linksFilter.call(link, el, i);
109            });
110
111            // We cannot use jQuery.map() because it flattens the returned array
112            for (length = filteredLinks.length; i < length; ++i) {
113                if (filteredLinks[i] == link) startIndex = i;
114                filteredLinks[i] = linkMapper(filteredLinks[i], i);
115            }
116            // Taras add
117            _options = {rel: $(this).attr("rel")};
118            // End Taras add
119            return $.slimbox(filteredLinks, startIndex, _options);
120        });
121    };
122
123
124    /*
125        Internal functions
126    */
127
128    function position() {
129        var l = win.scrollLeft(), w = win.width();
130        $([center, bottomContainer]).css("left", l + (w / 2));
131        if (compatibleOverlay) $(overlay).css({left: l, top: win.scrollTop(), width: w, height: win.height()});
132    }
133
134    function setup(open) {
135        if (open) {
136            $("object").add(ie6 ? "select" : "embed").each(function(index, el) {
137                hiddenElements[index] = [el, el.style.visibility];
138                el.style.visibility = "hidden";
139            });
140        } else {
141            $.each(hiddenElements, function(index, el) {
142                el[0].style.visibility = el[1];
143            });
144            hiddenElements = [];
145        }
146        var fn = open ? "bind" : "unbind";
147        win[fn]("scroll resize", position);
148        $(document)[fn]("keydown", keyDown);
149    }
150
151    function keyDown(event) {
152        var code = event.keyCode, fn = $.inArray;
153        // Prevent default keyboard action (like navigating inside the page)
154        return (fn(code, options.closeKeys) >= 0) ? close()
155            : (fn(code, options.nextKeys) >= 0) ? next()
156            : (fn(code, options.previousKeys) >= 0) ? previous()
157            : false;
158    }
159
160    function previous() {
161        return changeImage(prevImage);
162    }
163
164    function next() {
165        return changeImage(nextImage);
166    }
167
168    function changeImage(imageIndex) {
169        if (imageIndex >= 0) {
170            activeImage = imageIndex;
171            activeURL = images[activeImage][0];
172            prevImage = (activeImage || (options.loop ? images.length : 0)) - 1;
173            nextImage = ((activeImage + 1) % images.length) || (options.loop ? 0 : -1);
174
175            stop();
176            center.className = "lbLoading";
177
178            preload = new Image();
179            preload.onload = animateBox;
180            preload.src = activeURL;
181        }
182
183        return false;
184    }
185
186    function animateBox() {
187        center.className = "";
188        $(image).css({backgroundImage: "url(" + activeURL + ")", visibility: "hidden", display: ""});
189        // Taras add
190        if (options['rel'].indexOf('lightbox-video') != -1){
191            var blogId = options['rel'].replace("lightbox-video-", "");
192            var htmlVideo = $('#video_temp_' + blogId).html();
193            htmlVideo = htmlVideo.substr(4, htmlVideo.length - 7);
194            $('#lbImage').append(htmlVideo);
195            $('#lbImage>div').hide();
196        }
197        // End Taras add
198        $(sizer).width(preload.width);
199        $([sizer, prevLink, nextLink]).height(preload.height);
200
201        $(caption).html(images[activeImage][1] || "");
202        $(number).html((((images.length > 1) && options.counterText) || "").replace(/{x}/, activeImage + 1).replace(/{y}/, images.length));
203
204        if (prevImage >= 0) preloadPrev.src = images[prevImage][0];
205        if (nextImage >= 0) preloadNext.src = images[nextImage][0];
206
207        centerWidth = image.offsetWidth;
208        centerHeight = image.offsetHeight;
209        var top = Math.max(0, middle - (centerHeight / 2));
210        if (center.offsetHeight != centerHeight) {
211            $(center).animate({height: centerHeight, top: top}, options.resizeDuration, options.resizeEasing);
212        }
213        if (center.offsetWidth != centerWidth) {
214            $(center).animate({width: centerWidth, marginLeft: -ce

214nterWidth/2}, options.resizeDuration, options.resizeEasing);
215        }
216        $(center).queue(function() {
217            $(bottomContainer).css({width: centerWidth, top: top + centerHeight, marginLeft: -centerWidth/2, visibility: "hidden", display: ""});
218            $(image).css({display: "none", visibility: "", opacity: ""}).fadeIn(options.imageFadeDuration, animateCaption);
219        });
220    }
221
222    function animateCaption() {
223        if (prevImage >= 0) $(prevLink).show();
224        if (nextImage >= 0) $(nextLink).show();
225        $(bottom).css("marginTop", -bottom.offsetHeight).animate({marginTop: 0}, options.captionAnimationDuration);
226        bottomContainer.style.visibility = "";
227    }
228
229    function stop() {
230        preload.onload = null;
231        preload.src = preloadPrev.src = preloadNext.src = activeURL;
232        $([center, image, bottom]).stop(true);
233        $([prevLink, nextLink, image, bottomContainer]).hide();
234    }
235
236    function close() {
237        // Taras add
238        $('#lbImage>div').show();
239        $('#lbImage>object').remove();
240        // End Taras add
241        if (activeImage >= 0) {
242            stop();
243            activeImage = prevImage = nextImage = -1;
244            $(center).hide();
245            $(overlay).stop().fadeOut(options.overlayFadeDuration, setup);
246        }
247
248        return false;
249    }
250
251})(jQuery);
252
253
254// AUTOLOAD CODE BLOCK (MAY BE CHANGED OR REMOVED)
255if (!/android|iphone|ipod|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent)) {
256	jQuery(function($) {
257        var widthMainDiv = parseInt($('#id_well').width());
258        $('#id_well img').each(function(){
259            if (!($(this).parent().is('a')) && (Math.abs(parseInt($(this).width()) - widthMainDiv) <= 2)) {
260                var title = $(this).attr('alt');
261                if (!title) {
262                    title = $('title').val();
263                }
264                $(this).wrap('<a title="' + title + '" rel="lightbox-a" href="' + $(this).attr('src') + '"></a>');
265            }
266        })
267
268        $("a[rel*='lightbox']").slimbox({/* Put custom options here */}, null, function(el) {
269			return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
270		});
271	});
272}