lightbox.css と lightbox.js のデフォルトのソースコード（Lightbox v2.8.1 2015-07-09）
■lightbox.css（全部）
1 /* Preload images */
2 body:after {
3 content: url(../images/close.png) url(../images/loading.gif) url(../images/prev.png) url(../images/next.png);
4 display: none;
5 }
6
7 .lightboxOverlay {
8 position: absolute;
9 top: 0;
10 left: 0;
11 z-index: 9999;
12 background-color: black;
13 filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
14 opacity: 0.8;
15 display: none;
16 }
17
18 .lightbox {
19 position: absolute;
20 left: 0;
21 width: 100%;
22 z-index: 10000;
23 text-align: center;
24 line-height: 0;
25 font-weight: normal;
26 }
27
28 .lightbox .lb-image {
29 display: block;
30 height: auto;
31 max-width: inherit;
32 -webkit-border-radius: 3px;
33 -moz-border-radius: 3px;
34 -ms-border-radius: 3px;
35 -o-border-radius: 3px;
36 border-radius: 3px;
37 }
38
39 .lightbox a img {
40 border: none;
41 }
42
43 .lb-outerContainer {
44 position: relative;
45 background-color: white;
46 *zoom: 1;
47 width: 250px;
48 height: 250px;
49 margin: 0 auto;
50 -webkit-border-radius: 4px;
51 -moz-border-radius: 4px;
52 -ms-border-radius: 4px;
53 -o-border-radius: 4px;
54 border-radius: 4px;
55 }
56
57 .lb-outerContainer:after {
58 content: "";
59 display: table;
60 clear: both;
61 }
62
63 .lb-container {
64 padding: 4px;
65 }
66
67 .lb-loader {
68 position: absolute;
69 top: 43%;
70 left: 0;
71 height: 25%;
72 width: 100%;
73 text-align: center;
74 line-height: 0;
75 }
76
77 .lb-cancel {
78 display: block;
79 width: 32px;
80 height: 32px;
81 margin: 0 auto;
82 background: url(../images/loading.gif) no-repeat;
83 }
84
85 .lb-nav {
86 position: absolute;
87 top: 0;
88 left: 0;
89 height: 100%;
90 width: 100%;
91 z-index: 10;
92 }
93
94 .lb-container > .nav {
95 left: 0;
96 }
97
98 .lb-nav a {
99 outline: none;
100 background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
101 }
102
103 .lb-prev, .lb-next {
104 height: 100%;
105 cursor: pointer;
106 display: block;
107 }
108
109 .lb-nav a.lb-prev {
110 width: 34%;
111 left: 0;
112 float: left;
113 background: url(../images/prev.png) left 48% no-repeat;
114 filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
115 opacity: 0;
116 -webkit-transition: opacity 0.6s;
117 -moz-transition: opacity 0.6s;
118 -o-transition: opacity 0.6s;
119 transition: opacity 0.6s;
120 }
121
122 .lb-nav a.lb-prev:hover {
123 filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
124 opacity: 1;
125 }
126
127 .lb-nav a.lb-next {
128 width: 64%;
129 right: 0;
130 float: right;
131 background: url(../images/next.png) right 48% no-repeat;
132 filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
133 opacity: 0;
134 -webkit-transition: opacity 0.6s;
135 -moz-transition: opacity 0.6s;
136 -o-transition: opacity 0.6s;
137 transition: opacity 0.6s;
138 }
139
140 .lb-nav a.lb-next:hover {
141 filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
142 opacity: 1;
143 }
144
145 .lb-dataContainer {
146 margin: 0 auto;
147 padding-top: 5px;
148 *zoom: 1;
149 width: 100%;
150 -moz-border-radius-bottomleft: 4px;
151 -webkit-border-bottom-left-radius: 4px;
152 border-bottom-left-radius: 4px;
153 -moz-border-radius-bottomright: 4px;
154 -webkit-border-bottom-right-radius: 4px;
155 border-bottom-right-radius: 4px;
156 }
157
158 .lb-dataContainer:after {
159 content: "";
160 display: table;
161 clear: both;
162 }
163
164 .lb-data {
165 padding: 0 4px;
166 color: #ccc;
167 }
168
169 .lb-data .lb-details {
170 width: 85%;
171 float: left;
172 text-align: left;
173 line-height: 1.1em;
174 }
175
176 .lb-data .lb-caption {
177 font-size: 13px;
178 font-weight: bold;
179 line-height: 1em;
180 }
181
182 .lb-data .lb-number {
183 display: block;
184 clear: left;
185 padding-bottom: 1em;
186 font-size: 12px;
187 color: #999999;
188 }
189
190 .lb-data .lb-close {
191 display: block;
192 float: right;
193 width: 30px;
194 height: 30px;
195 background: url(../images/close.png) top right no-repeat;
196 text-align: right;
197 outline: none;
198 filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
199 opacity: 0.7;
200 -webkit-transition: opacity 0.2s;
201 -moz-transition: opacity 0.2s;
202 -o-transition: opacity 0.2s;
203 transition: opacity 0.2s;
204 }
205
206 .lb-data .lb-close:hover {
207 cursor: pointer;
208 filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
209 opacity: 1;
210 }
■lightbox.js（全部）
1 /*!
2 * Lightbox v2.8.1
3 * by Lokesh Dhakar
4 *
5 * More info:
6 * http://lokeshdhakar.com/projects/lightbox2/
7 *
8 * Copyright 2007, 2015 Lokesh Dhakar
9 * Released under the MIT license
10 * https://github.com/lokesh/lightbox2/blob/master/LICENSE
11 */
12
13 // Uses Node, AMD or browser globals to create a module.
14 (function (root, factory) {
15 if (typeof define === 'function' && define.amd) {
16 // AMD. Register as an anonymous module.
17 define(['jquery'], factory);
18 } else if (typeof exports === 'object') {
19 // Node. Does not work with strict CommonJS, but
20 // only CommonJS-like environments that support module.exports,
21 // like Node.
22 module.exports = factory(require('jquery'));
23 } else {
24 // Browser globals (root is window)
25 root.lightbox = factory(root.jQuery);
26 }
27 }(this, function ($) {
28
29 function Lightbox(options) {
30 this.album = [];
31 this.currentImageIndex = void 0;
32 this.init();
33
34 // options
35 this.options = $.extend({}, this.constructor.defaults);
36 this.option(options);
37 }
38
39 // Descriptions of all options available on the demo site:
40 // http://lokeshdhakar.com/projects/lightbox2/index.html#options
41 Lightbox.defaults = {
42 albumLabel: 'Image %1 of %2',
43 alwaysShowNavOnTouchDevices: false,
44 fadeDuration: 500,
45 fitImagesInViewport: true,
46 // maxWidth: 800,
47 // maxHeight: 600,
48 positionFromTop: 50,
49 resizeDuration: 700,
50 showImageNumberLabel: true,
51 wrapAround: false
52 };
53
54 Lightbox.prototype.option = function(options) {
55 $.extend(this.options, options);
56 };
57
58 Lightbox.prototype.imageCountLabel = function(currentImageNum, totalImages) {
59 return this.options.albumLabel.replace(/%1/g, currentImageNum).replace(/%2/g, totalImages);
60 };
61
62 Lightbox.prototype.init = function() {
63 this.enable();
64 this.build();
65 };
66
67 // Loop through anchors and areamaps looking for either data-lightbox attributes or rel attributes
68 // that contain 'lightbox'. When these are clicked, start lightbox.
69 Lightbox.prototype.enable = function() {
70 var self = this;
71 $('body').on('click', 'a[rel^=lightbox], area[rel^=lightbox], a[data-lightbox], area[data-lightbox]', function(event) {
72 self.start($(event.currentTarget));
73 return false;
74 });
75 };
76
77 // Build html for the lightbox and the overlay.
78 // Attach event handlers to the new DOM elements. click click click
79 Lightbox.prototype.build = function() {
80 var self = this;
81 $('').appendTo($('body'));
82
83 // Cache jQuery objects
84 this.$lightbox = $('#lightbox');
85 this.$overlay = $('#lightboxOverlay');
86 this.$outerContainer = this.$lightbox.find('.lb-outerContainer');
87 this.$container = this.$lightbox.find('.lb-container');
88
89 // Store css values for future lookup
90 this.containerTopPadding = parseInt(this.$container.css('padding-top'), 10);
91 this.containerRightPadding = parseInt(this.$container.css('padding-right'), 10);
92 this.containerBottomPadding = parseInt(this.$container.css('padding-bottom'), 10);
93 this.containerLeftPadding = parseInt(this.$container.css('padding-left'), 10);
94
95 // Attach event handlers to the newly minted DOM elements
96 this.$overlay.hide().on('click', function() {
97 self.end();
98 return false;
99 });
100
101 this.$lightbox.hide().on('click', function(event) {
102 if ($(event.target).attr('id') === 'lightbox') {
103 self.end();
104 }
105 return false;
106 });
107
108 this.$outerContainer.on('click', function(event) {
109 if ($(event.target).attr('id') === 'lightbox') {
110 self.end();
111 }
112 return false;
113 });
114
115 this.$lightbox.find('.lb-prev').on('click', function() {
116 if (self.currentImageIndex === 0) {
117 self.changeImage(self.album.length - 1);
118 } else {
119 self.changeImage(self.currentImageIndex - 1);
120 }
121 return false;
122 });
123
124 this.$lightbox.find('.lb-next').on('click', function() {
125 if (self.currentImageIndex === self.album.length - 1) {
126 self.changeImage(0);
127 } else {
128 self.changeImage(self.currentImageIndex + 1);
129 }
130 return false;
131 });
132
133 this.$lightbox.find('.lb-loader, .lb-close').on('click', function() {
134 self.end();
135 return false;
136 });
137 };
138
139 // Show overlay and lightbox. If the image is part of a set, add siblings to album array.
140 Lightbox.prototype.start = function($link) {
141 var self = this;
142 var $window = $(window);
143
144 $window.on('resize', $.proxy(this.sizeOverlay, this));
145
146 $('select, object, embed').css({
147 visibility: 'hidden'
148 });
149
150 this.sizeOverlay();
151
152 this.album = [];
153 var imageNumber = 0;
154
155 function addToAlbum($link) {
156 self.album.push({
157 link: $link.attr('href'),
158 title: $link.attr('data-title') || $link.attr('title')
159 });
160 }
161
162 // Support both data-lightbox attribute and rel attribute implementations
163 var dataLightboxValue = $link.attr('data-lightbox');
164 var $links;
165
166 if (dataLightboxValue) {
167 $links = $($link.prop('tagName') + '[data-lightbox="' + dataLightboxValue + '"]');
168 for (var i = 0; i < $links.length; i = ++i) {
169 addToAlbum($($links[i]));
170 if ($links[i] === $link[0]) {
171 imageNumber = i;
172 }
173 }
174 } else {
175 if ($link.attr('rel') === 'lightbox') {
176 // If image is not part of a set
177 addToAlbum($link);
178 } else {
179 // If image is part of a set
180 $links = $($link.prop('tagName') + '[rel="' + $link.attr('rel') + '"]');
181 for (var j = 0; j < $links.length; j = ++j) {
182 addToAlbum($($links[j]));
183 if ($links[j] === $link[0]) {
184 imageNumber = j;
185 }
186 }
187 }
188 }
189
190 // Position Lightbox
191 var top = $window.scrollTop() + this.options.positionFromTop;
192 var left = $window.scrollLeft();
193 this.$lightbox.css({
194 top: top + 'px',
195 left: left + 'px'
196 }).fadeIn(this.options.fadeDuration);
197
198 this.changeImage(imageNumber);
199 };
200
201 // Hide most UI elements in preparation for the animated resizing of the lightbox.
202 Lightbox.prototype.changeImage = function(imageNumber) {
203 var self = this;
204
205 this.disableKeyboardNav();
206 var $image = this.$lightbox.find('.lb-image');
207
208 this.$overlay.fadeIn(this.options.fadeDuration);
209
210 $('.lb-loader').fadeIn('slow');
211 this.$lightbox.find('.lb-image, .lb-nav, .lb-prev, .lb-next, .lb-dataContainer, .lb-numbers, .lb-caption').hide();
212
213 this.$outerContainer.addClass('animating');
214
215 // When image to show is preloaded, we send the width and height to sizeContainer()
216 var preloader = new Image();
217 preloader.onload = function() {
218 var $preloader;
219 var imageHeight;
220 var imageWidth;
221 var maxImageHeight;
222 var maxImageWidth;
223 var windowHeight;
224 var windowWidth;
225
226 $image.attr('src', self.album[imageNumber].link);
227
228 $preloader = $(preloader);
229
230 $image.width(preloader.width);
231 $image.height(preloader.height);
232
233 if (self.options.fitImagesInViewport) {
234 // Fit image inside the viewport.
235 // Take into account the border around the image and an additional 10px gutter on each side.
236
237 windowWidth = $(window).width();
238 windowHeight = $(window).height();
239 maxImageWidth = windowWidth - self.containerLeftPadding - self.containerRightPadding - 20;
240 maxImageHeight = windowHeight - self.containerTopPadding - self.containerBottomPadding - 120;
241
242 // Check if image size is larger then maxWidth|maxHeight in settings
243 if (self.options.maxWidth && self.options.maxWidth < maxImageWidth) {
244 maxImageWidth = self.options.maxWidth;
245 }
246 if (self.options.maxHeight && self.options.maxHeight < maxImageWidth) {
247 maxImageHeight = self.options.maxHeight;
248 }
249
250 // Is there a fitting issue?
251 if ((preloader.width > maxImageWidth) || (preloader.height > maxImageHeight)) {
252 if ((preloader.width / maxImageWidth) > (preloader.height / maxImageHeight)) {
253 imageWidth = maxImageWidth;
254 imageHeight = parseInt(preloader.height / (preloader.width / imageWidth), 10);
255 $image.width(imageWidth);
256 $image.height(imageHeight);
257 } else {
258 imageHeight = maxImageHeight;
259 imageWidth = parseInt(preloader.width / (preloader.height / imageHeight), 10);
260 $image.width(imageWidth);
261 $image.height(imageHeight);
262 }
263 }
264 }
265 self.sizeContainer($image.width(), $image.height());
266 };
267
268 preloader.src = this.album[imageNumber].link;
269 this.currentImageIndex = imageNumber;
270 };
271
272 // Stretch overlay to fit the viewport
273 Lightbox.prototype.sizeOverlay = function() {
274 this.$overlay
275 .width($(window).width())
276 .height($(document).height());
277 };
278
279 // Animate the size of the lightbox to fit the image we are showing
280 Lightbox.prototype.sizeContainer = function(imageWidth, imageHeight) {
281 var self = this;
282
283 var oldWidth = this.$outerContainer.outerWidth();
284 var oldHeight = this.$outerContainer.outerHeight();
285 var newWidth = imageWidth + this.containerLeftPadding + this.containerRightPadding;
286 var newHeight = imageHeight + this.containerTopPadding + this.containerBottomPadding;
287
288 function postResize() {
289 self.$lightbox.find('.lb-dataContainer').width(newWidth);
290 self.$lightbox.find('.lb-prevLink').height(newHeight);
291 self.$lightbox.find('.lb-nextLink').height(newHeight);
292 self.showImage();
293 }
294
295 if (oldWidth !== newWidth || oldHeight !== newHeight) {
296 this.$outerContainer.animate({
297 width: newWidth,
298 height: newHeight
299 }, this.options.resizeDuration, 'swing', function() {
300 postResize();
301 });
302 } else {
303 postResize();
304 }
305 };
306
307 // Display the image and its details and begin preload neighboring images.
308 Lightbox.prototype.showImage = function() {
309 this.$lightbox.find('.lb-loader').stop(true).hide();
310 this.$lightbox.find('.lb-image').fadeIn('slow');
311
312 this.updateNav();
313 this.updateDetails();
314 this.preloadNeighboringImages();
315 this.enableKeyboardNav();
316 };
317
318 // Display previous and next navigation if appropriate.
319 Lightbox.prototype.updateNav = function() {
320 // Check to see if the browser supports touch events. If so, we take the conservative approach
321 // and assume that mouse hover events are not supported and always show prev/next navigation
322 // arrows in image sets.
323 var alwaysShowNav = false;
324 try {
325 document.createEvent('TouchEvent');
326 alwaysShowNav = (this.options.alwaysShowNavOnTouchDevices) ? true : false;
327 } catch (e) {}
328
329 this.$lightbox.find('.lb-nav').show();
330
331 if (this.album.length > 1) {
332 if (this.options.wrapAround) {
333 if (alwaysShowNav) {
334 this.$lightbox.find('.lb-prev, .lb-next').css('opacity', '1');
335 }
336 this.$lightbox.find('.lb-prev, .lb-next').show();
337 } else {
338 if (this.currentImageIndex > 0) {
339 this.$lightbox.find('.lb-prev').show();
340 if (alwaysShowNav) {
341 this.$lightbox.find('.lb-prev').css('opacity', '1');
342 }
343 }
344 if (this.currentImageIndex < this.album.length - 1) {
345 this.$lightbox.find('.lb-next').show();
346 if (alwaysShowNav) {
347 this.$lightbox.find('.lb-next').css('opacity', '1');
348 }
349 }
350 }
351 }
352 };
353
354 // Display caption, image number, and closing button.
355 Lightbox.prototype.updateDetails = function() {
356 var self = this;
357
358 // Enable anchor clicks in the injected caption html.
359 // Thanks Nate Wright for the fix. @https://github.com/NateWr
360 if (typeof this.album[this.currentImageIndex].title !== 'undefined' &&
361 this.album[this.currentImageIndex].title !== '') {
362 this.$lightbox.find('.lb-caption')
363 .html(this.album[this.currentImageIndex].title)
364 .fadeIn('fast')
365 .find('a').on('click', function(event) {
366 if ($(this).attr('target') !== undefined) {
367 window.open($(this).attr('href'), $(this).attr('target'));
368 } else {
369 location.href = $(this).attr('href');
370 }
371 });
372 }
373
374 if (this.album.length > 1 && this.options.showImageNumberLabel) {
375 var labelText = this.imageCountLabel(this.currentImageIndex + 1, this.album.length);
376 this.$lightbox.find('.lb-number').text(labelText).fadeIn('fast');
377 } else {
378 this.$lightbox.find('.lb-number').hide();
379 }
380
381 this.$outerContainer.removeClass('animating');
382
383 this.$lightbox.find('.lb-dataContainer').fadeIn(this.options.resizeDuration, function() {
384 return self.sizeOverlay();
385 });
386 };
387
388 // Preload previous and next images in set.
389 Lightbox.prototype.preloadNeighboringImages = function() {
390 if (this.album.length > this.currentImageIndex + 1) {
391 var preloadNext = new Image();
392 preloadNext.src = this.album[this.currentImageIndex + 1].link;
393 }
394 if (this.currentImageIndex > 0) {
395 var preloadPrev = new Image();
396 preloadPrev.src = this.album[this.currentImageIndex - 1].link;
397 }
398 };
399
400 Lightbox.prototype.enableKeyboardNav = function() {
401 $(document).on('keyup.keyboard', $.proxy(this.keyboardAction, this));
402 };
403
404 Lightbox.prototype.disableKeyboardNav = function() {
405 $(document).off('.keyboard');
406 };
407
408 Lightbox.prototype.keyboardAction = function(event) {
409 var KEYCODE_ESC = 27;
410 var KEYCODE_LEFTARROW = 37;
411 var KEYCODE_RIGHTARROW = 39;
412
413 var keycode = event.keyCode;
414 var key = String.fromCharCode(keycode).toLowerCase();
415 if (keycode === KEYCODE_ESC || key.match(/x|o|c/)) {
416 this.end();
417 } else if (key === 'p' || keycode === KEYCODE_LEFTARROW) {
418 if (this.currentImageIndex !== 0) {
419 this.changeImage(this.currentImageIndex - 1);
420 } else if (this.options.wrapAround && this.album.length > 1) {
421 this.changeImage(this.album.length - 1);
422 }
423 } else if (key === 'n' || keycode === KEYCODE_RIGHTARROW) {
424 if (this.currentImageIndex !== this.album.length - 1) {
425 this.changeImage(this.currentImageIndex + 1);
426 } else if (this.options.wrapAround && this.album.length > 1) {
427 this.changeImage(0);
428 }
429 }
430 };
431
432 // Closing time. :-(
433 Lightbox.prototype.end = function() {
434 this.disableKeyboardNav();
435 $(window).off('resize', this.sizeOverlay);
436 this.$lightbox.fadeOut(this.options.fadeDuration);
437 this.$overlay.fadeOut(this.options.fadeDuration);
438 $('select, object, embed').css({
439 visibility: 'visible'
440 });
441 };
442
443 return new Lightbox();
444 }));
