diff --git a/README.md b/README.md index 11ded5a3..7c2ce51c 100644 --- a/README.md +++ b/README.md @@ -13,7 +13,18 @@ by [Lokesh Dhakar](http://www.lokeshdhakar.com) --- -### Info for Maintainers +## Info for Maintainers -- **Release instructions.** See [DEPLOY.md](https://github.com/lokesh/lightbox2/blob/master/DEPLOY.md). - **Issues and PRs requiring review.** See items tagged with [\[status\] needs review](https://github.com/lokesh/lightbox2/labels/%5Bstatus%5D%20needs%20review) +- **Questions on Stackoverflow.** See Questions tagged with [lightbox2](https://stackoverflow.com/questions/tagged/lightbox2). +- **Release instructions.** See [DEPLOY.md](https://github.com/lokesh/lightbox2/blob/master/DEPLOY.md). + + +### Local development + +- Install [Bower](https://bower.io/) and [Grunt](https://gruntjs.com/). +- Install jQuery dependency with Bower: `bower install` +- Start local server: `grunt` +- Navigate to `localhost:8000/examples` +- Update `examples/index.html` to load `src/js/lightbox.js` and jQuery. + diff --git a/src/css/lightbox.css b/src/css/lightbox.css index a95d45a4..99a025f0 100644 --- a/src/css/lightbox.css +++ b/src/css/lightbox.css @@ -1,9 +1,5 @@ -html.lb-disable-scrolling { +body.lb-disable-scrolling { overflow: hidden; - /* Position fixed required for iOS. Just putting overflow: hidden; on the body is not enough. */ - position: fixed; - height: 100vh; - width: 100vw; } .lightboxOverlay { diff --git a/src/js/lightbox.js b/src/js/lightbox.js index 5b8785aa..7fdbf18f 100644 --- a/src/js/lightbox.js +++ b/src/js/lightbox.js @@ -1,11 +1,11 @@ /*! - * Lightbox v2.10.0 + * Lightbox v2.11.0 * by Lokesh Dhakar * * More info: * http://lokeshdhakar.com/projects/lightbox2/ * - * Copyright 2007, 2018 Lokesh Dhakar + * Copyright Lokesh Dhakar * Released under the MIT license * https://github.com/lokesh/lightbox2/blob/master/LICENSE * @@ -256,7 +256,7 @@ // Disable scrolling of the page while open if (this.options.disableScrolling) { - $('html').addClass('lb-disable-scrolling'); + $('body').addClass('lb-disable-scrolling'); } this.changeImage(imageNumber); @@ -265,6 +265,8 @@ // Hide most UI elements in preparation for the animated resizing of the lightbox. Lightbox.prototype.changeImage = function(imageNumber) { var self = this; + var filename = this.album[imageNumber].link; + var filetype = filename.split('.').slice(-1)[0]; this.disableKeyboardNav(); var $image = this.$lightbox.find('.lb-image'); @@ -289,22 +291,37 @@ $image.attr({ 'alt': self.album[imageNumber].alt, - 'src': self.album[imageNumber].link + 'src': filename }); $preloader = $(preloader); $image.width(preloader.width); $image.height(preloader.height); + windowWidth = $(window).width(); + windowHeight = $(window).height(); - if (self.options.fitImagesInViewport) { - // Fit image inside the viewport. - // Take into account the border around the image and an additional 10px gutter on each side. + // Calculate the max image dimensions for the current viewport. + // Take into account the border around the image and an additional 10px gutter on each side. + maxImageWidth = windowWidth - self.containerPadding.left - self.containerPadding.right - self.imageBorderWidth.left - self.imageBorderWidth.right - 20; + maxImageHeight = windowHeight - self.containerPadding.top - self.containerPadding.bottom - self.imageBorderWidth.top - self.imageBorderWidth.bottom - 120; + + /* SVGs that don't have width and height attributes specified are reporting width and height + values of 0 in Firefox 47 and IE11 on Windows. To fix, we set the width and height to the max + dimensions for the viewport rather than 0 x 0. + + - https://github.com/lokesh/lightbox2/issues/552 + */ - windowWidth = $(window).width(); - windowHeight = $(window).height(); - maxImageWidth = windowWidth - self.containerPadding.left - self.containerPadding.right - self.imageBorderWidth.left - self.imageBorderWidth.right - 20; - maxImageHeight = windowHeight - self.containerPadding.top - self.containerPadding.bottom - self.imageBorderWidth.top - self.imageBorderWidth.bottom - 120; + if (filetype === 'svg') { + if ((preloader.width === 0) || preloader.height === 0) { + $image.width(maxImageWidth); + $image.height(maxImageHeight); + } + } + + // Fit image inside the viewport. + if (self.options.fitImagesInViewport) { // Check if image size is larger then maxWidth|maxHeight in settings if (self.options.maxWidth && self.options.maxWidth < maxImageWidth) { @@ -339,9 +356,20 @@ // Stretch overlay to fit the viewport Lightbox.prototype.sizeOverlay = function() { - this.$overlay - .width($(document).width()) - .height($(document).height()); + var self = this; + /* + We use a setTimeout 0 to pause JS execution and let the rendering catch-up. + Why do this? If the `disableScrolling` option is set to true, a class is added to the body + tag that disables scrolling and hides the scrollbar. We want to make sure the scrollbar is + hidden before we measure the document width, as the presence of the scrollbar will affect the + number. + */ + setTimeout(function() { + self.$overlay + .width($(document).width()) + .height($(document).height()); + + }, 0); }; // Animate the size of the lightbox to fit the image we are showing @@ -483,16 +511,15 @@ var KEYCODE_RIGHTARROW = 39; var keycode = event.keyCode; - var key = String.fromCharCode(keycode).toLowerCase(); - if (keycode === KEYCODE_ESC || key.match(/x|o|c/)) { + if (keycode === KEYCODE_ESC) { this.end(); - } else if (key === 'p' || keycode === KEYCODE_LEFTARROW) { + } else if (keycode === KEYCODE_LEFTARROW) { if (this.currentImageIndex !== 0) { this.changeImage(this.currentImageIndex - 1); } else if (this.options.wrapAround && this.album.length > 1) { this.changeImage(this.album.length - 1); } - } else if (key === 'n' || keycode === KEYCODE_RIGHTARROW) { + } else if (keycode === KEYCODE_RIGHTARROW) { if (this.currentImageIndex !== this.album.length - 1) { this.changeImage(this.currentImageIndex + 1); } else if (this.options.wrapAround && this.album.length > 1) { @@ -511,7 +538,7 @@ visibility: 'visible' }); if (this.options.disableScrolling) { - $('html').removeClass('lb-disable-scrolling'); + $('body').removeClass('lb-disable-scrolling'); } };