Localization & RTL

One strings contract for every label, and an opt-in RTL layer that mirrors the whole gallery.

The strings object

Every user-facing label in lightGallery v3, core controls and plugin buttons, lives in a single strings setting. Pass a partial object; the keys you provide merge over the English defaults. The same contract works in all four packages, and the settings reference carries the generated description.

lightGallery(el, {
    plugins: [lgThumbnail, lgZoom],
    strings: {
        closeGallery: 'Galerie schließen',
        previousSlide: 'Vorheriges Bild',
        nextSlide: 'Nächstes Bild',
        zoomIn: 'Vergrößern',
        zoomOut: 'Verkleinern',
        slideAnnouncement: 'Bild {index} von {total}',
    },
});

<LightGallery
    slides={slides}
    strings={{ closeGallery: 'Galerie schließen' }}
/>

<LightGallery
    :slides="slides"
    :strings="{ closeGallery: 'Galerie schließen' }"
/>

<lg-gallery
    [slides]="slides"
    [strings]="{ closeGallery: 'Galerie schließen' }"
/>

Core keys

galleryLabel names the gallery dialog for assistive technology when ariaLabelledby is not set. slideAnnouncement is announced politely on every slide change, {index} and {total} are replaced with the 1-based position and the slide count, and the slide caption, when present, is appended.

Plugin labels

Plugin buttons read from the same object, no per-plugin configuration needed:

Deprecated per-plugin objects

The v2-era per-plugin label objects (zoomPluginStrings, thumbnailPluginStrings, autoplayPluginStrings, fullscreenPluginStrings, rotatePluginStrings, sharePluginStrings, commentPluginStrings) still work as deprecated aliases: a key set explicitly on a legacy object wins over the same key on strings, so existing configurations keep their behavior. New code should use strings only.

Right-to-left galleries

Set direction: 'rtl' and load the opt-in RTL stylesheet, keyboard arrows, swipe advance, the slide transforms and the thumbnail strip all mirror. The layer is a separate file, so LTR galleries pay zero CSS bytes. The RTL demo shows a mirrored gallery with the code for each stack.

import 'lightgallery/css/lg-rtl.css';

lightGallery(el, {
    plugins: [lgThumbnail, lgZoom],
    direction: 'rtl',
});

import 'lightgallery/css/lg-rtl.css';

<LightGallery slides={slides} direction="rtl" />;

<script setup>
import 'lightgallery/css/lg-rtl.css';
</script>

<LightGallery :slides="slides" direction="rtl" />

import 'lightgallery/css/lg-rtl.css';

<lg-gallery [slides]="slides" direction="rtl" />

In Angular, withRtl() is the same setting as feature-list sugar, [features]="[withRtl(), withThumbnail()]", and an explicit [direction] input still wins.

The direction setting

'auto' resolves from the gallery element’s computed direction in vanilla JavaScript, and from the nearest dir attribute (document.documentElement / document.body) in the framework packages. The default stays 'ltr' so upgrading never changes behavior on existing pages, RTL pages opt in with 'rtl' or 'auto'.

What the RTL layer covers

• Prev/next arrows swap sides and glyphs; keyboard ArrowLeft / ArrowRight advance in reading order.
• Slide resting positions, swipe advance and the release spring are mirrored.
• The thumbnail strip starts at the right edge and drags in reading order; the counter keeps its 3 / 5 form in bidi text.
• The share dropdown, comment drawer and toolbar chrome mirror.
• Slide captions render direction: rtl, while the slide rail keeps internal LTR geometry (the mirroring lives in the transforms).

Everything is scoped to .lg-container[dir='rtl'], a forced-LTR gallery inside an RTL page stays untouched. The decorative horizontal transitions (lg-slide-skew, lg-tube, …) intentionally keep their LTR choreography.

Edit this page on GitHub