Image and video gallery for 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="img1" src="img/thumb1.jpg" />
        </a>
        <a href="img/img2.jpg">
            <img alt="img2" 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 styles 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="img1" src="img/thumb1.jpg" />
        </a>
        <a href="img/img2.jpg">
            <img alt="img2" 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:

Name Type Description
instance LightGallery lightGallery 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:

Name Type Description
index number Index of the slide

Name: onAfterAppendSubHtml

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

Detail:

Name Type Description
index number Index of the slide

Name: onSlideItemLoad

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

Detail:

Name Type Description
delay number For the first slide, lightGallery adds some delay for displaying the loaded slide item. This delay is required for the transition effect when the slide item is displayed Respect the delay when you use this event
index number Index of the slide
isFirstSlide boolean

Name: onHasVideo

Description: Called when lightGallery detects video slide

Detail:

Name Type Description
hasPoster boolean True if video has poster
html5Video VideoSource HTML5 video source if available

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

index number Index of the slide,
src string Video source

Name: onBeforeSlide

Description: Called immediately before each slide transition.

Detail:

Name Type Description
fromThumb boolean true if slide function called via thumbnail click
fromTouch boolean true if slide function called via touch event or mouse drag
index number Index of the slide
prevIndex number Index of the previous slide

Name: onAfterSlide

Description: Called immediately after each slide transition.

Detail:

Name Type Description
fromThumb boolean true if slide function called via thumbnail click
fromTouch boolean true if slide function called via touch event or mouse drag
index number Index of the slide
prevIndex number Index of the previous slide

Name: onBeforeNextSlide

Description: Called immediately before each "next" slide transition

Detail:

Name Type Description
fromTouch boolean true if slide function called via touch event or mouse drag
index number Index of the slide

Name: onBeforePrevSlide

Description: Called immediately before each "prev" slide transition

Detail:

Name Type Description
fromTouch boolean true if slide function called via touch event or mouse drag
index number Index 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 lightGallery container has been resized.

Detail:

Name Type Description
index number Index 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:

Name Type Description
instance LightGallery lightGallery plugin instance

Name: onRotateLeft

Description: Called when the image is rotated in anticlockwise direction

Detail:

Name Type Description
index number Index of the slide

Name: onRotateRight

Description: Called when the image is rotated in clockwise direction

Detail:

Name Type Description
index number Index of the slide

Name: onFlipHorizontal

Description: Called when the image is flipped horizontally

Detail:

Name Type Description
index number Index of the slide

Name: onFlipVertical

Description: Called when the image is flipped vertically

Detail:

Name Type Description
index number Index of the slide

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

← Image and video gallery for React
Image and video gallery for Angular →