feat: Support for ordering images right to left

README.md

@@ -233,6 +233,7 @@ myGallery.setElements([...]);
 | autoplayVideos | boolean | `true` | Autoplay videos on open. |
 | autofocusVideos | boolean | `false` | If true video will be focused on play to allow keyboard sortcuts for the player, this will deactivate prev and next arrows to change slide so use it only if you know what you are doing. |
 | plyr | object | `{}` | [View video player options.](#video-player) |
+| direction | string | `ltr` | Direction of the lightbox slide order (`ltr` for left to right or `rtl` for right to left). |
 
 ## Events
 

src/js/core/drag.js

@@ -29,6 +29,8 @@ export default class DragSlides {
         this.dragContainer = this.el;
         this.slide = slide;
         this.instance = instance;
+        this.prevSlideDirection = instance.settings.direction === 'rtl' ? 'left' : 'right';
+        this.nextSlideDirection = instance.settings.direction === 'rtl' ? 'right' : 'left';
 
         this.el.addEventListener('mousedown', (e) => this.dragStart(e), false);
         this.el.addEventListener('mouseup', (e) => this.dragEnd(e), false);
@@ -81,8 +83,8 @@ export default class DragSlides {
 
         if (this.doSlideChange) {
             this.instance.preventOutsideClick = true;
-            this.doSlideChange == 'right' && this.instance.prevSlide();
-            this.doSlideChange == 'left' && this.instance.nextSlide();
+            this.doSlideChange == this.prevSlideDirection && this.instance.prevSlide();
+            this.doSlideChange == this.nextSlideDirection && this.instance.nextSlide();
         }
 
         if (this.doSlideClose) {
@@ -151,8 +153,8 @@ export default class DragSlides {
                     this.active = false;
                     this.instance.preventOutsideClick = true;
                     this.dragEnd(null);
-                    doChange == 'right' && this.instance.prevSlide();
-                    doChange == 'left' && this.instance.nextSlide();
+                    doChange == this.prevSlideDirection && this.instance.prevSlide();
+                    doChange == this.nextSlideDirection && this.instance.nextSlide();
                     return;
                 }
             }
@@ -189,8 +191,8 @@ export default class DragSlides {
             let dragDir = this.currentX > 0 ? 'right' : 'left';
 
             if (
-                (dragDir == 'left' && this.slide !== this.slide.parentNode.lastChild) ||
-                (dragDir == 'right' && this.slide !== this.slide.parentNode.firstChild)
+                (dragDir == this.nextSlideDirection && this.slide !== this.slide.parentNode.lastChild) ||
+                (dragDir == this.prevSlideDirection && this.slide !== this.slide.parentNode.firstChild)
             ) {
                 doChange = dragDir;
             }

src/js/core/keyboard-navigation.js

@@ -85,10 +85,10 @@ export default function keyboardNavigation(instance) {
                 }
             }
             if (key == 39) {
-                instance.nextSlide();
+                instance.settings.direction === 'rtl' ? instance.prevSlide() : instance.nextSlide();
             }
             if (key == 37) {
-                instance.prevSlide();
+                instance.settings.direction === 'rtl' ? instance.nextSlide() : instance.prevSlide();
             }
             if (key == 27) {
                 instance.close();

src/js/core/touch-navigation.js

@@ -73,6 +73,9 @@ export default function touchNavigation(instance) {
     const sliderWrapper = document.getElementById('glightbox-slider');
     const overlay = document.querySelector('.goverlay');
 
+    const prevSlideDirection = instance.settings.direction === 'rtl' ? 'Left' : 'Right';
+    const nextSlideDirection = instance.settings.direction === 'rtl' ? 'Right' : 'Left';
+
     const touchInstance = new TouchEvents(sliderWrapper, {
         touchStart: (e) => {
             process = true;
@@ -268,13 +271,13 @@ export default function touchNavigation(instance) {
                 doingZoom = false;
                 return;
             }
-            if (evt.direction == 'Left') {
+            if (evt.direction == nextSlideDirection) {
                 if (instance.index == instance.elements.length - 1) {
                     return resetSlideMove(media);
                 }
                 instance.nextSlide();
             }
-            if (evt.direction == 'Right') {
+            if (evt.direction == prevSlideDirection) {
                 if (instance.index == 0) {
                     return resetSlideMove(media);
                 }

src/js/glightbox.js

@@ -86,7 +86,8 @@ const defaults = {
         close: '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" xml:space="preserve"><g><g><path d="M505.943,6.058c-8.077-8.077-21.172-8.077-29.249,0L6.058,476.693c-8.077,8.077-8.077,21.172,0,29.249C10.096,509.982,15.39,512,20.683,512c5.293,0,10.586-2.019,14.625-6.059L505.943,35.306C514.019,27.23,514.019,14.135,505.943,6.058z"/></g></g><g><g><path d="M505.942,476.694L35.306,6.059c-8.076-8.077-21.172-8.077-29.248,0c-8.077,8.076-8.077,21.171,0,29.248l470.636,470.636c4.038,4.039,9.332,6.058,14.625,6.058c5.293,0,10.587-2.019,14.624-6.057C514.018,497.866,514.018,484.771,505.942,476.694z"/></g></g></svg>',
         next: '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 477.175 477.175" xml:space="preserve"> <g><path d="M360.731,229.075l-225.1-225.1c-5.3-5.3-13.8-5.3-19.1,0s-5.3,13.8,0,19.1l215.5,215.5l-215.5,215.5c-5.3,5.3-5.3,13.8,0,19.1c2.6,2.6,6.1,4,9.5,4c3.4,0,6.9-1.3,9.5-4l225.1-225.1C365.931,242.875,365.931,234.275,360.731,229.075z"/></g></svg>',
         prev: '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 477.175 477.175" xml:space="preserve"><g><path d="M145.188,238.575l215.5-215.5c5.3-5.3,5.3-13.8,0-19.1s-13.8-5.3-19.1,0l-225.1,225.1c-5.3,5.3-5.3,13.8,0,19.1l225.1,225c2.6,2.6,6.1,4,9.5,4s6.9-1.3,9.5-4c5.3-5.3,5.3-13.8,0-19.1L145.188,238.575z"/></g></svg>'
-    }
+    },
+    direction: 'ltr'
 };
 
 // You can pass your own slide structure
@@ -920,6 +921,12 @@ class GlightboxInit {
      */
     getAnimationClasses() {
         let effects = [];
+        if (this.settings.direction === 'rtl') {
+            // swap the slide and slideBack effects
+            const slideEffect = this.settings.cssEfects.slide;
+            this.settings.cssEfects.slide = this.settings.cssEfects.slideBack;
+            this.settings.cssEfects.slideBack = slideEffect;
+        }
         for (let key in this.settings.cssEfects) {
             if (this.settings.cssEfects.hasOwnProperty(key)) {
                 let effect = this.settings.cssEfects[key];
@@ -968,6 +975,10 @@ class GlightboxInit {
         let closeButton = modal.querySelector('.gclose');
         this.prevButton = modal.querySelector('.gprev');
         this.nextButton = modal.querySelector('.gnext');
+        if (this.settings.direction === 'rtl') {
+            this.prevButton.classList.add('gprev-rtl');
+            this.nextButton.classList.add('gnext-rtl');
+        }
         this.overlay = modal.querySelector('.goverlay');
         this.loader = modal.querySelector('.gloader');
         this.slidesContainer = document.getElementById('glightbox-slider');

src/postcss/glightbox.css

@@ -560,7 +560,8 @@ iframe.wait-autoplay {
         }
     }
 
-    .gprev {
+    .gprev:not(.gprev-rtl),
+    .gnext.gnext-rtl {
         position: absolute;
         top: -100%;
         left: 30px;
@@ -572,7 +573,8 @@ iframe.wait-autoplay {
         }
     }
 
-    .gnext {
+    .gnext:not(.gnext-rtl),
+    .gprev.gprev-rtl {
         position: absolute;
         top: -100%;
         right: 30px;
@@ -584,6 +586,11 @@ iframe.wait-autoplay {
         }
     }
 
+    .gprev-rtl,
+    .gnext-rtl {
+        transform: scale(-1, 1);
+    }
+
     .gclose {
         width: 35px;
         height: 35px;