lightgallery 2.9.0 → 3.0.0-beta.2

package/dist/scss/lg-justified.scss

@@ -0,0 +1,63 @@
+// lightGallery justified layout, trigger-grid styles. Its own entry
+// on purpose: galleries that do not use the layout never load it.
+
+// Box shown in a thumbnail's place until it has loaded. Translucent so
+// it reads on light and dark pages alike; override the rules below to
+// theme it.
+$lg-justified-placeholder: rgba(128, 128, 128, 0.2) !default;
+$lg-justified-fade-duration: 0.35s !default;
+
+.lg-justified {
+    position: relative;
+    display: block;
+    overflow: hidden;
+
+    // Children stay invisible and out of flow until the layout has
+    // positioned them, so the grid is never seen unorganized and a
+    // natural-size thumbnail cannot widen the page meanwhile. Put the
+    // class in the markup itself to cover the time before the script
+    // runs.
+    > * {
+        position: absolute;
+        opacity: 0;
+    }
+
+    .lg-justified-item {
+        position: absolute;
+        display: block;
+        overflow: hidden;
+        opacity: 1;
+
+        img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            display: block;
+        }
+    }
+
+    .lg-justified-item-hidden {
+        display: none;
+    }
+}
+
+// Reveal layer, scoped to the marker class the runtime adds to the
+// container at init: the box shows at once as a placeholder and its
+// thumbnail fades in once loaded. Gated on purpose. Layout code that
+// positions the items itself adds the geometry classes but never the
+// per-item reveal class, and would otherwise hold its images invisible
+// forever.
+.lg-justified-reveal {
+    .lg-justified-item {
+        background-color: $lg-justified-placeholder;
+
+        img {
+            opacity: 0;
+            transition: opacity $lg-justified-fade-duration ease;
+        }
+    }
+
+    .lg-justified-item-visible img {
+        opacity: 1;
+    }
+}

package/{scss → dist/scss}/lg-rotate.scss

@@ -32,33 +32,9 @@
     }
 }
 
-.lg-rotate-left {
-    &:after {
-        content: '\e900';
-    }
-}
-
-.lg-rotate-right {
-    &:after {
-        content: '\e901';
-    }
-}
-
 .lg-icon {
     &.lg-flip-hor,
     &.lg-flip-ver {
         font-size: 26px;
     }
 }
-
-.lg-flip-ver {
-    &:after {
-        content: '\e903';
-    }
-}
-
-.lg-flip-hor {
-    &:after {
-        content: '\e902';
-    }
-}

package/dist/scss/lg-rtl.scss

@@ -0,0 +1,145 @@
+@use 'lg-mixins' as *;
+
+// Opt-in RTL layer: load this stylesheet (after the theme and any plugin
+// styles) whenever the gallery's `direction` setting resolves to 'rtl'.
+// Every rule is scoped to `.lg-container[dir='rtl']`, the attribute the
+// core sets from the resolved direction, so LTR galleries pay nothing
+// and a forced-LTR gallery inside an RTL page stays untouched.
+//
+// Scope note: the default lg-slide mode, chrome, thumbnails, share
+// dropdown and comment drawer mirror here. The decorative horizontal
+// transitions (lg-slide-skew, lg-tube, …) keep their LTR choreography.
+
+.lg-container[dir='rtl'] {
+    // Prev/next arrows swap sides and point the other way.
+    .lg-next {
+        right: auto;
+        left: 20px;
+    }
+
+    .lg-prev {
+        left: auto;
+        right: 20px;
+    }
+
+    // Custom prev/next arrows mirror instead of swapping glyphs.
+    .lg-prev.lg-icon-custom svg,
+    .lg-next.lg-icon-custom svg {
+        transform: scaleX(-1);
+    }
+
+    // Chrome enter/exit slides from the mirrored side.
+    &.lg-show-in .lg-hide-items {
+        .lg-prev {
+            @include translate3d(10px, 0, 0);
+        }
+
+        .lg-next {
+            @include translate3d(-10px, 0, 0);
+        }
+    }
+
+    // End-of-gallery bounce points at the mirrored edge (the keyframes
+    // ship with the default theme; only the assignment swaps).
+    .lg-outer.lg-right-end .lg-object {
+        animation: lg-left-end 0.3s;
+    }
+
+    .lg-outer.lg-left-end .lg-object {
+        animation: lg-right-end 0.3s;
+    }
+
+    // The slide rail keeps its internal LTR geometry: the absolutely
+    // positioned slides take their STATIC position from the rail's
+    // inline direction, so an inherited rtl shoves the current slide a
+    // full viewport off-screen (left: -100% static offset). Mirroring
+    // lives in the transforms below, never in the rail's writing mode.
+    .lg-inner {
+        direction: ltr;
+    }
+
+    // Slide-level captions (captionPosition: 'slide') sit inside the
+    // rail, restore their reading direction.
+    .lg-inner .lg-sub-html {
+        direction: rtl;
+    }
+
+    // Resting slide positions mirror: prev sits to the physical right.
+    // The drag/spring transforms follow via the direction-aware headless
+    // math, so gestures and CSS agree on the geometry.
+    .lg-outer.lg-slide.lg-use-css3 .lg-item {
+        &.lg-prev-slide {
+            @include translate3d(100%, 0, 0);
+        }
+
+        &.lg-next-slide {
+            @include translate3d(-100%, 0, 0);
+        }
+
+        // Mid-transition a slide carries lg-current AND a neighbor class;
+        // the base stylesheet resolves that tie by source order, so the
+        // current position must be re-asserted at this specificity too.
+        &.lg-current {
+            @include translate3d(0, 0, 0);
+        }
+    }
+
+    // Toolbar icons flow from the left; the counter pads on its right.
+    .lg-toolbar .lg-icon,
+    .lg-toolbar .lg-share-outer {
+        float: left;
+    }
+
+    // The overflow menu opens from the toolbar's inline end.
+    .lg-toolbar-menu {
+        right: auto;
+        left: 8px;
+        text-align: right;
+    }
+
+    .lg-counter {
+        padding-left: 0;
+        padding-right: 20px;
+        // "3 / 5" must not bidi-reorder into "5 / 3", the counter is a
+        // number pair, not prose.
+        direction: ltr;
+        unicode-bidi: isolate;
+    }
+
+    // Thumbnail strip flows right-to-left; the plugin flips its
+    // translate sign to match (logical strip space stays shared).
+    .lg-outer {
+        .lg-thumb-spacer,
+        .lg-thumb-item {
+            float: right;
+        }
+    }
+
+    // Share dropdown hangs under the mirrored toolbar corner.
+    .lg-outer .lg-dropdown {
+        right: auto;
+        left: 0;
+        text-align: right;
+
+        &:after {
+            right: auto;
+            left: 16px;
+        }
+
+        .lg-icon {
+            margin-right: 0;
+            margin-left: 8px;
+        }
+    }
+
+    // Comment drawer docks and enters from the left.
+    .lg-comment-box {
+        right: auto;
+        left: 0;
+        @include transform(translate3d(-100%, 0, 0));
+    }
+
+    .lg-outer.lg-comment-active .lg-comment-box {
+        @include transform(translate3d(0, 0, 0));
+    }
+}

package/{scss → dist/scss}/lg-share.scss

@@ -2,26 +2,8 @@
 @use 'lg-mixins' as *;
 
 .lg-outer {
-    .lg-dropdown-overlay {
-        background-color: rgba(0, 0, 0, 0.25);
-        bottom: 0;
-        cursor: default;
-        left: 0;
-        position: absolute;
-        right: 0;
-        top: 0;
-        z-index: $zindex-toolbar - 1;
-        opacity: 0;
-        visibility: hidden;
-        will-change: visibility, opacity;
-        @include transition(
-            visibility 0s linear 0.18s,
-            opacity 0.18s linear 0s
-        );
-    }
     &.lg-dropdown-active {
-        .lg-dropdown,
-        .lg-dropdown-overlay {
+        .lg-dropdown {
             @include transition-delay(0s);
             @include transform(translate3d(0, 0px, 0));
             opacity: 1;
@@ -104,34 +86,25 @@
             width: auto;
         }
     }
-    .lg-share {
+    // The button and its dropdown share a wrapper, so the menu hangs
+    // under the control that opened it instead of the toolbar's corner.
+    .lg-share-outer {
+        float: right;
         position: relative;
-        &:after {
-            content: '\e80d';
-        }
     }
     .lg-share-facebook {
         .lg-icon {
             color: #3b5998;
-            &:after {
-                content: '\e904';
-            }
         }
     }
     .lg-share-twitter {
         .lg-icon {
-            color: #00aced;
-            &:after {
-                content: '\e907';
-            }
+            color: #000;
         }
     }
     .lg-share-pinterest {
         .lg-icon {
             color: #cb2027;
-            &:after {
-                content: '\e906';
-            }
         }
     }
 }

package/{scss → dist/scss}/lg-thumbnail.scss

@@ -4,6 +4,15 @@
 $thumbnails-margin: 5px;
 
 .lg-outer {
+    // Scrub session (scrubThumbnails): the strip drives the gallery
+    // frame by frame, slide swaps must land instantly, so every slide
+    // transition is off while the session runs.
+    &.lg-thumb-scrubbing {
+        .lg-item {
+            transition: none !important;
+        }
+    }
+
     .lg-thumb-outer {
         background-color: $lg-thumb-bg;
         width: 100%;
@@ -62,6 +71,13 @@ $thumbnails-margin: 5px;
         }
     }
 
+    // Virtualized-strip spacer: stands in for the unrendered thumbs so
+    // the track keeps its full scroll geometry.
+    .lg-thumb-spacer {
+        float: left;
+        height: 1px;
+    }
+
     .lg-thumb-item {
         cursor: pointer;
         float: left;
@@ -95,11 +111,6 @@ $thumbnails-margin: 5px;
         }
     }
 
-    .lg-toggle-thumb {
-        &:after {
-            content: '\e1ff';
-        }
-    }
     &.lg-animate-thumb {
         .lg-thumb {
             @include transition-timing-function(

package/{scss → dist/scss}/lg-zoom.scss

@@ -1,6 +1,17 @@
 @use 'lg-variables' as *;
 @use 'lg-mixins' as *;
 
+// The actual-size button carries both zoom icons; its live class
+// (toggled by the plugin as the zoom state changes) picks one. The
+// dedicated zoom-in/out buttons carry a single icon each, so these
+// rules are inert on them.
+.lg-icon-custom.lg-zoom-in .lg-ci-zoom-out {
+    display: none;
+}
+.lg-icon-custom.lg-zoom-out .lg-ci-zoom-in {
+    display: none;
+}
+
 .lg-outer {
     // reset transition duration
     &.lg-css3.lg-zoom-dragging {
@@ -31,6 +42,41 @@
                 }
             }
         }
+        // Gesture releases settle the image scale on the same monotonic
+        // ease as the wrap pan. The default bouncy bezier below overshoots
+        // by ~19% of the delta, fine for one-step button zooms, a violent
+        // excursion when an infinite-zoom pinch releases far above actual
+        // size. Both :not() guards keep this high-specificity rule from
+        // outranking the two !important kill switches it must lose to:
+        // lg-zoom-dragging (fingers still down) and no-transition (the
+        // actual-size natural-px swap, which must never animate).
+        &.lg-zoom-drag-transition:not(.lg-zoom-dragging) {
+            .lg-item.lg-complete.lg-zoomable {
+                .lg-image:not(.no-transition),
+                .lg-dummy-img:not(.no-transition) {
+                    @include transitionCustom(
+                        transform 0.8s cubic-bezier(0, 0, 0.25, 1) 0s,
+                        opacity 0.15s !important
+                    );
+                }
+            }
+        }
+    }
+
+    // Close-while-zoomed: the core starts the zoom-from-origin shrink on
+    // the slide item and resetZoom strips the pan/scale styles in the
+    // same frame. The strip has to land instantly, animated through the
+    // transitions above it composes with the slide shrink, and the image
+    // never reaches the trigger rect before the close timeout hides the
+    // gallery.
+    &.lg-closing {
+        .lg-item.lg-complete.lg-zoomable {
+            .lg-img-wrap,
+            .lg-image,
+            .lg-dummy-img {
+                transition: none !important;
+            }
+        }
     }
 
     .lg-item.lg-complete.lg-zoomable {
@@ -81,9 +127,6 @@
 .lg-icon {
     // zoom buttons
     &.lg-zoom-in {
-        &:after {
-            content: '\e311';
-        }
         .lg-actual-size & {
             opacity: 1;
             pointer-events: auto;
@@ -92,18 +135,12 @@
 
     &.lg-actual-size {
         font-size: 20px;
-        &:after {
-            content: '\e033';
-        }
     }
 
     &.lg-zoom-out {
         opacity: 0.5;
         pointer-events: none;
 
-        &:after {
-            content: '\e312';
-        }
 
         .lg-zoomed & {
             opacity: 1;

package/{scss → dist/scss}/lightgallery-bundle.scss

@@ -14,7 +14,6 @@
 // $lg-progress-bar-bg: #999;
 
 // Core variables and mixins
-@use 'lg-fonts';
 @use 'lg-theme-default';
 @use 'lg-thumbnail';
 @use 'lg-video';

package/{scss → dist/scss}/lightgallery-core.scss

@@ -17,6 +17,19 @@
         display: block;
     }
 }
+
+// Screen-reader-only live region announcing slide changes
+.lg-announcer {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+}
 .lg-on {
     scroll-behavior: unset;
 }
@@ -102,13 +115,20 @@
         opacity: 1;
     }
 
-    // Set transition speed and timing function
+    // Set transition speed and timing function. The duration is a list:
+    // the mode transitions all declare `transform` then `opacity`, and a
+    // single inherited value would stretch the crossfade to the whole
+    // slide, leaving the outgoing image ghosting across it. Modes whose
+    // effect IS the fade opt back in with --lg-opacity-speed.
     &.lg-css3 {
         .lg-item:not(.lg-start-end-progress) {
             &.lg-prev-slide,
             &.lg-next-slide,
             &.lg-current {
-                @include transition-duration(inherit !important);
+                @include transition-duration(
+                    var(--lg-speed, 400ms),
+                    var(--lg-opacity-speed, 100ms) !important
+                );
                 @include transition-timing-function(inherit !important);
             }
         }
@@ -343,6 +363,22 @@
                 );
             }
         }
+
+        // Close without a thumbnail to land on (hidden or collapsed
+        // trigger, no lg-size, zoomFromOrigin off, a dynamic gallery): the
+        // slide shrinks about the stage centre and fades over the flight
+        // duration, the mirror of the lg-start-zoom open. Outscores the
+        // per-mode .lg-current rules so the fade is not clamped to their
+        // transitions (lg-fade animates opacity only, for 0.1s).
+        &.lg-closing.lg-close-to-center {
+            .lg-item.lg-current.lg-start-end-progress {
+                opacity: 0;
+                @include transitionCustom(
+                    transform 1s cubic-bezier(0, 0, 0.25, 1) 0s,
+                    opacity 1s cubic-bezier(0, 0, 0.25, 1) 0s
+                );
+            }
+        }
     }
 
     &.lg-slide {
@@ -412,10 +448,41 @@
     .lg-outer {
         z-index: 2;
     }
-    .lg-maximize {
-        &:after {
-            content: '\e909';
-        }
+}
+
+// Custom icons (settings.icons): user SVGs replace the font glyphs. The
+// wrapper spans center the SVG in the button; sizing follows the
+// button's font-size so custom icons land where the glyphs did. Color
+// is deliberately NOT forced, currentColor-based SVGs inherit the
+// button color, and fills/strokes authored into the SVG are respected.
+.lg-icon-custom {
+    &::after {
+        content: none !important;
+    }
+    .lg-ci {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+    }
+    svg {
+        width: 1em;
+        height: 1em;
+    }
+}
+
+// Maximize/minimize custom pair follows the same lg-inline state that
+// swaps the font glyphs above.
+.lg-maximize.lg-icon-custom .lg-ci-maximize {
+    display: none;
+}
+.lg-inline .lg-maximize.lg-icon-custom {
+    .lg-ci-maximize {
+        display: inline-flex;
+    }
+    .lg-ci-minimize {
+        display: none;
     }
 }
 

package/{scss → dist/scss}/lightgallery.scss

@@ -1,4 +1,3 @@
-@use 'lg-fonts';
 @use 'lg-theme-default';
 
 // Core

package/{scss → dist/scss}/transitions/_lg-scale-up.scss

@@ -3,6 +3,12 @@
 .lg-css3 {
     &.lg-scale-up {
         .lg-item {
+            // The crossfade IS the effect here, so it runs for the
+            // whole slide instead of the short default swap. Declared on
+            // the item: --lg-speed is published on .lg-inner, so only its
+            // descendants can resolve it.
+            --lg-opacity-speed: var(--lg-speed, 400ms);
+
             opacity: 0;
 
             &.lg-prev-slide {

package/{scss → dist/scss}/transitions/_lg-slide-circular-vertical.scss

@@ -3,6 +3,12 @@
 .lg-css3 {
     &.lg-slide-circular-vertical {
         .lg-item {
+            // The crossfade IS the effect here, so it runs for the
+            // whole slide instead of the short default swap. Declared on
+            // the item: --lg-speed is published on .lg-inner, so only its
+            // descendants can resolve it.
+            --lg-opacity-speed: var(--lg-speed, 400ms);
+
             opacity: 0;
 
             &.lg-prev-slide {

package/{scss → dist/scss}/transitions/_lg-slide-circular.scss

@@ -3,6 +3,12 @@
 .lg-css3 {
     &.lg-slide-circular {
         .lg-item {
+            // The crossfade IS the effect here, so it runs for the
+            // whole slide instead of the short default swap. Declared on
+            // the item: --lg-speed is published on .lg-inner, so only its
+            // descendants can resolve it.
+            --lg-opacity-speed: var(--lg-speed, 400ms);
+
             opacity: 0;
 
             &.lg-prev-slide {

package/{scss → dist/scss}/transitions/_lg-soft-zoom.scss

@@ -3,6 +3,12 @@
 .lg-css3 {
     &.lg-soft-zoom {
         .lg-item {
+            // The crossfade IS the effect here, so it runs for the
+            // whole slide instead of the short default swap. Declared on
+            // the item: --lg-speed is published on .lg-inner, so only its
+            // descendants can resolve it.
+            --lg-opacity-speed: var(--lg-speed, 400ms);
+
             opacity: 0;
 
             &.lg-prev-slide {

package/{scss → dist/scss}/transitions/_lg-zoom-in-big.scss

@@ -3,6 +3,12 @@
 .lg-css3 {
     &.lg-zoom-in-big {
         .lg-item {
+            // The crossfade IS the effect here, so it runs for the
+            // whole slide instead of the short default swap. Declared on
+            // the item: --lg-speed is published on .lg-inner, so only its
+            // descendants can resolve it.
+            --lg-opacity-speed: var(--lg-speed, 400ms);
+
             opacity: 0;
 
             &.lg-prev-slide {

package/{scss → dist/scss}/transitions/_lg-zoom-in-out.scss

@@ -3,6 +3,12 @@
 .lg-css3 {
     &.lg-zoom-in-out {
         .lg-item {
+            // The crossfade IS the effect here, so it runs for the
+            // whole slide instead of the short default swap. Declared on
+            // the item: --lg-speed is published on .lg-inner, so only its
+            // descendants can resolve it.
+            --lg-opacity-speed: var(--lg-speed, 400ms);
+
             opacity: 0;
 
             &.lg-prev-slide {

package/{scss → dist/scss}/transitions/_lg-zoom-in.scss

@@ -3,6 +3,12 @@
 .lg-css3 {
     &.lg-zoom-in {
         .lg-item {
+            // The crossfade IS the effect here, so it runs for the
+            // whole slide instead of the short default swap. Declared on
+            // the item: --lg-speed is published on .lg-inner, so only its
+            // descendants can resolve it.
+            --lg-opacity-speed: var(--lg-speed, 400ms);
+
             opacity: 0;
 
             &.lg-prev-slide {

package/{scss → dist/scss}/transitions/_lg-zoom-out-big.scss

@@ -3,6 +3,12 @@
 .lg-css3 {
     &.lg-zoom-out-big {
         .lg-item {
+            // The crossfade IS the effect here, so it runs for the
+            // whole slide instead of the short default swap. Declared on
+            // the item: --lg-speed is published on .lg-inner, so only its
+            // descendants can resolve it.
+            --lg-opacity-speed: var(--lg-speed, 400ms);
+
             opacity: 0;
 
             &.lg-prev-slide {

package/{scss → dist/scss}/transitions/_lg-zoom-out-in.scss

@@ -3,6 +3,12 @@
 .lg-css3 {
     &.lg-zoom-out-in {
         .lg-item {
+            // The crossfade IS the effect here, so it runs for the
+            // whole slide instead of the short default swap. Declared on
+            // the item: --lg-speed is published on .lg-inner, so only its
+            // descendants can resolve it.
+            --lg-opacity-speed: var(--lg-speed, 400ms);
+
             opacity: 0;
 
             &.lg-prev-slide {