Explore Our Templates 🚀
Light Gallery
lightGallery is a lightweight, modular, JavaScript image and video lightbox gallery plugin.
Basic Example
<div class="row">
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control"placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4">
<input type="text" class="form-control is-invalid" placeholder="Disabled" disabled>
</div>
</div>import React from 'react'
import { Col, Container, Row } from 'react-bootstrap'
import { Link } from 'react-router-dom';
// lightbox gallery
import LightGallery from 'lightgallery/react';
import lgFullscreen from 'lightgallery/plugins/fullscreen';
import lgAutoplay from 'lightgallery/plugins/autoplay';
import lgZoom from 'lightgallery/plugins/zoom';
import lgShare from 'lightgallery/plugins/share';
import lgComment from 'lightgallery/plugins/comment';
import lgVideo from 'lightgallery/plugins/video';
// css
import 'lightgallery/css/lightgallery.css';
import 'lightgallery/css/lg-fullscreen.css';
import 'lightgallery/css/lg-autoplay.css';
import 'lightgallery/css/lg-zoom.css';
import 'lightgallery/css/lg-share.css';
import 'lightgallery/css/lg-video.css';
//Images
import mock1 from '../../../Assets/dist/img/gallery/mock1.jpg'
import mock2 from '../../../Assets/dist/img/gallery/mock2.jpg'
import mock3 from '../../../Assets/dist/img/gallery/mock3.jpg'
import mock4 from '../../../Assets/dist/img/gallery/mock4.jpg'
import mock5 from '../../../Assets/dist/img/gallery/mock5.jpg'
import mock6 from '../../../Assets/dist/img/gallery/mock6.jpg'
import mock7 from '../../../Assets/dist/img/gallery/mock7.jpg'
import mock8 from '../../../Assets/dist/img/gallery/mock8.jpg'
import mock9 from '../../../Assets/dist/img/gallery/mock9.jpg'
import mock10 from '../../../Assets/dist/img/gallery/mock10.jpg'
import mock11 from '../../../Assets/dist/img/gallery/mock11.jpg'
import mock12 from '../../../Assets/dist/img/gallery/mock12.jpg'
import mock13 from '../../../Assets/dist/img/gallery/mock13.jpg'
import mock14 from '../../../Assets/dist/img/gallery/mock14.jpg'
import mock15 from '../../../Assets/dist/img/gallery/mock15.jpg'
const BasicExample = () => {
return (
<>
<Row className="hk-gallery">
<LightGallery
elementClassNames="row row-sm row-cols-xxl-6 row-cols-xl-5 row-cols-lg-3 row-cols-md-2 row-cols-1"
speed={500}
mode='lg-fade'
plugins={[lgFullscreen, lgAutoplay, lgZoom, lgShare, lgComment, lgVideo]}
thumbnail={false}
>
<Col lg={2} md={4} sm={4} xs={6} className="mb-3" data-src={mock1}>
<Link to="#" >
<div className="gallery-img" style={{ backgroundImage: `url(${mock1})` }} />
</Link>
</Col>
<Col lg={2} md={4} sm={4} xs={6} data-src="http://www.youtube.com/watch?v=Pq9yPrLWMyU" data-poster={mock2}>
<Link to="#" >
<div className="gallery-img gallery-video" style={{ backgroundImage: `url(${mock2})` }} />
<i className="ion ion-ios-play" />
</Link>
</Col>
<Col lg={2} md={4} sm={4} xs={6} data-src={mock3}>
<Link to="#" >
<div className="gallery-img" style={{ backgroundImage: `url(${mock3})` }} />
</Link>
</Col>
<Col lg={2} md={4} sm={4} xs={6} data-src="http://vimeo.com/1084537" data-poster={mock4}>
<Link to="#" >
<div className="gallery-img gallery-video" style={{ backgroundImage: `url(${mock4})` }} />
<i className="ion ion-ios-play" />
</Link>
</Col>
<Col lg={2} md={4} sm={4} xs={6} data-src={mock5}>
<Link to="#" >
<div className="gallery-img" style={{ backgroundImage: `url(${mock5})` }} />
</Link>
</Col>
<Col lg={2} md={4} sm={4} xs={6} data-src={mock6}>
<Link to="#" >
<div className="gallery-img" style={{ backgroundImage: `url(${mock6})` }} />
</Link>
</Col>
<Col lg={2} md={4} sm={4} xs={6} data-src={mock7}>
<Link to="#" >
<div className="gallery-img" style={{ backgroundImage: `url(${mock7})` }} />
</Link>
</Col>
<Col lg={2} md={4} sm={4} xs={6} data-src={mock8}>
<Link to="#" >
<div className="gallery-img" style={{ backgroundImage: `url(${mock8})` }} />
</Link>
</Col>
<Col lg={2} md={4} sm={4} xs={6} data-src={mock9}>
<Link to="#" >
<div className="gallery-img" style={{ backgroundImage: `url(${mock9})` }} />
</Link>
</Col>
<Col lg={2} md={4} sm={4} xs={6} data-src={mock10}>
<Link to="#" >
<div className="gallery-img" style={{ backgroundImage: `url(${mock10})` }} />
</Link>
</Col>
</LightGallery>
</Row>
<h6 className="mt-3 mb-2">Yesterday</h6>
<Row className="hk-gallery">
<LightGallery
elementClassNames="row row-sm row-cols-xxl-6 row-cols-xl-5 row-cols-lg-3 row-cols-md-2 row-cols-1"
speed={500}
mode='lg-fade'
plugins={[lgFullscreen, lgAutoplay, lgZoom, lgShare, lgComment, lgVideo]}
thumbnail={false}
>
<Col lg={2} md={4} sm={4} xs={6} data-src={mock11}>
<Link to="#" >
<div className="gallery-img" style={{ backgroundImage: `url(${mock11})` }} />
</Link>
</Col>
<Col lg={2} md={4} sm={4} xs={6} data-src="http://www.youtube.com/watch?v=Pq9yPrLWMyU" data-poster={mock12}>
<Link to="#" >
<div className="gallery-img" style={{ backgroundImage: `url(${mock12})` }} />
</Link>
</Col>
<Col lg={2} md={4} sm={4} xs={6} data-src={mock13}>
<Link to="#" >
<div className="gallery-img" style={{ backgroundImage: `url(${mock13})` }} />
</Link>
</Col>
<Col lg={2} md={4} sm={4} xs={6} data-src="http://vimeo.com/1084537" data-poster={mock14}>
<Link to="#" >
<div className="gallery-img" style={{ backgroundImage: `url(${mock14})` }} />
</Link>
</Col>
<Col lg={2} md={4} sm={4} xs={6} data-src={mock15}>
<Link to="#" >
<div className="gallery-img" style={{ backgroundImage: `url(${mock15})` }} />
</Link>
</Col>
</LightGallery>
</Row>
</>
)
}
export default BasicExampleimport React from 'react'
import { Col, Container, Row } from 'react-bootstrap'
import { Link } from 'react-router-dom';
// lightbox gallery
import LightGallery from 'lightgallery/react';
import lgFullscreen from 'lightgallery/plugins/fullscreen';
import lgAutoplay from 'lightgallery/plugins/autoplay';
import lgZoom from 'lightgallery/plugins/zoom';
import lgShare from 'lightgallery/plugins/share';
import lgComment from 'lightgallery/plugins/comment';
import lgVideo from 'lightgallery/plugins/video';
// css
import 'lightgallery/css/lightgallery.css';
import 'lightgallery/css/lg-fullscreen.css';
import 'lightgallery/css/lg-autoplay.css';
import 'lightgallery/css/lg-zoom.css';
import 'lightgallery/css/lg-share.css';
import 'lightgallery/css/lg-video.css';
//Images
import mock1 from '../../../Assets/dist/img/gallery/mock1.jpg'
import mock2 from '../../../Assets/dist/img/gallery/mock2.jpg'
import mock3 from '../../../Assets/dist/img/gallery/mock3.jpg'
import mock4 from '../../../Assets/dist/img/gallery/mock4.jpg'
import mock5 from '../../../Assets/dist/img/gallery/mock5.jpg'
import mock6 from '../../../Assets/dist/img/gallery/mock6.jpg'
import mock7 from '../../../Assets/dist/img/gallery/mock7.jpg'
import mock8 from '../../../Assets/dist/img/gallery/mock8.jpg'
import mock9 from '../../../Assets/dist/img/gallery/mock9.jpg'
import mock10 from '../../../Assets/dist/img/gallery/mock10.jpg'
import mock11 from '../../../Assets/dist/img/gallery/mock11.jpg'
import mock12 from '../../../Assets/dist/img/gallery/mock12.jpg'
import mock13 from '../../../Assets/dist/img/gallery/mock13.jpg'
import mock14 from '../../../Assets/dist/img/gallery/mock14.jpg'
import mock15 from '../../../Assets/dist/img/gallery/mock15.jpg'
const BasicExample = () => {
return (
<>
<Row className="hk-gallery">
<LightGallery
elementClassNames="row row-sm row-cols-xxl-6 row-cols-xl-5 row-cols-lg-3 row-cols-md-2 row-cols-1"
speed={500}
mode='lg-fade'
plugins={[lgFullscreen, lgAutoplay, lgZoom, lgShare, lgComment, lgVideo]}
thumbnail={false}
>
<Col lg={2} md={4} sm={4} xs={6} className="mb-3" data-src={mock1}>
<Link to="#" >
<div className="gallery-img" style={{ backgroundImage: `url(${mock1})` }} />
</Link>
</Col>
<Col lg={2} md={4} sm={4} xs={6} data-src="http://www.youtube.com/watch?v=Pq9yPrLWMyU" data-poster={mock2}>
<Link to="#" >
<div className="gallery-img gallery-video" style={{ backgroundImage: `url(${mock2})` }} />
<i className="ion ion-ios-play" />
</Link>
</Col>
<Col lg={2} md={4} sm={4} xs={6} data-src={mock3}>
<Link to="#" >
<div className="gallery-img" style={{ backgroundImage: `url(${mock3})` }} />
</Link>
</Col>
<Col lg={2} md={4} sm={4} xs={6} data-src="http://vimeo.com/1084537" data-poster={mock4}>
<Link to="#" >
<div className="gallery-img gallery-video" style={{ backgroundImage: `url(${mock4})` }} />
<i className="ion ion-ios-play" />
</Link>
</Col>
<Col lg={2} md={4} sm={4} xs={6} data-src={mock5}>
<Link to="#" >
<div className="gallery-img" style={{ backgroundImage: `url(${mock5})` }} />
</Link>
</Col>
<Col lg={2} md={4} sm={4} xs={6} data-src={mock6}>
<Link to="#" >
<div className="gallery-img" style={{ backgroundImage: `url(${mock6})` }} />
</Link>
</Col>
<Col lg={2} md={4} sm={4} xs={6} data-src={mock7}>
<Link to="#" >
<div className="gallery-img" style={{ backgroundImage: `url(${mock7})` }} />
</Link>
</Col>
<Col lg={2} md={4} sm={4} xs={6} data-src={mock8}>
<Link to="#" >
<div className="gallery-img" style={{ backgroundImage: `url(${mock8})` }} />
</Link>
</Col>
<Col lg={2} md={4} sm={4} xs={6} data-src={mock9}>
<Link to="#" >
<div className="gallery-img" style={{ backgroundImage: `url(${mock9})` }} />
</Link>
</Col>
<Col lg={2} md={4} sm={4} xs={6} data-src={mock10}>
<Link to="#" >
<div className="gallery-img" style={{ backgroundImage: `url(${mock10})` }} />
</Link>
</Col>
</LightGallery>
</Row>
<h6 className="mt-3 mb-2">Yesterday</h6>
<Row className="hk-gallery">
<LightGallery
elementClassNames="row row-sm row-cols-xxl-6 row-cols-xl-5 row-cols-lg-3 row-cols-md-2 row-cols-1"
speed={500}
mode='lg-fade'
plugins={[lgFullscreen, lgAutoplay, lgZoom, lgShare, lgComment, lgVideo]}
thumbnail={false}
>
<Col lg={2} md={4} sm={4} xs={6} data-src={mock11}>
<Link to="#" >
<div className="gallery-img" style={{ backgroundImage: `url(${mock11})` }} />
</Link>
</Col>
<Col lg={2} md={4} sm={4} xs={6} data-src="http://www.youtube.com/watch?v=Pq9yPrLWMyU" data-poster={mock12}>
<Link to="#" >
<div className="gallery-img" style={{ backgroundImage: `url(${mock12})` }} />
</Link>
</Col>
<Col lg={2} md={4} sm={4} xs={6} data-src={mock13}>
<Link to="#" >
<div className="gallery-img" style={{ backgroundImage: `url(${mock13})` }} />
</Link>
</Col>
<Col lg={2} md={4} sm={4} xs={6} data-src="http://vimeo.com/1084537" data-poster={mock14}>
<Link to="#" >
<div className="gallery-img" style={{ backgroundImage: `url(${mock14})` }} />
</Link>
</Col>
<Col lg={2} md={4} sm={4} xs={6} data-src={mock15}>
<Link to="#" >
<div className="gallery-img" style={{ backgroundImage: `url(${mock15})` }} />
</Link>
</Col>
</LightGallery>
</Row>
</>
)
}
export default BasicExample<template>
<lightgallery
:settings="galleyOptions"
class="row row-sm row-cols-xxl-6 row-cols-xl-5 row-cols-lg-3 row-cols-md-2 row-cols-1 hk-gallery"
>
<div
class="col-lg-2 col-md-4 col-sm-4 mb-3"
data-src="@/path/to/your/image.jpg"
>
<!-- for Images -->
<a href="#">
<div
class="gallery-img"
data-src="@/path/to/your/image.jpg"
style="background-image: url(path/to/your/image.jpg);"
>
</div>
</a>
<!-- for videos -->
<a href="#">
<div
class="gallery-img gallery-video"
data-src="videoUrl"
data-poster="@/path/to/your/image.jpg"
style="background-image: url(path/to/your/image.jpg);"
>
</div>
</a>
</div>
</lightgallery>
</template>
<script>
//lightgallery
import Lightgallery from "lightgallery/vue";
// import plugins for lightgallary
import lgFullscreen from "lightgallery/plugins/fullscreen";
import lgAutoplay from "lightgallery/plugins/autoplay";
import lgZoom from "lightgallery/plugins/zoom";
import lgShare from "lightgallery/plugins/share";
import lgComment from "lightgallery/plugins/comment";
import lgVideo from "lightgallery/plugins/video";
export default {
name: "Gallery",
components: {
Lightgallery,
},
data() {
return {
galleyOptions: {
plugins: [lgFullscreen, lgAutoplay, lgZoom, lgShare, lgComment, lgVideo],
speed: 500,
mode: "lg-fade",
thumbnail: false,
},
};
},
};
</script><template>
<lightgallery
:settings="galleyOptions"
class="row row-sm row-cols-xxl-6 row-cols-xl-5 row-cols-lg-3 row-cols-md-2 row-cols-1 hk-gallery"
>
<div
class="col-lg-2 col-md-4 col-sm-4 mb-3"
data-src="@/path/to/your/image.jpg"
>
<!-- for Images -->
<a href="#">
<div
class="gallery-img"
data-src="@/path/to/your/image.jpg"
style="background-image: url(path/to/your/image.jpg);"
>
</div>
</a>
<!-- for videos -->
<a href="#">
<div
class="gallery-img gallery-video"
data-src="videoUrl"
data-poster="@/path/to/your/image.jpg"
style="background-image: url(path/to/your/image.jpg);"
>
</div>
</a>
</div>
</lightgallery>
</template>
<script>
//lightgallery
import Lightgallery from "lightgallery/vue";
// import plugins for lightgallary
import lgFullscreen from "lightgallery/plugins/fullscreen";
import lgAutoplay from "lightgallery/plugins/autoplay";
import lgZoom from "lightgallery/plugins/zoom";
import lgShare from "lightgallery/plugins/share";
import lgComment from "lightgallery/plugins/comment";
import lgVideo from "lightgallery/plugins/video";
export default {
name: "Gallery",
components: {
Lightgallery,
},
data() {
return {
galleyOptions: {
plugins: [lgFullscreen, lgAutoplay, lgZoom, lgShare, lgComment, lgVideo],
speed: 500,
mode: "lg-fade",
thumbnail: false,
},
};
},
};
</script><script>
// @ts-nocheck
import { onMount } from "svelte";
//light gallery plugins
import LightGallery from "lightgallery";
import lgFullscreen from "lightgallery/plugins/fullscreen";
import lgAutoplay from "lightgallery/plugins/autoplay";
import lgZoom from "lightgallery/plugins/zoom";
import lgShare from "lightgallery/plugins/share";
import lgComment from "lightgallery/plugins/comment";
import lgVideo from "lightgallery/plugins/video";
//Image
import mock1 from '../../assets/img/gallery/mock1.jpg';
import mock2 from '../../assets/img/gallery/mock2.jpg';
import mock3 from '../../assets/img/gallery/mock3.jpg';
import mock4 from '../../assets/img/gallery/mock4.jpg';
import mock5 from '../../assets/img/gallery/mock5.jpg';
import mock6 from '../../assets/img/gallery/mock6.jpg';
import mock7 from '../../assets/img/gallery/mock7.jpg';
import mock8 from '../../assets/img/gallery/mock8.jpg';
import mock9 from '../../assets/img/gallery/mock9.jpg';
import mock10 from '../../assets/img/gallery/mock10.jpg';
import mock11 from '../../assets/img/gallery/mock11.jpg';
import mock12 from '../../assets/img/gallery/mock12.jpg';
import mock13 from '../../assets/img/gallery/mock13.jpg';
import mock14 from '../../assets/img/gallery/mock14.jpg';
import mock15 from '../../assets/img/gallery/mock15.jpg';
const galleryData = [
{
title: "22 October",
images: [
{ id: 1, type: 'image', src: mock1 },
{ id: 2, type: 'video', src: "https://www.youtube.com/watch?v=BvXR97eR1QE", poster: mock2 },
{ id: 3, type: 'image', src: mock3 },
{ id: 4, type: 'video', src: 'http://vimeo.com/1084537', poster: mock4 },
{ id: 5, type: 'image', src: mock5 },
{ id: 6, type: 'image', src: mock6 },
{ id: 7, type: 'image', src: mock7 },
{ id: 8, type: 'image', src: mock8 },
{ id: 9, type: 'image', src: mock10 },
]
},
{
title: "Yesterday",
images: [
{ id: 1, type: 'image', src: mock9 },
{ id: 2, type: 'video', src: 'https://www.youtube.com/watch?v=BvXR97eR1QE', poster: mock12 },
{ id: 3, type: 'image', src: mock13 },
{ id: 4, type: 'image', src: mock14 },
{ id: 5, type: 'image', src: mock15 },
]
},
]
let galleyOptions = {
plugins: [lgFullscreen, lgAutoplay, lgZoom, lgShare, lgComment, lgVideo],
speed: 500,
mode: "lg-fade",
thumbnail: false,
};
// Initialize LightGallery
let galleryElements = [];
onMount(() => {
galleryElements.forEach((el) => {
LightGallery(el, galleyOptions);
});
});
</script>
<div>
{#each galleryData as data, index}
<div class="container py-3">
<h4 class="my-3">{data.title}</h4>
<div class="row">
<div
bind:this={galleryElements[index]}
class="row row-sm row-cols-xxl-6 row-cols-xl-5 row-cols-lg-3 row-cols-md-2 row-cols-1 hk-gallery"
>
{#each data.images as elem}
<div class="col-lg-2 col-md-4 col-sm-4 mb-3" data-src={elem.src}>
<a href="#">
{#if elem.type === "image"}
<div
class="gallery-img"
data-sub-html="#caption"
data-src={elem.src}
style="background-image: url({elem.src})"
></div>
{:else}
<div
class="gallery-img gallery-video"
data-sub-html="#caption"
data-src={elem.src}
data-poster={elem.poster}
style="background-image: url({elem.poster})"
></div>
{/if}
</a>
</div>
{/each}
</div>
</div>
</div>
{/each}
</div>