https://www.debuman.ch/data/standards/js/jquery.lightbox-0.5.js

1(function($) {
2    $.fn.lightBox = function(settings) {
3        settings = jQuery.extend({
4            overlayBgColor: '#000',
5            overlayOpacity: 0.8,
6            fixedNavigation: false,
7            imageLoading: '/data/standards/img/lightbox-ico-loading.gif',
8            imageBtnPrev: '/data/standards/img/lightbox-btn-prev.gif',
9            imageBtnNext: '/data/standards/img/lightbox-btn-next.gif',
10            imageBtnClose: '/data/standards/img/lightbox-btn-close.gif',
11            imageBlank: '/data/standards/img/lightbox-blank.gif',
12            containerBorderSize: 10,
13            containerResizeSpeed: 400,
14            txtImage: 'Image',
15            txtOf: '/',
16            keyToClose: 'c',
17            keyToPrev: 'p',
18            keyToNext: 'n',
19            imageArray: [],
20            activeImage: 0
21        }, settings);
22        var jQueryMatchedObj = this;
23
24        function _initialize() {
25            _start(this, jQueryMatchedObj);
26            return false;
27        }
28
29        function _start(objClicked, jQueryMatchedObj) {
30			console.log('Started jQuery Lightbox. ObjClicked = '+objClicked+', jQueryMatchedObj:');
31			console.log(jQueryMatchedObj);
32            $('embed, object, select').css({
33                'visibility': 'hidden'
34            });
35            _set_interface();
36            settings.imageArray.length = 0;
37            settings.activeImage = 0;
38            if (jQueryMatchedObj.length == 1) {
39                settings.imageArray.push(new Array(objClicked.getAttribute('href'), objClicked.getAttribute('title')));
40            } else {
41                for (var i = 0; i < jQueryMatchedObj.length; i++) {
42				console.log($(jQueryMatchedObj[i]).find('img'));
43                    settings.imageArray.push(new Array(jQueryMatchedObj[i].getAttribute('href'), $(jQueryMatchedObj[i]).find('img').attr('title'), $(jQueryMatchedObj[i]).find('img').attr('alt')));
44                }
45            }
46            while (settings.imageArray[settings.activeImage][0] != objClicked.getAttribute('href')) {
47                settings.activeImage++;
48            }
49            _set_image_to_view();
50        }
51
52        function _set_interface() {
53            $('body').append('<div id="jquery-overlay"></div><div id="jquery-lightbox"><div id="lightbox-container-image-box"><div id="lightbox-container-image"><img id="lightbox-image"><div style="" id="lightbox-nav"><a href="#" id="lightbox-nav-btnPrev"></a><a href="#" id="lightbox-nav-btnNext"></a></div><div id="lightbox-loading"><a href="#" id="lightbox-loading-link"><img src="' + settings.imageLoading + '"></a></div></div></div><div id="lightbox-container-image-data-box"><div id="lightbox-container-image-data"><div id="lightbox-image-details"><span id="lightbox-image-details-caption"></span><span id="lightbox-image-details-currentNumber"></span></div><div id="lightbox-secNav"><a href="#" id="lightbox-secNav-btnClose"><img src="' + settings.imageBtnClose + '"></a></div></div></div></div>');
54            var arrPageSizes = ___getPageSize();
55            var arrayImgsSizes = ___getImgsSize();
56            $('#jquery-overlay').css({
57                backgroundColor: settings.overlayBgColor,
58                opacity: settings.overlayOpacity,
59                width: arrPageSizes[0],
60                height: arrPageSizes[1]
61            }).fadeIn();
62            var arrPageScroll = ___getPageScroll();
63            $('#jquery-lightbox').css({
64                top: arrPageScroll[1] + (arrPageSizes[3] / 8) - 40,
65                left: arrPageScroll[0]
66            }).show();
67            $('#jquery-overlay,#jquery-lightbox').click(function() {
68                _finish();
69            });
70            $('#lightbox-loading-link,#lightbox-secNav-btnClose').click(function() {
71                _finish();
72                return false;
73            });
74            $(window).resize(function() {
75                var arrPageSizes = ___getPageSize();
76                $('#jquery-overlay').css({
77                    width: arrPageSizes[0],
78                    height: arrPageSizes[1]
79                });
80                var arrPageScroll = ___getPageScroll();
81                $('#jquery-lightbox').css({
82                    top: arrPageScroll[1] + (arrPageSizes[3] / 10),
83                    left: arrPageScroll[0]
84                });
85            });
86        }
87
88        function _set_image_to_view() {
89            $('#lightbox-loading').show();
90            if (settings.fixedNavigation) {
91                $('#lightbox-image,#lightbox-container-image-data-box,#lightbox-image-details-currentNumber').hide();
92            } else {
93                $('#lightbox-image,#lightbox-nav,#lightbox-nav-btnPrev,#lightbox-nav-btnNext,#lightbox-container-image-data-box,#lightbox-image-details-currentNumber').hide();
94            }
95            var objImagePreloader = new Image();
96            objImagePreloader.onload = function() {
97                $('#lightbox-image').attr('src', settings.imageArray[settings.activeImage][0]);
98                _resize_container_image_box(objImagePreloader.width, objImagePreloader.height);
99                objImagePreloader.onload = function() {};
100            };
101            objImagePreloader.src = settings.imageArray[settings.activeImage][0];
102        };
103
104        function _resize_container_image_box(intImageWidth, intImageHeight) {
105            var arrPageSizes = ___getPageSize();
106            var arrayImgsSizes = ___getImgsSize();
107            var pageRatio = arrPageSizes[0]/arrPageSizes[3];
108            var imgRatio = intImageWidth/intImageHeight;
109            var intCurrentWidth = $('#lightbox-container-image-box').width();
110            var intCurrentHeight = $('#lightbox-container-image-box').height();
111            var dataBoxWidth;
112            var intWidth;
113            var intHeight;
114            if (pageRatio < imgRatio) {
115                if (intImageWidth < (arrPageSizes[0] - settings.containerBorderSize * 2 - 60)){
116                    console.log ('width smaller than pagewidth');
117                    intWidth = (intImageWidth + (settings.containerBorderSize * 2));
118                    dataBoxWidth = intImageWidth;
119                } else {
120                    console.log ('width bigger than pagewidth');
121                    intWidth = (arrPageSizes[0] - settings.containerBorderSize * 2 - 120);
122                    dataBoxWidth = (arrPageSizes[0] - settings.containerBorderSize * 2 - 140);
123                }
124                intHeight = intWidth/imgRatio;
125            } else {
126                
127                if (intImageHeight < (arrPageSizes[3] - settings.containerBorderSize * 2 - 180)){
128                    console.log ('height smaller than pageheight');
129                    intHeight = (intImageHeight + (settings.containerBorderSize * 2));
130                } else {
131                    console.log ('height bigger than pageheight');
132                    intHeight = (arrPageSizes[3] - settings.containerBorderSize * 2 - 160);
133                }
134                intWidth = intHeight*imgRatio;
135                dataBoxWidth = (intWidth - settings.containerBorderSize * 2);
136            }
137            var intDiffW = intCurrentWidth - intWidth;
138            var intDiffH = intCurrentHeight - intHeight;
139            $('#lightbox-container-image-box').animate({
140                width: intWidth,
141                height: intHeight
142            }, settings.containerResizeSpeed, function() {
143                _show_image();
144            });
145            if ((intDiffW == 0) && (intDiffH == 0)) {
146                if ($.browser.msie) {
147                    ___pause(250);
148                } else {
149                    ___pause(100);
150                }
151            }
152            $('#lightbox-container-image-data-box').css({
153                width: dataBoxWidth
154            });
155            $('#lightbox-nav-btnPrev,#lightbox-nav-btnNext').css({
156                height: intHeight
157            });
158        };
159
160        function _show_image() {
161            $('#lightbox-loading').hide();
162            $('#lightbox-image').fadeIn(function() {
163                _show_image_data();
164                _set_navigation();
165            });
166            _preload_neighbor_images();
167        };
168
169        function _show_image_data() { 
170			console.log(settings.imageArray);
171            $('#lightbox-container-image-data-box').slideDown('fast');
172            $('#lightbox-image-details-caption').hide();
173            if (settings.imageArray[settings.activeImage][1]) {
174                $('#lightbox-image-details-caption').html('<strong>'+settings.imageArray[settings.activeImage][1]+'</strong><br />

174'+( settings.imageArray[settings.activeImage][2] != settings.imageArray[settings.activeImage][1] ? settings.imageArray[settings.activeImage][2] : '' ) ).show();
175            }
176            if (settings.imageArray.length > 1) {
177                $('#lightbox-image-details-currentNumber').html(settings.txtImage + ' ' + (settings.activeImage + 1) + ' ' + settings.txtOf + ' ' + settings.imageArray.length).show();
178            }
179        }
180
181        function _set_navigation() {
182            $('#lightbox-nav').show();
183            $('#lightbox-nav-btnPrev,#lightbox-nav-btnNext').css({
184                'background': 'transparent url(' + settings.imageBlank + ') no-repeat'
185            });
186            if (settings.activeImage != 0) {
187                if (settings.fixedNavigation) {
188                    $('#lightbox-nav-btnPrev').css({
189                        'background': 'url(' + settings.imageBtnPrev + ') left 15% no-repeat'
190                    }).unbind().bind('click', function() {
191                        settings.activeImage = settings.activeImage - 1;
192                        _set_image_to_view();
193                        return false;
194                    });
195                } else {
196                    $('#lightbox-nav-btnPrev').unbind().hover(function() {
197                        $(this).css({
198                            'background': 'url(' + settings.imageBtnPrev + ') left 15% no-repeat'
199                        });
200                    }, function() {
201                        $(this).css({
202                            'background': 'transparent url(' + settings.imageBlank + ') no-repeat'
203                        });
204                    }).show().bind('click', function() {
205                        settings.activeImage = settings.activeImage - 1;
206                        _set_image_to_view();
207                        return false;
208                    });
209                }
210            }
211            if (settings.activeImage != (settings.imageArray.length - 1)) {
212                if (settings.fixedNavigation) {
213                    $('#lightbox-nav-btnNext').css({
214                        'background': 'url(' + settings.imageBtnNext + ') right 15% no-repeat'
215                    }).unbind().bind('click', function() {
216                        settings.activeImage = settings.activeImage + 1;
217                        _set_image_to_view();
218                        return false;
219                    });
220                } else {
221                    $('#lightbox-nav-btnNext').unbind().hover(function() {
222                        $(this).css({
223                            'background': 'url(' + settings.imageBtnNext + ') right 15% no-repeat'
224                        });
225                    }, function() {
226                        $(this).css({
227                            'background': 'transparent url(' + settings.imageBlank + ') no-repeat'
228                        });
229                    }).show().bind('click', function() {
230                        settings.activeImage = settings.activeImage + 1;
231                        _set_image_to_view();
232                        return false;
233                    });
234                }
235            }
236            _enable_keyboard_navigation();
237        }
238
239        function _enable_keyboard_navigation() {
240            $(document).keydown(function(objEvent) {
241                _keyboard_action(objEvent);
242            });
243        }
244
245        function _disable_keyboard_navigation() {
246            $(document).unbind();
247        }
248
249        function _keyboard_action(objEvent) {
250            if (objEvent == null) {
251                keycode = event.keyCode;
252                escapeKey = 27;
253            } else {
254                keycode = objEvent.keyCode;
255                escapeKey = objEvent.DOM_VK_ESCAPE;
256            }
257            key = String.fromCharCode(keycode).toLowerCase();
258            if ((key == settings.keyToClose) || (key == 'x') || (keycode == escapeKey)) {
259                _finish();
260            }
261            if ((key == settings.keyToPrev) || (keycode == 37)) {
262                if (settings.activeImage != 0) {
263                    settings.activeImage = settings.activeImage - 1;
264                    _set_image_to_view();
265                    _disable_keyboard_navigation();
266                }
267            }
268            if ((key == settings.keyToNext) || (keycode == 39)) {
269                if (settings.activeImage != (settings.imageArray.length - 1)) {
270                    settings.activeImage = settings.activeImage + 1;
271                    _set_image_to_view();
272                    _disable_keyboard_navigation();
273                }
274            }
275        }
276
277        function _preload_neighbor_images() {
278            if ((settings.imageArray.length - 1) > settings.activeImage) {
279                objNext = new Image();
280                objNext.src = settings.imageArray[settings.activeImage + 1][0];
281            }
282            if (settings.activeImage > 0) {
283                objPrev = new Image();
284                objPrev.src = settings.imageArray[settings.activeImage - 1][0];
285            }
286        }
287
288        function _finish() {
289            $('#jquery-lightbox').remove();
290            $('#jquery-overlay').fadeOut(function() {
291                $('#jquery-overlay').remove();
292            });
293            $('embed, object, select').css({
294                'visibility': 'visible'
295            });
296        }
297
298        
299        function ___getImgsSize() {
300            var arrayImgsWidths = [];
301            var arrayImgsHeights = [];
302            $('#kamGallery ul li').each( function() {
303                var imgInList = $( this ).find('a').attr("href");
304                var tmpImg = new Image(); 
305                tmpImg.src = imgInList; 
306                $(tmpImg).one('load',function(){ 
307                    orgWidth = tmpImg.width; 

308                    orgHeight = tmpImg.height;
309                    arrayImgsWidths.push(orgWidth);
310                    arrayImgsHeights.push(orgHeight);
311                    arrayImgsWidths.sort(function(a, b){return b-a});
312                    arrayImgsHeights.sort(function(a, b){return b-a});
313                });
314            })
315            var arrayImgsSize = [arrayImgsWidths,arrayImgsHeights];
316            return arrayImgsSize;
317        };
318
319
320        function ___getPageSize() {
321            var xScroll, yScroll;
322            if (window.innerHeight && window.scrollMaxY) {
323                xScroll = window.innerWidth + window.scrollMaxX;
324                yScroll = window.innerHeight + window.scrollMaxY;
325            } else if (document.body.scrollHeight > document.body.offsetHeight) {
326                xScroll = document.body.scrollWidth;
327                yScroll = document.body.scrollHeight;
328            } else {
329                xScroll = document.body.offsetWidth;
330                yScroll = document.body.offsetHeight;
331            }
332            var windowWidth, windowHeight;
333            if (self.innerHeight) {
334                if (document.documentElement.clientWidth) {
335                    windowWidth = document.documentElement.clientWidth;
336                } else {
337                    windowWidth = self.innerWidth;
338                }
339                windowHeight = self.innerHeight;
340            } else if (document.documentElement && document.documentElement.clientHeight) {
341                windowWidth = document.documentElement.clientWidth;
342                windowHeight = document.documentElement.clientHeight;
343            } else if (document.body) {
344                windowWidth = document.body.clientWidth;
345                windowHeight = document.body.clientHeight;
346            }
347            if (yScroll < windowHeight) {
348                pageHeight = windowHeight;
349            } else {
350                pageHeight = yScroll;
351            }
352            if (xScroll < windowWidth) {
353                pageWidth = xScroll;
354            } else {
355                pageWidth = windowWidth;
356            }
357            arrayPageSize = new Array(pageWidth, pageHeight, windowWidth, windowHeight);
358            return arrayPageSize;
359        };
360
361        function ___getPageScroll() {
362            var xScroll, yScroll;
363            if (self.pageYOffset) {
364                yScroll = self.pageYOffset;
365                xScroll = self.pageXOffset;
366            } else if (document.documentElement && document.documentElement.scrollTop) {
367                yScroll = document.documentElement.scrollTop;
368                xScroll = document.documentElement.scrollLeft;
369            } else if (document.body) {
370                yScroll = document.body.scrollTop;
371                xScroll = document.body.scrollLeft;
372            }
373            arrayPageScroll = new Array(xScroll, yScroll);
374            return arrayPageScroll;
375        };
376
377        function ___pause(ms) {
378            var date = new Date();
379            curDate = null;
380            do {
381                var curDate = new Date();
382            }
383            while (curDate - date < ms);
384        };
385        return this.unbind('click').click(_initialize);
386    };
387})(jQuery);