From 2b4516132c694631dbc852756edc23558b86b3ab Mon Sep 17 00:00:00 2001 From: Johannes Matschke Date: Sat, 30 Sep 2023 17:21:32 +0200 Subject: [PATCH 1/3] Add option to disable the previous button for the first image and the next button for the last image. Unlike the css solution, this option also disables keyboard navigation. --- src/featherlight.gallery.js | 20 ++++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/src/featherlight.gallery.js b/src/featherlight.gallery.js index 2136253d..d7ee246b 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); From cb73dc90cacb6154ae4db13345b0354105c80517 Mon Sep 17 00:00:00 2001 From: Johannes Matschke Date: Sat, 30 Sep 2023 17:58:38 +0200 Subject: [PATCH 2/3] css for disabling navigation buttons --- src/featherlight.gallery.css | 5 +++++ 1 file changed, 5 insertions(+) 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){ From ec349793e3bd5a630a8465aeb70e6815da6c7421 Mon Sep 17 00:00:00 2001 From: Johannes Matschke Date: Sat, 30 Sep 2023 18:46:59 +0200 Subject: [PATCH 3/3] typo --- src/featherlight.gallery.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/featherlight.gallery.js b/src/featherlight.gallery.js index d7ee246b..da32890a 100644 --- a/src/featherlight.gallery.js +++ b/src/featherlight.gallery.js @@ -137,7 +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 /* + allowWrapAround: true, /* set to false to disable previous on first image and next on last image */ slides: function() { if (this.filter) {