Demos

Social sharing

View as Markdown Open in Claude Open in ChatGPT

Share your images and videos across social media platforms using the unique url created by lightGallery.

Demo

Open in StackBlitz
Open in StackBlitz
Open in StackBlitz
Open in StackBlitz

HTML

<div id="gallery-share-demo">
    <a
        data-pinterest-text="Pin it1"
        data-tweet-text="lightGallery slide 1"
        href="img/img1.jpg"
    >
        <img src="img/thumb1.jpg" />
    </a>
    <a
        data-pinterest-text="Pin it2"
        data-tweet-text="lightGallery slide 2"
        href="img/img2.jpg"
    >
        <img src="img/thumb2.jpg" />
    </a>
    <!-- more items -->
</div>

Optionally you can pass a separate url for each image instead of the current browser url.

<div id="gallery-share-demo">
    <a
        data-pinterest-text="Pin it1"
        data-tweet-text="lightGallery slide 1"
        data-facebook-share-url="share/facebook-share-url"
        data-twitter-share-url="share/twitter-share-url"
        data-pinterest-share-url="share/pinterest-share-url"
        href="img/img1.jpg"
    >
        <img src="img/thumb1.jpg" />
    </a>
    <a
        data-pinterest-text="Pin it2"
        data-tweet-text="lightGallery slide 2"
        data-facebook-share-url="share/facebook-share-url"
        data-twitter-share-url="share/twitter-share-url"
        data-pinterest-share-url="share/pinterest-share-url"
        href="img/img2.jpg"
    >
        <img src="img/thumb2.jpg" />
    </a>
    <!-- more items -->
</div>

JavaScript

import lightGallery from 'lightgallery';
import lgShare from 'lightgallery/plugins/share';

lightGallery(document.getElementById('gallery-share-demo'), {
    plugins: [lgShare],
});
import { LightGallery, LightGalleryItem } from '@lightgallery/react';
import Share from '@lightgallery/react/plugins/share';

// tweetText and pinterestText are the text the post on X and the pin on
// Pinterest start with; facebookShareUrl, twitterShareUrl and
// pinterestShareUrl replace the current page URL per item.
const items = [
    {
        src: 'img/img1.jpg',
        thumb: 'img/thumb1.jpg',
        alt: 'Mountains',
        tweetText: 'lightGallery slide 1',
        pinterestText: 'Pin it1',
    },
    {
        src: 'img/img2.jpg',
        thumb: 'img/thumb2.jpg',
        alt: 'Forest path',
        tweetText: 'lightGallery slide 2',
        pinterestText: 'Pin it2',
    },
];

// Share adds a share button to the toolbar. On touch devices it opens the
// device share sheet first; share={{ preferNativeShare: true }} (or false)
// chooses one for every device.
<LightGallery plugins={[Share]}>
    {items.map((item) => (
        <LightGalleryItem key={item.src} item={item}>
            <img src={item.thumb} alt={item.alt} />
        </LightGalleryItem>
    ))}
</LightGallery>;
<script setup>
import { LightGallery, LgItem } from '@lightgallery/vue';
import Share from '@lightgallery/vue/plugins/share';

// Share adds a share button to the toolbar. On touch devices it opens the
// device share sheet first; :share="{ preferNativeShare: true }" (or
// false) chooses one for every device.
const plugins = [Share];

// tweetText and pinterestText are the text the post on X and the pin on
// Pinterest start with; facebookShareUrl, twitterShareUrl and
// pinterestShareUrl replace the current page URL per item.
const items = [
    {
        src: 'img/img1.jpg',
        thumb: 'img/thumb1.jpg',
        alt: 'Mountains',
        tweetText: 'lightGallery slide 1',
        pinterestText: 'Pin it1',
    },
    {
        src: 'img/img2.jpg',
        thumb: 'img/thumb2.jpg',
        alt: 'Forest path',
        tweetText: 'lightGallery slide 2',
        pinterestText: 'Pin it2',
    },
];
</script>

<template>
    <LightGallery :plugins="plugins">
        <LgItem v-for="item of items" :key="item.src" :item="item">
            <img :src="item.thumb" :alt="item.alt" />
        </LgItem>
    </LightGallery>
</template>
import { Component } from '@angular/core';
import {
    LgGalleryComponent,
    LgGalleryItemDirective,
    type LgGalleryItem,
} from '@lightgallery/angular';
import { withShare } from '@lightgallery/angular/plugins/share';

@Component({
    selector: 'app-gallery',
    imports: [LgGalleryComponent, LgGalleryItemDirective],
    template: `
        <lg-gallery [features]="features">
            @for (item of items; track item.src) {
                <a [lgGalleryItem]="item">
                    <img [src]="item.thumb" [alt]="item.alt" />
                </a>
            }
        </lg-gallery>
    `,
})
export class Gallery {
    // withShare() adds a share button to the toolbar. On touch devices it
    // opens the device share sheet first; withShare({ preferNativeShare:
    // true }) (or false) chooses one for every device.
    features = [withShare()];

    // tweetText and pinterestText are the text the post on X and the pin
    // on Pinterest start with; facebookShareUrl, twitterShareUrl and
    // pinterestShareUrl replace the current page URL per item.
    items: LgGalleryItem[] = [
        {
            src: 'img/img1.jpg',
            thumb: 'img/thumb1.jpg',
            alt: 'Mountains',
            tweetText: 'lightGallery slide 1',
            pinterestText: 'Pin it1',
        },
        {
            src: 'img/img2.jpg',
            thumb: 'img/thumb2.jpg',
            alt: 'Forest path',
            tweetText: 'lightGallery slide 2',
            pinterestText: 'Pin it2',
        },
    ];
}

Add new share options

By default, lightGallery supports sharing on Facebook, X (Twitter) and Pinterest. Missing something? You can easily add your own share buttons in lightGallery.

Let’s see how we can add Reddit share button.

To share a post on Reddit, you need to create the following url structure

https://reddit.com/submit?url={url}&title={title}

Step 1 -

We need to fetch title attribute from each slide. lightGallery allows you to fetch custom props from the selector element by passing the prop name via extraProps settings

HTML

<div id="gallery-share-reddit-demo">
    <a data-reddit-title="slide title" href="img/img1.jpg">
        <img src="img/thumb1.jpg" />
    </a>
    <a data-reddit-title="slide title - 2" href="img/img2.jpg">
        <img src="img/thumb2.jpg" />
    </a>
    <!-- more items -->
</div>

JavaScript

lightGallery(document.getElementById('gallery-share-reddit-demo'), {
    extraProps: ['redditTitle'],
});
// There is no extraProps: generateLink receives the item itself, so
// the title is a field on it.
const items = [
    {
        src: 'img/img1.jpg',
        thumb: 'img/thumb1.jpg',
        alt: 'Mountains',
        title: 'slide title',
    },
    {
        src: 'img/img2.jpg',
        thumb: 'img/thumb2.jpg',
        alt: 'Forest path',
        title: 'slide title - 2',
    },
];
// There is no extraProps: generateLink receives the item itself, so
// the title is a field on it.
const items: LgGalleryItem[] = [
    {
        src: 'img/img1.jpg',
        thumb: 'img/thumb1.jpg',
        alt: 'Mountains',
        title: 'slide title',
    },
    {
        src: 'img/img2.jpg',
        thumb: 'img/thumb2.jpg',
        alt: 'Forest path',
        title: 'slide title - 2',
    },
];
// There is no extraProps: generateLink receives the item itself, so
// the title is a field on it.
items: LgGalleryItem[] = [
    {
        src: 'img/img1.jpg',
        thumb: 'img/thumb1.jpg',
        alt: 'Mountains',
        title: 'slide title',
    },
    {
        src: 'img/img2.jpg',
        thumb: 'img/thumb2.jpg',
        alt: 'Forest path',
        title: 'slide title - 2',
    },
];

Step 2 -

Using setting additionalShareOptions provide the required data to lightGallery share plugin

JavaScript

lightGallery(document.getElementById('gallery-share-reddit-demo'), {
    extraProps: ['redditTitle'],
    additionalShareOptions: [
        {
            // Selector for the anchor tag inside share list item
            selector: '.lg-share-reddit',

            // HTML to be appended to the share dropdown menu
            dropdownHTML:
                '<li class="lg-share-item-reddit"><a class="lg-share-reddit" target="_blank"><svg class="lg-reddit">...</svg><span class="lg-dropdown-text">Reddit</span></a></li>',

            // Construct url
            generateLink: (galleryItem) => {
                const url = window.location.href;

                // The prop data-reddit-title is converted to redditTitle and added to the gallery item
                const title = galleryItem.redditTitle;
                const redditShareLink = `https://reddit.com/submit?url=${encodeURIComponent(url)}&title=${encodeURIComponent(title)}`;
                return redditShareLink;
            },
        },
    ],
});
import { LightGallery, LightGalleryItem } from '@lightgallery/react';
import Share from '@lightgallery/react/plugins/share';

// The packages take typed options instead of dropdown HTML strings:
// { text, className, generateLink }.
<LightGallery
    plugins={[Share]}
    share={{
        additionalShareOptions: [
            {
                text: 'Reddit',
                className: 'lg-share-reddit',
                generateLink: (item, currentUrl) =>
                    `https://reddit.com/submit?url=${encodeURIComponent(
                        currentUrl,
                    )}&title=${encodeURIComponent(item.title ?? '')}`,
            },
        ],
    }}
>
    {items.map((item) => (
        <LightGalleryItem key={item.src} item={item}>
            <img src={item.thumb} alt={item.alt} />
        </LightGalleryItem>
    ))}
</LightGallery>;
<script setup>
import { LightGallery, LgItem } from '@lightgallery/vue';
import Share from '@lightgallery/vue/plugins/share';

const plugins = [Share];

// The packages take typed options instead of dropdown HTML strings:
// { text, className, generateLink }.
const reddit = {
    text: 'Reddit',
    className: 'lg-share-reddit',
    generateLink: (item, currentUrl) =>
        `https://reddit.com/submit?url=${encodeURIComponent(currentUrl)}&title=${encodeURIComponent(
            item.title ?? '',
        )}`,
};
</script>

<template>
    <LightGallery
        :plugins="plugins"
        :share="{ additionalShareOptions: [reddit] }"
    >
        <LgItem v-for="item of items" :key="item.src" :item="item">
            <img :src="item.thumb" :alt="item.alt" />
        </LgItem>
    </LightGallery>
</template>
import { withShare } from '@lightgallery/angular/plugins/share';

// The packages take typed options instead of dropdown HTML strings:
// { text, className, generateLink }. The items are the ones above.
features = [
    withShare({
        additionalShareOptions: [
            {
                text: 'Reddit',
                className: 'lg-share-reddit',
                generateLink: (item, currentUrl) =>
                    `https://reddit.com/submit?url=${encodeURIComponent(
                        currentUrl,
                    )}&title=${encodeURIComponent(item.title ?? '')}`,
            },
        ],
    }),
];
<lg-gallery [features]="features">
    @for (item of items; track item.src) {
        <a [lgGalleryItem]="item">
            <img [src]="item.thumb" [alt]="item.alt" />
        </a>
    }
</lg-gallery>

That’s it. Now you can see the additional Reddit button in the share dropdown menu.

Reference - https://github.com/bradvin/social-share-urls

Edit this page on GitHub