lightGallery Vue

Full featured image and video gallery component for vue.

StackBlitz Demo

Installation

Follow the below steps to use lightGallery vue component in your application. Vue component is part of the main lightGallery package on NPM. You can import it using the following way

  • Install lightGallery via NPM
npm install lightgallery
  • Import vue component and styles
<template>
    <lightgallery
        :settings="{ speed: 500, plugins: plugins }"
        :onInit="onInit"
        :onBeforeSlide="onBeforeSlide"
    >
        <a href="img/img1.jpg">
            <img alt=".." src="img/thumb1.jpg" />
        </a>
        <a href="img/img2.jpg">
            <img alt=".." src="img/thumb2.jpg" />
        </a>
        ...
    </lightgallery>
</template>

<script lang="ts">
    import { Options, Vue } from 'vue-class-component';
    import Lightgallery from 'lightgallery/vue';
    import lgThumbnail from 'lightgallery/plugins/thumbnail';
    import lgZoom from 'lightgallery/plugins/zoom';

    // If you are using scss you can skip the css imports below and use scss instead
    import lgZoom from 'lightgallery/scss/lightgallery.scss';

    @Options({
        components: {
            Lightgallery,
        },
        data: () => ({
            plugins: [lgThumbnail, lgZoom],
        }),
        methods: {
            onInit: () => {
                console.log('lightGallery has been initialized');
            },
            onBeforeSlide: () => {
                console.log('calling before slide');
            },
        },
    })
    export default class App extends Vue {}
</script>
<style lang="css" scoped>
    @import 'lightgallery/css/lightgallery.css';
    @import 'lightgallery/css/lg-thumbnail.css';
    @import 'lightgallery/css/lg-zoom.css';
</style>

Props and methods

All lightGallery settings can be passed to vue component via settings prop. Additionally, you can use lifecycle hook methods listed below to hook into lightGalley component lifecycle. Almost every method passes a detail object which holds useful plugin data

usage example

<template>
    <lightgallery
        :onBeforeSlide="onBeforeSlide"
    >
        <a href="img/img1.jpg">
            <img alt=".." src="img/thumb1.jpg" />
        </a>
        <a href="img/img2.jpg">
            <img alt=".." src="img/thumb2.jpg" />
        </a>
        ...
    </lightgallery>
</template>
@Options({
    components: {
        Lightgallery,
    },
    methods: {
        onBeforeSlide: (detail) => {
            const { index, prevIndex } = detail;
            console.log(index, prevIndex);
        },
    },
})
export default class App extends Vue {}

Name: onInit

Description: Called only once when lightGallery is initialized

Detail:

NameTypeDescription
instanceLightGallerylightGallery plugin instance

Name: onBeforeOpen

Description: Called immediately before opening the gallery

Name: onAfterOpen

Description: Called immediately after opening the gallery

Name: onAfterAppendSlide

Description: Called when the slide content has been inserted into it's slide container.

Detail:

NameTypeDescription
indexnumberIndex of the slide

Name: onAfterAppendSubHtml

Description: Called when the sub-html content (ex : title/ description) has been appended into the slide.

Detail:

NameTypeDescription
indexnumberIndex of the slide

Name: onSlideItemLoad

Description: Called once the media inside the slide has been completely loaded .

Detail:

NameTypeDescription
delaynumberFirst time when an item is loaded lightGallery adds some delay for showing the completed item to show transition effect on item load Respect the delay when you use this event
indexnumberIndex of the slide

Name: onHasVideo

Description: Called when lightGallery detects video slide

Detail:

NameTypeDescription
hasPosterbooleanTrue if video has poster
html5VideoVideoSourceHTML5 video source if available

HTML5 video source = source: { src: string; type: string; }[]; attributes: HTMLVideoElement;

indexnumberIndex of the slide,
isFirstSlidebooleanTrue for first slide
srcstringVideo source

Name: onBeforeSlide

Description: Called immediately before each slide transition.

Detail:

NameTypeDescription
fromThumbbooleantrue if slide function called via thumbnail click
fromTouchbooleantrue if slide function called via touch event or mouse drag
indexnumberIndex of the slide
prevIndexnumberIndex of the previous slide

Name: onAfterSlide

Description: Called immediately after each slide transition.

Detail:

NameTypeDescription
fromThumbbooleantrue if slide function called via thumbnail click
fromTouchbooleantrue if slide function called via touch event or mouse drag
indexnumberIndex of the slide
prevIndexnumberIndex of the previous slide

Name: onBeforeNextSlide

Description: Called immediately before each "next" slide transition

Detail:

NameTypeDescription
fromTouchbooleantrue if slide function called via touch event or mouse drag
indexnumberIndex of the slide

Name: onBeforePrevSlide

Description: Called immediately before each "prev" slide transition

Detail:

NameTypeDescription
fromTouchbooleantrue if slide function called via touch event or mouse drag
indexnumberIndex of the slide

Name: onPosterClick

Description: Called when the video poster is clicked.

Name: onDragStart

Description: Called when the drag event to move to different slide starts.

Name: onDragMove

Description: Called periodically during the drag operation.

Name: onDragEnd

Description: Called when the user has finished the drag operation

Name: onContainerResize

Description: Called when the sub-html content (ex : title/ description) has been appended into the slide.

Detail:

NameTypeDescription
indexnumberIndex of the slide

Name: onBeforeClose

Description: Called immediately before the start of the close process.

Name: onAfterClose

Description: Called immediately once lightGallery is closed.

Detail:

NameTypeDescription
instanceLightGallerylightGallery plugin instance

Updating slides

lightGallery does not update slides automatically due to performance reasons. But you can easily update slides whenever needed by calling refresh method.

StackBlitz Demo

<template>
    <button v-on:click="updateSlides">Add new image</button>
    <lightgallery
        :settings="{ speed: 500, plugins: plugins }"
        :onInit="onInit"
        :onBeforeSlide="onBeforeSlide"
    >
        <a
            v-for="item in items"
            :key="item.id"
            :data-lg-size="item.size"
            className="gallery-item"
            :data-src="item.src"
        >
            <img className="img-responsive" :src="item.thumb" />
        </a>
    </lightgallery>
</template>

<script>
import Lightgallery from 'lightgallery/vue';
import lgZoom from 'lightgallery/plugins/zoom';
let lightGallery: any = null;
export default {
    name: 'App',
    components: {
        Lightgallery,
    },
    watch: {
        items(newVal, oldVal) {
            this.$nextTick(() => {
                lightGallery.refresh();
            });
        },
    },
    data: () => ({
        plugins: [lgZoom],
        items: [
            {
                id: '1',
                size: '1400-800',
                src: 'img-1.jpg',
                thumb: 'thumb-1.jpg',
            },
            {
                id: '2',
                size: '1400-800',
                src: 'img-2.jpg',
                thumb: 'thumb-2.jpg',
            },
        ],
    }),
    methods: {
        onInit: (detail) => {
            lightGallery = detail.instance;
        },
        updateSlides: function () {
            this.items = [
                ...this.items,
                {
                    id: '5',
                    size: '1400-800',
                    src: 'img-5.jpg',
                    thumb: 'thumb-5.jpg',
                }
            ];
            lightGallery.refresh();
        },
    },
};
</script>

Edit this page on GitHub