lightbox.css と lightbox.js のデフォルトのソースコード（Lightbox v2.7.1）
■lightbox.css（全部）
1 /* Preload images */
2 body:after {
3 content: url(../img/close.png) url(../img/loading.gif) url(../img/prev.png) url(../img/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(../img/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(../img/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(../img/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(../img/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.7.1
3 * by Lokesh Dhakar - http://lokeshdhakar.com/projects/lightbox2/
4 *
5 * @license http://creativecommons.org/licenses/by/2.5/
6 * - Free for use in both personal and commercial projects
7 * - Attribution requires leaving author name, author link, and the license info intact
8 */
9
10 (function() {
11 // Use local alias
12 var $ = jQuery;
13
14 var LightboxOptions = (function() {
15 function LightboxOptions() {
16 this.fadeDuration = 500;
17 this.fitImagesInViewport = true;
18 this.resizeDuration = 700;
19 this.positionFromTop = 50;
20 this.showImageNumberLabel = true;
21 this.alwaysShowNavOnTouchDevices = false;
22 this.wrapAround = false;
23 }
24
25 // Change to localize to non-english language
26 LightboxOptions.prototype.albumLabel = function(curImageNum, albumSize) {
27 return "Image " + curImageNum + " of " + albumSize;
28 };
29
30 return LightboxOptions;
31 })();
32
33
34 var Lightbox = (function() {
35 function Lightbox(options) {
36 this.options = options;
37 this.album = [];
38 this.currentImageIndex = void 0;
39 this.init();
40 }
41
42 Lightbox.prototype.init = function() {
43 this.enable();
44 this.build();
45 };
46
47 // Loop through anchors and areamaps looking for either data-lightbox attributes or rel attributes
48 // that contain 'lightbox'. When these are clicked, start lightbox.
49 Lightbox.prototype.enable = function() {
50 var self = this;
51 $('body').on('click', 'a[rel^=lightbox], area[rel^=lightbox], a[data-lightbox], area[data-lightbox]', function(event) {
52 self.start($(event.currentTarget));
53 return false;
54 });
55 };
56
57 // Build html for the lightbox and the overlay.
58 // Attach event handlers to the new DOM elements. click click click
59 Lightbox.prototype.build = function() {
60 var self = this;
61 $("<div id='lightboxOverlay' class='lightboxOverlay'></div><div id='lightbox' class='lightbox'><div class='lb-outerContainer'><div class='lb-container'><img class='lb-image' src='' /><div class='lb-nav'><a class='lb-prev' href='' ></a><a class='lb-next' href='' ></a></div><div class='lb-loader'><a class='lb-cancel'></a></div></div></div><div class='lb-dataContainer'><div class='lb-data'><div class='lb-details'><span class='lb-caption'></span><span class='lb-number'></span></div><div class='lb-closeContainer'><a class='lb-close'></a></div></div></div></div>").appendTo($('body'));
62
63 // Cache jQuery objects
64 this.$lightbox = $('#lightbox');
65 this.$overlay = $('#lightboxOverlay');
66 this.$outerContainer = this.$lightbox.find('.lb-outerContainer');
67 this.$container = this.$lightbox.find('.lb-container');
68
69 // Store css values for future lookup
70 this.containerTopPadding = parseInt(this.$container.css('padding-top'), 10);
71 this.containerRightPadding = parseInt(this.$container.css('padding-right'), 10);
72 this.containerBottomPadding = parseInt(this.$container.css('padding-bottom'), 10);
73 this.containerLeftPadding = parseInt(this.$container.css('padding-left'), 10);
74
75 // Attach event handlers to the newly minted DOM elements
76 this.$overlay.hide().on('click', function() {
77 self.end();
78 return false;
79 });
80
81 this.$lightbox.hide().on('click', function(event) {
82 if ($(event.target).attr('id') === 'lightbox') {
83 self.end();
84 }
85 return false;
86 });
87
88 this.$outerContainer.on('click', function(event) {
89 if ($(event.target).attr('id') === 'lightbox') {
90 self.end();
91 }
92 return false;
93 });
94
95 this.$lightbox.find('.lb-prev').on('click', function() {
96 if (self.currentImageIndex === 0) {
97 self.changeImage(self.album.length - 1);
98 } else {
99 self.changeImage(self.currentImageIndex - 1);
100 }
101 return false;
102 });
103
104 this.$lightbox.find('.lb-next').on('click', function() {
105 if (self.currentImageIndex === self.album.length - 1) {
106 self.changeImage(0);
107 } else {
108 self.changeImage(self.currentImageIndex + 1);
109 }
110 return false;
111 });
112
113 this.$lightbox.find('.lb-loader, .lb-close').on('click', function() {
114 self.end();
115 return false;
116 });
117 };
118
119 // Show overlay and lightbox. If the image is part of a set, add siblings to album array.
120 Lightbox.prototype.start = function($link) {
121 var self = this;
122 var $window = $(window);
123
124 $window.on('resize', $.proxy(this.sizeOverlay, this));
125
126 $('select, object, embed').css({
127 visibility: "hidden"
128 });
129
130 this.sizeOverlay();
131
132 this.album = [];
133 var imageNumber = 0;
134
135 function addToAlbum($link) {
136 self.album.push({
137 link: $link.attr('href'),
138 title: $link.attr('data-title') || $link.attr('title')
139 });
140 }
141
142 // Support both data-lightbox attribute and rel attribute implementations
143 var dataLightboxValue = $link.attr('data-lightbox');
144 var $links;
145
146 if (dataLightboxValue) {
147 $links = $($link.prop("tagName") + '[data-lightbox="' + dataLightboxValue + '"]');
148 for (var i = 0; i < $links.length; i = ++i) {
149 addToAlbum($($links[i]));
150 if ($links[i] === $link[0]) {
151 imageNumber = i;
152 }
153 }
154 } else {
155 if ($link.attr('rel') === 'lightbox') {
156 // If image is not part of a set
157 addToAlbum($link);
158 } else {
159 // If image is part of a set
160 $links = $($link.prop("tagName") + '[rel="' + $link.attr('rel') + '"]');
161 for (var j = 0; j < $links.length; j = ++j) {
162 addToAlbum($($links[j]));
163 if ($links[j] === $link[0]) {
164 imageNumber = j;
165 }
166 }
167 }
168 }
169
170 // Position Lightbox
171 var top = $window.scrollTop() + this.options.positionFromTop;
172 var left = $window.scrollLeft();
173 this.$lightbox.css({
174 top: top + 'px',
175 left: left + 'px'
176 }).fadeIn(this.options.fadeDuration);
177
178 this.changeImage(imageNumber);
179 };
180
181 // Hide most UI elements in preparation for the animated resizing of the lightbox.
182 Lightbox.prototype.changeImage = function(imageNumber) {
183 var self = this;
184
185 this.disableKeyboardNav();
186 var $image = this.$lightbox.find('.lb-image');
187
188 this.$overlay.fadeIn(this.options.fadeDuration);
189
190 $('.lb-loader').fadeIn('slow');
191 this.$lightbox.find('.lb-image, .lb-nav, .lb-prev, .lb-next, .lb-dataContainer, .lb-numbers, .lb-caption').hide();
192
193 this.$outerContainer.addClass('animating');
194
195 // When image to show is preloaded, we send the width and height to sizeContainer()
196 var preloader = new Image();
197 preloader.onload = function() {
198 var $preloader, imageHeight, imageWidth, maxImageHeight, maxImageWidth, windowHeight, windowWidth;
199 $image.attr('src', self.album[imageNumber].link);
200
201 $preloader = $(preloader);
202
203 $image.width(preloader.width);
204 $image.height(preloader.height);
205
206 if (self.options.fitImagesInViewport) {
207 // Fit image inside the viewport.
208 // Take into account the border around the image and an additional 10px gutter on each side.
209
210 windowWidth = $(window).width();
211 windowHeight = $(window).height();
212 maxImageWidth = windowWidth - self.containerLeftPadding - self.containerRightPadding - 20;
213 maxImageHeight = windowHeight - self.containerTopPadding - self.containerBottomPadding - 120;
214
215 // Is there a fitting issue?
216 if ((preloader.width > maxImageWidth) || (preloader.height > maxImageHeight)) {
217 if ((preloader.width / maxImageWidth) > (preloader.height / maxImageHeight)) {
218 imageWidth = maxImageWidth;
219 imageHeight = parseInt(preloader.height / (preloader.width / imageWidth), 10);
220 $image.width(imageWidth);
221 $image.height(imageHeight);
222 } else {
223 imageHeight = maxImageHeight;
224 imageWidth = parseInt(preloader.width / (preloader.height / imageHeight), 10);
225 $image.width(imageWidth);
226 $image.height(imageHeight);
227 }
228 }
229 }
230 self.sizeContainer($image.width(), $image.height());
231 };
232
233 preloader.src = this.album[imageNumber].link;
234 this.currentImageIndex = imageNumber;
235 };
236
237 // Stretch overlay to fit the viewport
238 Lightbox.prototype.sizeOverlay = function() {
239 this.$overlay
240 .width($(window).width())
241 .height($(document).height());
242 };
243
244 // Animate the size of the lightbox to fit the image we are showing
245 Lightbox.prototype.sizeContainer = function(imageWidth, imageHeight) {
246 var self = this;
247
248 var oldWidth = this.$outerContainer.outerWidth();
249 var oldHeight = this.$outerContainer.outerHeight();
250 var newWidth = imageWidth + this.containerLeftPadding + this.containerRightPadding;
251 var newHeight = imageHeight + this.containerTopPadding + this.containerBottomPadding;
252
253 function postResize() {
254 self.$lightbox.find('.lb-dataContainer').width(newWidth);
255 self.$lightbox.find('.lb-prevLink').height(newHeight);
256 self.$lightbox.find('.lb-nextLink').height(newHeight);
257 self.showImage();
258 }
259
260 if (oldWidth !== newWidth || oldHeight !== newHeight) {
261 this.$outerContainer.animate({
262 width: newWidth,
263 height: newHeight
264 }, this.options.resizeDuration, 'swing', function() {
265 postResize();
266 });
267 } else {
268 postResize();
269 }
270 };
271
272 // Display the image and it's details and begin preload neighboring images.
273 Lightbox.prototype.showImage = function() {
274 this.$lightbox.find('.lb-loader').hide();
275 this.$lightbox.find('.lb-image').fadeIn('slow');
276
277 this.updateNav();
278 this.updateDetails();
279 this.preloadNeighboringImages();
280 this.enableKeyboardNav();
281 };
282
283 // Display previous and next navigation if appropriate.
284 Lightbox.prototype.updateNav = function() {
285 // Check to see if the browser supports touch events. If so, we take the conservative approach
286 // and assume that mouse hover events are not supported and always show prev/next navigation
287 // arrows in image sets.
288 var alwaysShowNav = false;
289 try {
290 document.createEvent("TouchEvent");
291 alwaysShowNav = (this.options.alwaysShowNavOnTouchDevices)? true: false;
292 } catch (e) {}
293
294 this.$lightbox.find('.lb-nav').show();
295
296 if (this.album.length > 1) {
297 if (this.options.wrapAround) {
298 if (alwaysShowNav) {
299 this.$lightbox.find('.lb-prev, .lb-next').css('opacity', '1');
300 }
301 this.$lightbox.find('.lb-prev, .lb-next').show();
302 } else {
303 if (this.currentImageIndex > 0) {
304 this.$lightbox.find('.lb-prev').show();
305 if (alwaysShowNav) {
306 this.$lightbox.find('.lb-prev').css('opacity', '1');
307 }
308 }
309 if (this.currentImageIndex < this.album.length - 1) {
310 this.$lightbox.find('.lb-next').show();
311 if (alwaysShowNav) {
312 this.$lightbox.find('.lb-next').css('opacity', '1');
313 }
314 }
315 }
316 }
317 };
318
319 // Display caption, image number, and closing button.
320 Lightbox.prototype.updateDetails = function() {
321 var self = this;
322
323 // Enable anchor clicks in the injected caption html.
324 // Thanks Nate Wright for the fix. @https://github.com/NateWr
325 if (typeof this.album[this.currentImageIndex].title !== 'undefined' && this.album[this.currentImageIndex].title !== "") {
326 this.$lightbox.find('.lb-caption')
327 .html(this.album[this.currentImageIndex].title)
328 .fadeIn('fast')
329 .find('a').on('click', function(event){
330 location.href = $(this).attr('href');
331 });
332 }
333
334 if (this.album.length > 1 && this.options.showImageNumberLabel) {
335 this.$lightbox.find('.lb-number').text(this.options.albumLabel(this.currentImageIndex + 1, this.album.length)).fadeIn('fast');
336 } else {
337 this.$lightbox.find('.lb-number').hide();
338 }
339
340 this.$outerContainer.removeClass('animating');
341
342 this.$lightbox.find('.lb-dataContainer').fadeIn(this.options.resizeDuration, function() {
343 return self.sizeOverlay();
344 });
345 };
346
347 // Preload previous and next images in set.
348 Lightbox.prototype.preloadNeighboringImages = function() {
349 if (this.album.length > this.currentImageIndex + 1) {
350 var preloadNext = new Image();
351 preloadNext.src = this.album[this.currentImageIndex + 1].link;
352 }
353 if (this.currentImageIndex > 0) {
354 var preloadPrev = new Image();
355 preloadPrev.src = this.album[this.currentImageIndex - 1].link;
356 }
357 };
358
359 Lightbox.prototype.enableKeyboardNav = function() {
360 $(document).on('keyup.keyboard', $.proxy(this.keyboardAction, this));
361 };
362
363 Lightbox.prototype.disableKeyboardNav = function() {
364 $(document).off('.keyboard');
365 };
366
367 Lightbox.prototype.keyboardAction = function(event) {
368 var KEYCODE_ESC = 27;
369 var KEYCODE_LEFTARROW = 37;
370 var KEYCODE_RIGHTARROW = 39;
371
372 var keycode = event.keyCode;
373 var key = String.fromCharCode(keycode).toLowerCase();
374 if (keycode === KEYCODE_ESC || key.match(/x|o|c/)) {
375 this.end();
376 } else if (key === 'p' || keycode === KEYCODE_LEFTARROW) {
377 if (this.currentImageIndex !== 0) {
378 this.changeImage(this.currentImageIndex - 1);
379 } else if (this.options.wrapAround && this.album.length > 1) {
380 this.changeImage(this.album.length - 1);
381 }
382 } else if (key === 'n' || keycode === KEYCODE_RIGHTARROW) {
383 if (this.currentImageIndex !== this.album.length - 1) {
384 this.changeImage(this.currentImageIndex + 1);
385 } else if (this.options.wrapAround && this.album.length > 1) {
386 this.changeImage(0);
387 }
388 }
389 };
390
391 // Closing time. :-(
392 Lightbox.prototype.end = function() {
393 this.disableKeyboardNav();
394 $(window).off("resize", this.sizeOverlay);
395 this.$lightbox.fadeOut(this.options.fadeDuration);
396 this.$overlay.fadeOut(this.options.fadeDuration);
397 $('select, object, embed').css({
398 visibility: "visible"
399 });
400 };
401
402 return Lightbox;
403
404 })();
405
406 $(function() {
407 var options = new LightboxOptions();
408 var lightbox = new Lightbox(options);
409 });
410
411 }).call(this);