diff --git a/src/featherlight.gallery.css b/src/featherlight.gallery.css index 535022c8..331a2de2 100644 --- a/src/featherlight.gallery.css +++ b/src/featherlight.gallery.css @@ -87,6 +87,11 @@ display:none; } +/* Hide disabled navigation */ +.featherlight-no-wrap-around.featherlight-last-slide .featherlight-next, +.featherlight-no-wrap-around.featherlight-first-slide .featherlight-previous { + display: none; +} /* Always display arrows on touch devices */ @media only screen and (max-device-width: 1024px){ diff --git a/src/featherlight.gallery.js b/src/featherlight.gallery.js index 2136253d..da32890a 100644 --- a/src/featherlight.gallery.js +++ b/src/featherlight.gallery.js @@ -90,9 +90,11 @@ .append(self.createNavigation('previous')) .append(self.createNavigation('next')); + self.$instance + .toggleClass(self.namespace+'-no-wrap-around', !self.allowWrapAround) return _super(event); }, - beforeContent: function(_super, event) { + afterContent: function(_super, event) { var index = this.currentNavigation(); var len = this.slides().length; this.$instance @@ -135,6 +137,7 @@ nextIcon: '▶', /* Code that is used as next icon */ galleryFadeIn: 100, /* fadeIn speed when image is loaded */ galleryFadeOut: 300, /* fadeOut speed before image is loaded */ + allowWrapAround: true, /* set to false to disable previous on first image and next on last image */ slides: function() { if (this.filter) { @@ -157,7 +160,20 @@ source = self.slides(), len = source.length, $inner = self.$instance.find('.' + self.namespace + '-inner'); - index = ((index % len) + len) % len; /* pin index to [0, len[ */ + // pin index to [0, len[ + if (self.allowWrapAround) { + index = ((index % len) + len) % len; + } else { + if (index < 0) { + index = 0; + } else if (index >= len) { + index = len - 1; + } + } + + if (index === self.currentNavigation()) { + return; + } this.$instance.addClass(this.namespace+'-loading'); self.$currentTarget = source.eq(index);