Update Lightbox 2 scripts to v2.11.1
This commit is contained in:
Matthias Mees
parent
e8058145b1
commit
e2ac9326de
|
|
@ -4,156 +4,27 @@ The original lightbox script. Eight years later — still going strong!
|
|||
|
||||
Lightbox is small javascript library used to overlay images on top of the current page. It's a snap to setup and works on all modern browsers.
|
||||
|
||||
For demos and usage instructions, visit [lokeshdhakar.com/projects/lightbox2/](http://lokeshdhakar.com/projects/lightbox2/).
|
||||
- **Demos and usage instructions.** Visit the [Lightbox homepage](http://lokeshdhakar.com/projects/lightbox2/) to see examples, info on getting started, script options, how to get help, and more.
|
||||
- **Releases and Changelog**. Viewable on the [Github Releases page](https://github.com/lokesh/lightbox2/releases)
|
||||
- **Roadmap.** View the [Roadmap](https://github.com/lokesh/lightbox2/blob/master/ROADMAP.md) for a peek at what is being planned for future releases.
|
||||
- **License.** Lightbox is licensed under the MIT License. [Learn more about the license.](http://lokeshdhakar.com/projects/lightbox2/#license)
|
||||
|
||||
by [Lokesh Dhakar](http://www.lokeshdhakar.com)
|
||||
|
||||
---
|
||||
|
||||
## Roadmap
|
||||
## Info for Maintainers
|
||||
|
||||
### Actively being worked on
|
||||
|
||||
- **Maintenance.** Geting open Issues and PRs number down. Not working on new features for v2.x.
|
||||
|
||||
### Features *NOT* on the roadmap
|
||||
|
||||
The goal of this script from it's beginnings till today is to to provide a better *image viewing experience*.
|
||||
|
||||
- **HTML or video content.** If you need to show html or video content, I recommend googling for an alternative script as there are many options.
|
||||
- **Social sharing buttons.**
|
||||
|
||||
### v3.0 - In Brainstorming Phase
|
||||
|
||||
**Interactions**
|
||||
- Add touch gesture support.
|
||||
- Exploring using tilt gesture on mobile devices with extra-wide images.
|
||||
- If user attempts to go forward when at end of image set, animation (shake?) indicating the end or option to close Lightbox.
|
||||
- Make sure right-click/long pressing works to access the image's context menu.
|
||||
|
||||
**Layout**
|
||||
- Allow vertical centering.
|
||||
- Update sizing on window resize.
|
||||
- Should the dev be able to choose the position of the caption, close button, and nav controls?
|
||||
- Optimize layout for mobile.
|
||||
- Optimize layout for screens of varying densities.
|
||||
- Should the close button still live in the bottom right corner?
|
||||
|
||||
**Animations**
|
||||
- Evaluate start, end, and transition animations.
|
||||
- Rewrite animations for performance and flexibility.
|
||||
|
||||
**Assets**
|
||||
- Use inline SVG for UI elements.
|
||||
|
||||
**Caching**
|
||||
- Review if and how images should be preloaded
|
||||
|
||||
**Accessibility**
|
||||
- Should opening lightbox update the url? and should this url be parsed on page load to show Lightbox automatically?
|
||||
- Review alt attributes.
|
||||
- Review ARIA roles.
|
||||
- Review constrast ratios.
|
||||
- Review keyboard input and tabbing.
|
||||
- Review click/touch target size.
|
||||
- Test with screen reader.
|
||||
|
||||
**API**
|
||||
- Do not initialize automatically and allow multiple instances.
|
||||
- Add event handlers.
|
||||
- Allow setting options on the fly.
|
||||
- Allow the setting of options from HTML?
|
||||
- Allow instantiation with jQuery plugin syntax.
|
||||
- Evaluate preloading and caching.
|
||||
- Evaluate droppping jQuery requirement.
|
||||
- Allow placement inside of a specified element? Orig feature requester was dealing with iframe.
|
||||
|
||||
## Changelog
|
||||
|
||||
### v2.9.0 - 2016-10-30
|
||||
|
||||
- [Fix] Allow loading of lightbox.js anywhere on page. Prev requirement was at the end of the body tag. [Commit](https://github.com/lokesh/lightbox2/commit/7047214f77cfc8f892e8513426b57d45bf29e9cd)
|
||||
- [Add] Add imageFadeDuration option. [Commit](https://github.com/lokesh/lightbox2/commit/6d5f99a65f189a5d2bd7bbfac4682fe36e62871e)
|
||||
- [Change] Right-clicking image now shows context menu for image. [Commit](https://github.com/lokesh/lightbox2/commit/363c3cb8af8fae1b6f95d6679df976022290f878)
|
||||
- [Change] Allow controlling of image border with a simpler css border vs a parent container padding _hack_. [Commit](https://github.com/lokesh/lightbox2/commit/214361297f1dd5f0c19c1d80ff37c398cdda55cb)
|
||||
|
||||
### v2.8.2 - 2015-12-13
|
||||
|
||||
- [Add] npm support. ```npm install --save lightbox2```
|
||||
- [Add] Add option to disable vertical scrolling [#487](https://github.com/lokesh/lightbox2/pull/487) Thanks [blacksunshineCoding](https://github.com/blacksunshineCoding)
|
||||
- [Fix] When horizontal scrolling is on page the overlay is not covering entire page [#485](https://github.com/lokesh/lightbox2/pull/485) Thanks [@manuel-io](https://github.com/manuel-io)
|
||||
- [Change] Add css minify task to Gruntfile.js and removedlegacy css vendor prefixes for border-radius. [#470](https://github.com/lokesh/lightbox2/pull/470) Thanks [ajerez](https://github.com/ajerez)
|
||||
- **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).
|
||||
|
||||
|
||||
### v2.8.1 - 2015-07-09
|
||||
### Local development
|
||||
|
||||
- [Fix] Change AMD jQuery require statement to use all lowercase. [#464](https://github.com/lokesh/lightbox2/pull/464) Thanks [@vtforester](https://github.com/vtforester)
|
||||
- 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.
|
||||
|
||||
### v2.8.0 - 2015-06-29
|
||||
|
||||
- [Add] UMD support (AMD, CommonJS, fallback to global export).[#461](https://github.com/lokesh/lightbox2/pull/461)
|
||||
- [Add] option method for setting options. [#461](https://github.com/lokesh/lightbox2/commit/d708fbd716aaa90e01ba4198944c8955e7283d87)
|
||||
- [Add] CONTRIBUTING.md
|
||||
|
||||
### v2.7.4 - 2015-06-23
|
||||
|
||||
- [Change] Revert jquery dep version to 2.x from 1.x. Added note to Lightbox page about using jQuery 1.x to get IE6, 7, and 8 support.
|
||||
- [Fix] Preserve author and license comments from lightbox.js in minified files.
|
||||
|
||||
### v2.7.3 - 2015-06-22
|
||||
|
||||
- [Add] Barebone HTML file with examples /examples/index.html.
|
||||
- [Add] jquery.lightbox.js which concatenates jQuery and Lightbox. This is for those who are Bower averse or want an extra easy install.
|
||||
|
||||
### v2.7.2 - 2015-06-16
|
||||
|
||||
- [Add] maxWidth and maxHeight options added [#197](https://github.com/lokesh/lightbox2/pull/197)
|
||||
- [Add] Enable target attribute in caption links [#299](https://github.com/lokesh/lightbox2/pull/299)
|
||||
- [Change] Switched to The MIT License from Creative Commons Attribution 4.0 International License.
|
||||
- [Change] Add CSS and images to bower.json main property.
|
||||
- [Change] Dropped version property from bower.json. [#453](https://github.com/lokesh/lightbox2/pull/453)
|
||||
- [Change] Use src -> dist folder structure for build.
|
||||
- [Fix] Remove empty src attribute from img tag [#287](https://github.com/lokesh/lightbox2/pull/287)
|
||||
- [Fix] Correct grammatical error in comment [#224](https://github.com/lokesh/lightbox2/pull/224)
|
||||
- [Fix] Clear the jquery animation queue before hiding the .lb-loader [#309](https://github.com/lokesh/lightbox2/pull/309)
|
||||
- [Remove] Remove releases's zips from repo.
|
||||
|
||||
### v2.7.1 - 2014-03-30
|
||||
|
||||
- [Fix] Enable links in captions
|
||||
|
||||
### v2.7.0 - 2014-03-29
|
||||
|
||||
- [Add] Support for data-title attribute for the caption. - Thanks [@copycut](https://github.com/copycut)
|
||||
- [Add] New option to enable always visible prev and next arrows
|
||||
- [Change] Rewrite Coffeescript code into plain ole Javascript
|
||||
- [Change] Updated jQuery to v1.10.2
|
||||
- [Fix] prev/next arrows not appearing in IE9 and IE 10 - Thanks [@rebizu](https://github.com/rebizu)
|
||||
- [Fix] Support wrap around option w/keyboard actions. Thanks [@vovayatsyuk](https://github.com/vovayatsyuk)
|
||||
|
||||
### v2.6.0 - 2013-07-06
|
||||
|
||||
- [Add] Added wraparound option
|
||||
- [Add] Added fitImagesInViewport option - now mobile friendly
|
||||
- [Add] Added showImageNumber label
|
||||
- [Add] Compatibility with html5shiv
|
||||
- [Add] Html5 valid using new data-lightbox attribute
|
||||
- [Add] Compatibility with hmtl5shiv and modernizr
|
||||
- [Add] Support jquery 1.9+
|
||||
- [Change] Move reference to loading and close images into css
|
||||
- [Change] Cache jquery objects
|
||||
|
||||
### v2.5.0 - 2012-04-11
|
||||
|
||||
- [Change] Switch to jQuery from Prototype and Scriptaculous
|
||||
- [Change] Switch from Javacript to Coffeescript
|
||||
- [Change] Switch from CSS to SASS
|
||||
- [Add] Repo created on Github
|
||||
|
||||
|
||||
## How to deploy
|
||||
|
||||
- Update version number in ```src/lightbox.js```
|
||||
- Update README.md Changelog with release date
|
||||
- grunt build
|
||||
- Push to Github repo
|
||||
- Create a new Github release along with tag. Naming convention for both ```v2.8.1```
|
||||
|
|
|
|||
|
|
@ -1,9 +1,3 @@
|
|||
/* Preload images */
|
||||
body:after {
|
||||
content: url(../images/close.png) url(../images/loading.gif) url(../images/prev.png) url(../images/next.png);
|
||||
display: none;
|
||||
}
|
||||
|
||||
body.lb-disable-scrolling {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
@ -27,6 +21,7 @@ body.lb-disable-scrolling {
|
|||
text-align: center;
|
||||
line-height: 0;
|
||||
font-weight: normal;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.lightbox .lb-image {
|
||||
|
|
@ -146,11 +141,7 @@ body.lb-disable-scrolling {
|
|||
padding-top: 5px;
|
||||
*zoom: 1;
|
||||
width: 100%;
|
||||
-moz-border-radius-bottomleft: 4px;
|
||||
-webkit-border-bottom-left-radius: 4px;
|
||||
border-bottom-left-radius: 4px;
|
||||
-moz-border-radius-bottomright: 4px;
|
||||
-webkit-border-bottom-right-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,13 +1,15 @@
|
|||
/*!
|
||||
* Lightbox v2.9.0
|
||||
* Lightbox v2.11.1
|
||||
* by Lokesh Dhakar
|
||||
*
|
||||
* More info:
|
||||
* http://lokeshdhakar.com/projects/lightbox2/
|
||||
*
|
||||
* Copyright 2007, 2015 Lokesh Dhakar
|
||||
* Copyright Lokesh Dhakar
|
||||
* Released under the MIT license
|
||||
* https://github.com/lokesh/lightbox2/blob/master/LICENSE
|
||||
*
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
// Uses Node, AMD or browser globals to create a module.
|
||||
|
|
@ -92,8 +94,24 @@
|
|||
// Build html for the lightbox and the overlay.
|
||||
// Attach event handlers to the new DOM elements. click click click
|
||||
Lightbox.prototype.build = function() {
|
||||
if ($('#lightbox').length > 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
var self = this;
|
||||
$('<div id="lightboxOverlay" class="lightboxOverlay"></div><div id="lightbox" class="lightbox"><div class="lb-outerContainer"><div class="lb-container"><img class="lb-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" /><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'));
|
||||
|
||||
// The two root notes generated, #lightboxOverlay and #lightbox are given
|
||||
// tabindex attrs so they are focusable. We attach our keyboard event
|
||||
// listeners to these two elements, and not the document. Clicking anywhere
|
||||
// while Lightbox is opened will keep the focus on or inside one of these
|
||||
// two elements.
|
||||
//
|
||||
// We do this so we can prevent propogation of the Esc keypress when
|
||||
// Lightbox is open. This prevents it from intefering with other components
|
||||
// on the page below.
|
||||
//
|
||||
// Github issue: https://github.com/lokesh/lightbox2/issues/663
|
||||
$('<div id="lightboxOverlay" tabindex="-1" class="lightboxOverlay"></div><div id="lightbox" tabindex="-1" class="lightbox"><div class="lb-outerContainer"><div class="lb-container"><img class="lb-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt=""/><div class="lb-nav"><a class="lb-prev" aria-label="Previous image" href="" ></a><a class="lb-next" aria-label="Next image" 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'));
|
||||
|
||||
// Cache jQuery objects
|
||||
this.$lightbox = $('#lightbox');
|
||||
|
|
@ -128,7 +146,6 @@
|
|||
if ($(event.target).attr('id') === 'lightbox') {
|
||||
self.end();
|
||||
}
|
||||
return false;
|
||||
});
|
||||
|
||||
this.$outerContainer.on('click', function(event) {
|
||||
|
|
@ -195,10 +212,6 @@
|
|||
|
||||
$window.on('resize', $.proxy(this.sizeOverlay, this));
|
||||
|
||||
$('select, object, embed').css({
|
||||
visibility: 'hidden'
|
||||
});
|
||||
|
||||
this.sizeOverlay();
|
||||
|
||||
this.album = [];
|
||||
|
|
@ -206,6 +219,7 @@
|
|||
|
||||
function addToAlbum($link) {
|
||||
self.album.push({
|
||||
alt: $link.attr('data-alt'),
|
||||
link: $link.attr('href'),
|
||||
title: $link.attr('data-title') || $link.attr('title')
|
||||
});
|
||||
|
|
@ -258,15 +272,17 @@
|
|||
// Hide most UI elements in preparation for the animated resizing of the lightbox.
|
||||
Lightbox.prototype.changeImage = function(imageNumber) {
|
||||
var self = this;
|
||||
|
||||
this.disableKeyboardNav();
|
||||
var filename = this.album[imageNumber].link;
|
||||
var filetype = filename.split('.').slice(-1)[0];
|
||||
var $image = this.$lightbox.find('.lb-image');
|
||||
|
||||
this.$overlay.fadeIn(this.options.fadeDuration);
|
||||
// Disable keyboard nav during transitions
|
||||
this.disableKeyboardNav();
|
||||
|
||||
// Show loading state
|
||||
this.$overlay.fadeIn(this.options.fadeDuration);
|
||||
$('.lb-loader').fadeIn('slow');
|
||||
this.$lightbox.find('.lb-image, .lb-nav, .lb-prev, .lb-next, .lb-dataContainer, .lb-numbers, .lb-caption').hide();
|
||||
|
||||
this.$outerContainer.addClass('animating');
|
||||
|
||||
// When image to show is preloaded, we send the width and height to sizeContainer()
|
||||
|
|
@ -280,60 +296,97 @@
|
|||
var windowHeight;
|
||||
var windowWidth;
|
||||
|
||||
$image.attr('src', self.album[imageNumber].link);
|
||||
$image.attr({
|
||||
'alt': self.album[imageNumber].alt,
|
||||
'src': filename
|
||||
});
|
||||
|
||||
$preloader = $(preloader);
|
||||
|
||||
$image.width(preloader.width);
|
||||
$image.height(preloader.height);
|
||||
windowWidth = $(window).width();
|
||||
windowHeight = $(window).height();
|
||||
|
||||
// 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 - self.options.positionFromTop - 70;
|
||||
|
||||
/*
|
||||
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
|
||||
*/
|
||||
|
||||
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) {
|
||||
// Fit image inside the viewport.
|
||||
// Take into account the border around the image and an additional 10px gutter on each side.
|
||||
|
||||
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;
|
||||
|
||||
// Check if image size is larger then maxWidth|maxHeight in settings
|
||||
if (self.options.maxWidth && self.options.maxWidth < maxImageWidth) {
|
||||
maxImageWidth = self.options.maxWidth;
|
||||
}
|
||||
if (self.options.maxHeight && self.options.maxHeight < maxImageWidth) {
|
||||
if (self.options.maxHeight && self.options.maxHeight < maxImageHeight) {
|
||||
maxImageHeight = self.options.maxHeight;
|
||||
}
|
||||
|
||||
// Is there a fitting issue?
|
||||
if ((preloader.width > maxImageWidth) || (preloader.height > maxImageHeight)) {
|
||||
if ((preloader.width / maxImageWidth) > (preloader.height / maxImageHeight)) {
|
||||
imageWidth = maxImageWidth;
|
||||
imageHeight = parseInt(preloader.height / (preloader.width / imageWidth), 10);
|
||||
$image.width(imageWidth);
|
||||
$image.height(imageHeight);
|
||||
} else {
|
||||
imageHeight = maxImageHeight;
|
||||
imageWidth = parseInt(preloader.width / (preloader.height / imageHeight), 10);
|
||||
$image.width(imageWidth);
|
||||
$image.height(imageHeight);
|
||||
}
|
||||
} else {
|
||||
maxImageWidth = self.options.maxWidth || preloader.width || maxImageWidth;
|
||||
maxImageHeight = self.options.maxHeight || preloader.height || maxImageHeight;
|
||||
}
|
||||
|
||||
// Is the current image's width or height is greater than the maxImageWidth or maxImageHeight
|
||||
// option than we need to size down while maintaining the aspect ratio.
|
||||
if ((preloader.width > maxImageWidth) || (preloader.height > maxImageHeight)) {
|
||||
if ((preloader.width / maxImageWidth) > (preloader.height / maxImageHeight)) {
|
||||
imageWidth = maxImageWidth;
|
||||
imageHeight = parseInt(preloader.height / (preloader.width / imageWidth), 10);
|
||||
$image.width(imageWidth);
|
||||
$image.height(imageHeight);
|
||||
} else {
|
||||
imageHeight = maxImageHeight;
|
||||
imageWidth = parseInt(preloader.width / (preloader.height / imageHeight), 10);
|
||||
$image.width(imageWidth);
|
||||
$image.height(imageHeight);
|
||||
}
|
||||
}
|
||||
self.sizeContainer($image.width(), $image.height());
|
||||
};
|
||||
|
||||
preloader.src = this.album[imageNumber].link;
|
||||
// Preload image before showing
|
||||
preloader.src = this.album[imageNumber].link;
|
||||
this.currentImageIndex = imageNumber;
|
||||
};
|
||||
|
||||
// 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
|
||||
// This method also shows the the image.
|
||||
Lightbox.prototype.sizeContainer = function(imageWidth, imageHeight) {
|
||||
var self = this;
|
||||
|
||||
|
|
@ -346,6 +399,10 @@
|
|||
self.$lightbox.find('.lb-dataContainer').width(newWidth);
|
||||
self.$lightbox.find('.lb-prevLink').height(newHeight);
|
||||
self.$lightbox.find('.lb-nextLink').height(newHeight);
|
||||
|
||||
// Set focus on one of the two root nodes so keyboard events are captured.
|
||||
self.$overlay.focus();
|
||||
|
||||
self.showImage();
|
||||
}
|
||||
|
||||
|
|
@ -422,14 +479,7 @@
|
|||
} else {
|
||||
$caption.html(this.album[this.currentImageIndex].title);
|
||||
}
|
||||
$caption.fadeIn('fast')
|
||||
.find('a').on('click', function(event) {
|
||||
if ($(this).attr('target') !== undefined) {
|
||||
window.open($(this).attr('href'), $(this).attr('target'));
|
||||
} else {
|
||||
location.href = $(this).attr('href');
|
||||
}
|
||||
});
|
||||
$caption.fadeIn('fast');
|
||||
}
|
||||
|
||||
if (this.album.length > 1 && this.options.showImageNumberLabel) {
|
||||
|
|
@ -459,11 +509,13 @@
|
|||
};
|
||||
|
||||
Lightbox.prototype.enableKeyboardNav = function() {
|
||||
$(document).on('keyup.keyboard', $.proxy(this.keyboardAction, this));
|
||||
this.$lightbox.on('keyup.keyboard', $.proxy(this.keyboardAction, this));
|
||||
this.$overlay.on('keyup.keyboard', $.proxy(this.keyboardAction, this));
|
||||
};
|
||||
|
||||
Lightbox.prototype.disableKeyboardNav = function() {
|
||||
$(document).off('.keyboard');
|
||||
this.$lightbox.off('.keyboard');
|
||||
this.$overlay.off('.keyboard');
|
||||
};
|
||||
|
||||
Lightbox.prototype.keyboardAction = function(event) {
|
||||
|
|
@ -472,16 +524,17 @@
|
|||
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) {
|
||||
// Prevent bubbling so as to not affect other components on the page.
|
||||
event.stopPropagation();
|
||||
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) {
|
||||
|
|
@ -496,9 +549,7 @@
|
|||
$(window).off('resize', this.sizeOverlay);
|
||||
this.$lightbox.fadeOut(this.options.fadeDuration);
|
||||
this.$overlay.fadeOut(this.options.fadeDuration);
|
||||
$('select, object, embed').css({
|
||||
visibility: 'visible'
|
||||
});
|
||||
|
||||
if (this.options.disableScrolling) {
|
||||
$('body').removeClass('lb-disable-scrolling');
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -25,7 +25,7 @@ class serendipity_event_lightbox extends serendipity_event
|
|||
$propbag->add('name', PLUGIN_EVENT_LIGHTBOX_NAME);
|
||||
$propbag->add('description', PLUGIN_EVENT_LIGHTBOX_DESC);
|
||||
$propbag->add('author', 'Thomas Nesges, Andy Hopkins, Lokesh Dhakar, Cody Lindley, Stephan Manske, Grischa Brockhaus, Ian');
|
||||
$propbag->add('version', '2.5.1');
|
||||
$propbag->add('version', '2.5.2');
|
||||
$propbag->add('requirements', array(
|
||||
'serendipity' => '1.6',
|
||||
'php' => '5.3.0'
|
||||
|
|
@ -393,4 +393,4 @@ class serendipity_event_lightbox extends serendipity_event
|
|||
|
||||
}
|
||||
|
||||
?>
|
||||
?>
|
||||
|
|
|
|||
Loading…
Reference in a new issue