Browse Source

Add option 'alwaysShowNavOnTouchDevices'

master
Lokesh Dhakar 6 years ago
parent
commit
b85c2c5b0a
2 changed files with 31 additions and 12 deletions
  1. +6
    -6
      css/lightbox.css
  2. +25
    -6
      js/lightbox.js

+ 6
- 6
css/lightbox.css View File

@@ -106,10 +106,11 @@ body:after {
display: block;
}

.lb-prev {
.lb-nav a.lb-prev {
width: 34%;
left: 0;
float: left;
background: url(../img/prev.png) left 48% no-repeat;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-webkit-transition: opacity 0.6s;
@@ -118,16 +119,16 @@ body:after {
transition: opacity 0.6s;
}

.lb-prev:hover {
.lb-nav a.lb-prev:hover {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
background: url(../img/prev.png) left 48% no-repeat;
}

.lb-next {
.lb-nav a.lb-next {
width: 64%;
right: 0;
float: right;
background: url(../img/next.png) right 48% no-repeat;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-webkit-transition: opacity 0.6s;
@@ -136,10 +137,9 @@ body:after {
transition: opacity 0.6s;
}

.lb-next:hover {
.lb-nav a.lb-next:hover {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
background: url(../img/next.png) right 48% no-repeat;
}

.lb-dataContainer {


+ 25
- 6
js/lightbox.js View File

@@ -13,12 +13,13 @@

var LightboxOptions = (function() {
function LightboxOptions() {
this.fadeDuration = 500;
this.fitImagesInViewport = true;
this.resizeDuration = 700;
this.positionFromTop = 50;
this.showImageNumberLabel = true;
this.wrapAround = false;
this.fadeDuration = 500;
this.fitImagesInViewport = true;
this.resizeDuration = 700;
this.positionFromTop = 50;
this.showImageNumberLabel = true;
this.alwaysShowNavOnTouchDevices = false;
this.wrapAround = false;
}
// Change to localize to non-english language
@@ -281,17 +282,35 @@

// Display previous and next navigation if appropriate.
Lightbox.prototype.updateNav = function() {
// Check to see if the browser supports touch events. If so, we take the conservative approach
// and assume that mouse hover events are not supported and always show prev/next navigation
// arrows in image sets.
var alwaysShowNav = false;
try {
document.createEvent("TouchEvent");
alwaysShowNav = (this.options.alwaysShowNavOnTouchDevices)? true: false;
} catch (e) {}

this.$lightbox.find('.lb-nav').show();

if (this.album.length > 1) {
if (this.options.wrapAround) {
if (alwaysShowNav) {
this.$lightbox.find('.lb-prev, .lb-next').css('opacity', '1');
}
this.$lightbox.find('.lb-prev, .lb-next').show();
} else {
if (this.currentImageIndex > 0) {
this.$lightbox.find('.lb-prev').show();
if (alwaysShowNav) {
this.$lightbox.find('.lb-prev').css('opacity', '1');
}
}
if (this.currentImageIndex < this.album.length - 1) {
this.$lightbox.find('.lb-next').show();
if (alwaysShowNav) {
this.$lightbox.find('.lb-next').css('opacity', '1');
}
}
}
}


Loading…
Cancel
Save