https://takshilaeducation.org/js/jquery.lightbox.js

1/*!
2 * jquery.lightbox.js
3 * https://github.com/duncanmcdougall/Responsive-Lightbox
4 * Copyright 2013 Duncan McDougall and other contributors; @license Creative Commons Attribution 2.5
5 *
6 * Options: 
7 * margin - int - default 50. Minimum margin around the image
8 * nav - bool - default true. enable navigation
9 * blur - bool - default true. Blur other content when open using css filter
10 * minSize - int - default 0. Min window width or height to open lightbox. Below threshold will open image in a new tab.
11 *
12 */
13(function ($) {
14
15    'use strict';
16
17    $.fn.lightbox = function (options) {
18
19        var opts = {
20            margin: 50,
21            nav: true,
22            blur: true,
23            minSize: 0
24        };
25
26        var plugin = {
27
28            items: [],
29            lightbox: null,
30            image: null,
31            current: null,
32            locked: false,
33            caption: null,
34			
35            init: function (items) {
36                plugin.items = items;
37				plugin.selector = "lightbox-"+Math.random().toString().replace('.','');
38
39                if (!plugin.lightbox) {
40                    $('body').append(
41                      '<div id="lightbox" style="display:none;">'+
42                      '<a href="#" class="lightbox-close lightbox-button"></a>' +
43                      '<div class="lightbox-nav">'+
44                      '<a href="#" class="lightbox-previous lightbox-button"></a>' +
45                      '<a href="#" class="lightbox-next lightbox-button"></a>' +
46                      '</div>' +
47                      '<div href="#" class="lightbox-caption"><p></p></div>' +
48                      '</div>'
49                    );
50
51                    plugin.lightbox = $("#lightbox");
52                    plugin.caption = $('.lightbox-caption', plugin.lightbox);
53                }
54
55                if (plugin.items.length > 1 && opts.nav) {
56                    $('.lightbox-nav', plugin.lightbox).show();
57                } else {
58                    $('.lightbox-nav', plugin.lightbox).hide();
59                }
60
61                plugin.bindEvents();
62
63            },
64
65            loadImage: function () {
66                if(opts.blur) {
67                    $("body").addClass("blurred");
68                }
69                $("img", plugin.lightbox).remove();
70                plugin.lightbox.fadeIn('fast').append('<span class="lightbox-loading"></span>');
71
72                var img = $('<img src="' + $(plugin.current).attr('href') + '" draggable="false">');
73
74                $(img).load(function () {
75                    $('.lightbox-loading').remove();
76                    plugin.lightbox.append(img);
77                    plugin.image = $("img", plugin.lightbox).hide();
78                    plugin.resizeImage();
79                    plugin.setCaption();
80                });
81            },
82
83            setCaption: function () {
84                var caption = $(plugin.current).data('caption');
85                if(!!caption && caption.length > 0) {
86                    plugin.caption.fadeIn();
87                    $('p', plugin.caption).text(caption);
88                }else{
89                    plugin.caption.hide();
90                }
91            },
92
93            resizeImage: function () {
94                var ratio, wHeight, wWidth, iHeight, iWidth;
95                wHeight = $(window).height() - opts.margin;
96                wWidth = $(window).outerWidth(true) - opts.margin;
97                plugin.image.width('').height('');
98                iHeight = plugin.image.height();
99                iWidth = plugin.image.width();
100                if (iWidth > wWidth) {
101                    ratio = wWidth / iWidth;
102                    iWidth = wWidth;
103                    iHeight = Math.round(iHeight * ratio);
104                }
105                if (iHeight > wHeight) {
106                    ratio = wHeight / iHeight;
107                    iHeight = wHeight;
108                    iWidth = Math.round(iWidth * ratio);
109                }
110
111                plugin.image.width(iWidth).height(iHeight).css({
112						'top': ($(window).height() - plugin.image.outerHeight()) / 2 + 'px',
113						'left': ($(window).width() - plugin.image.outerWidth()) / 2 + 'px'
114					}).show();
115                plugin.locked = false;

116            },
117
118            getCurrentIndex: function () {
119                return $.inArray(plugin.current, plugin.items);
120            },
121
122            next: function () {
123                if (plugin.locked) {
124                    return false;
125                }
126                plugin.locked = true;
127                if (plugin.getCurrentIndex() >= plugin.items.length - 1) {
128                    $(plugin.items[0]).click();
129                } else {
130                    $(plugin.items[plugin.getCurrentIndex() + 1]).click();
131                }
132            },
133
134            previous: function () {
135                if (plugin.locked) {
136                    return false;
137                }
138                plugin.locked = true;
139                if (plugin.getCurrentIndex() <= 0) {
140                    $(plugin.items[plugin.items.length - 1]).click();
141                } else {
142                    $(plugin.items[plugin.getCurrentIndex() - 1]).click();
143                }
144            },
145
146            bindEvents: function () {
147                $(plugin.items).click(function (e) {
148                    if(!$("#lightbox").is(":visible") && ($(window).width() < opts.minSize || $(window).height() < opts.minSize)) {
149                        $(this).attr("target", "_blank");
150                        return;
151                    }
152                    var self = $(this)[0];
153                    e.preventDefault();
154                    plugin.current = self;
155                    plugin.loadImage();
156
157                    // Bind Keyboard Shortcuts
158                    $(document).on('keydown', function (e) {
159                        // Close lightbox with ESC
160                        if (e.keyCode === 27) {
161                            plugin.close();
162                        }
163                        // Go to next image pressing the right key
164                        if (e.keyCode === 39) {
165                            plugin.next();
166                        }
167                        // Go to previous image pressing the left key
168                        if (e.keyCode === 37) {
169                            plugin.previous();
170                        }
171                    });
172                });
173
174                // Add click state on overlay background only
175                plugin.lightbox.on('click', function (e) {
176                    if (this === e.target) {
177                        plugin.close();
178                    }
179                });
180
181                // Previous click
182                $(plugin.lightbox).on('click', '.lightbox-previous', function () {
183                    plugin.previous();
184                    return false;
185                });
186
187                // Next click
188                $(plugin.lightbox).on('click', '.lightbox-next', function () {
189                    plugin.next();
190                    return false;
191                });
192
193                // Close click
194                $(plugin.lightbox).on('click', '.lightbox-close', function () {
195                    plugin.close();
196                    return false;
197                });
198
199                $(window).resize(function () {
200                    if (!plugin.image) {
201                        return;
202                    }
203                    plugin.resizeImage();
204                });
205            },
206
207            close: function () {
208                $(document).off('keydown'); // Unbind all key events each time the lightbox is closed
209                $(plugin.lightbox).fadeOut('fast');
210                $('body').removeClass('blurred');
211            }
212        };
213
214        $.extend(opts, options);
215
216        plugin.init(this);
217    };
218
219})(jQuery);