Web Share

Native OS share sheet first, classic dropdown as the fallback, and sharing targets brought up to date.

The share plugin in v3 is a hybrid: where the Web Share API is available, the share button opens the native OS share sheet, the user shares to any app on their device, not just the networks in a dropdown. Everywhere else (and whenever the browser vetoes the payload) the classic dropdown appears, exactly as before.

lightGallery(el, {
    plugins: [lgShare],
    // Optional. Defaults to native-first on touch devices,
    // dropdown-first elsewhere.
    preferNativeShare: true,
});

The sharing demo shows both paths, and the settings reference carries the generated description.

• Default behavior: touch devices go native-first; desktop keeps the dropdown. Set preferNativeShare explicitly to override in either direction.
• If the browser rejects the payload (navigator.canShare), the click falls back to the dropdown, which stays rendered underneath, so there is always a working share path.
• A user dismissing the OS sheet is not an error; nothing else happens.

The behavior is identical in all four packages; the frameworks take the setting in the Share plugin’s options object:

<LightGallery slides={slides} plugins={[Share]} share={{ preferNativeShare: true }} />

<LightGallery :slides="slides" :plugins="[Share]" :share="{ preferNativeShare: true }" />

<lg-gallery [slides]="slides" [features]="[withShare({ preferNativeShare: true })]" />

What gets shared

The native payload is assembled per slide:

shareUrl is a new item field (data-share-url in vanilla markup), one canonical share link per slide, used by the native sheet and available to custom targets.

<a
    data-src="img/photo.jpg"
    data-share-url="https://example.com/photos/42"
    data-tweet-text="Sunset over the ridge"
>
    <img src="img/thumb.jpg" alt="Sunset" />
</a>

Updated share targets

• The Twitter target is now X: links use the x.com/intent/post endpoint, the dropdown label defaults to 'X' and the icon is the X mark (shareX). Setting names and CSS classes are unchanged (lg-share-twitter), so existing customizations keep working.
• The share text is URL-encoded properly in the intent link.
• The share button and its dropdown sit together in .lg-share-outer, which anchors the menu under the button. Custom CSS that positioned .lg-dropdown against the toolbar should target that wrapper instead.

Dismissing the dropdown

The dropdown dismisses the way the toolbar’s More options menu does:

• A press anywhere outside it closes it. On another toolbar button the press goes through, so one click both closes the dropdown and runs that button. On the backdrop around the slide the press only closes the dropdown; it does not close the gallery.
• Escape closes the dropdown and returns focus to the share button. The gallery stays open.
• Tabbing out of the dropdown closes it.

The dimming .lg-dropdown-overlay element that 2.x placed behind an open dropdown is gone; nothing in the gallery is covered while the dropdown is open.

Settings

Edit this page on GitHub