keyboard_double_arrow_left
help Help & getting started
  1. Home
  2. Typography

lightGallery.

lightGallery is a lightweight, modular, JavaScript image and video lightbox gallery plugin. Click here

Thumbnails

JavaScript gallery with thumbnails.


<div class="row g-1" id="animated-thumbnails-gallery">
	<div class="col-lg-3">
		<a class="lg-item"
			data-src="assets/images/lightgallery/pic1.webp"
			data-sub-html="<h4>Photo by - <a href='javascript:void(0);'>Tobias Rademacher </a></h4><p> Location - <a href='javascript:void(0);'>Puezgruppe, Wolkenstein in Gröden, Südtirol, Italien</a>layers of blue.</p>">
			<img alt="layers of blue." class="img-responsive" src="assets/images/lightgallery/pic1.webp">
		</a>
	</div>
	<div class="col-lg-3">
		<a class="lg-item"
			data-src="assets/images/lightgallery/pic2.webp"
			data-sub-html="<h4>Photo by - <a href='javascript:void(0);'>Tobias Rademacher </a></h4><p> Location - <a href='javascript:void(0);'>Puezgruppe, Wolkenstein in Gröden, Südtirol, Italien</a>layers of blue.</p>">
			<img alt="layers of blue." class="img-responsive" src="assets/images/lightgallery/pic2.webp">
		</a>
	</div>
	<div class="col-lg-3">
		<a class="lg-item"
			data-src="assets/images/lightgallery/pic3.webp"
			data-sub-html="<h4>Photo by - <a href='javascript:void(0);'>Tobias Rademacher </a></h4><p> Location - <a href='javascript:void(0);'>Puezgruppe, Wolkenstein in Gröden, Südtirol, Italien</a>layers of blue.</p>">
			<img alt="layers of blue." class="img-responsive" src="assets/images/lightgallery/pic3.webp">
		</a>
	</div>
	<div class="col-lg-3">
		<a class="lg-item"
			data-src="assets/images/lightgallery/pic4.webp"
			data-sub-html="<h4>Photo by - <a href='javascript:void(0);'>Tobias Rademacher </a></h4><p> Location - <a href='javascript:void(0);'>Puezgruppe, Wolkenstein in Gröden, Südtirol, Italien</a>layers of blue.</p>">
			<img alt="layers of blue." class="img-responsive" src="assets/images/lightgallery/pic4.webp">
		</a>
	</div>
	<div class="col-lg-4">
		<a class="lg-item"
			data-src="assets/images/lightgallery/pic5.webp"
			data-sub-html="<h4>Photo by - <a href='javascript:void(0);'>Tobias Rademacher </a></h4><p> Location - <a href='javascript:void(0);'>Puezgruppe, Wolkenstein in Gröden, Südtirol, Italien</a>layers of blue.</p>">
			<img alt="layers of blue." class="img-responsive" src="assets/images/lightgallery/pic5.webp">
		</a>
	</div>
	<div class="col-lg-4">
		<a class="lg-item"
			data-src="assets/images/lightgallery/pic6.webp"
			data-sub-html="<h4>Photo by - <a href='javascript:void(0);'>Tobias Rademacher </a></h4><p> Location - <a href='javascript:void(0);'>Puezgruppe, Wolkenstein in Gröden, Südtirol, Italien</a>layers of blue.</p>">
			<img alt="layers of blue." class="img-responsive" src="assets/images/lightgallery/pic6.webp">
		</a>
	</div>
	<div class="col-lg-4">
		<a class="lg-item"
			data-src="assets/images/lightgallery/pic7.webp"
			data-sub-html="<h4>Photo by - <a href='javascript:void(0);'>Tobias Rademacher </a></h4><p> Location - <a href='javascript:void(0);'>Puezgruppe, Wolkenstein in Gröden, Südtirol, Italien</a>layers of blue.</p>">
			<img alt="layers of blue." class="img-responsive" src="assets/images/lightgallery/pic7.webp">
		</a>
	</div>
</div>

Responsive HTML5 Video Gallery

lightGallery supports YouTube, Vimeo, Wistia and all other types of HTML5 video formats. Such as MP4, WebM, Ogg, etc.


<div class="row g-1" id="gallery-videos-demo">
	<div class="col-lg-3">
		<a class="lg-item" data-src="//www.youtube.com/watch?v=EIUJfXk3_3w"
			data-poster="assets/images/lightgallery/pic9.webp"
			data-sub-html="<h4>Puffin Hunts Fish To Feed Puffling | Blue Planet II | BBC Earth</h4><p>On the heels of Planet Earth II's record-breaking Emmy nominations, BBC America presents stunning visual soundscapes from the series' amazing habitats.</p>">
			<img class="img-responsive" src="assets/images/lightgallery/pic9.webp"/>
		</a>
	</div>
	<div class="col-lg-3">
		<a class="lg-item" data-src="//vimeo.com/112836958"
			data-poster="assets/images/lightgallery/pic10.webp"
			data-sub-html="<h4>Nature</h4><p>Video by <a target='_blank' href='https://vimeo.com/charliekaye'>Charlie Kaye</a></p>">
			<img class="img-responsive" src="assets/images/lightgallery/pic10.webp"/>
		</a>
	</div>
	<div class="col-lg-3">
		<a class="lg-item" data-src="https://private-sharing.wistia.com/medias/mwhrulrucj"
			data-poster="assets/images/lightgallery/pic11.webp"
			data-sub-html="<h4>Thank You!</h4><p> Sample Wistia video </p>">
			<img class="img-responsive" src="assets/images/lightgallery/pic11.webp"/>
		</a>
	</div>
	<div class="col-lg-3">
		<a class="lg-item"
			data-video='{"source": [{"src":"assets/images/lightgallery/video1.mp4", "type":"video/mp4"}]}'
			data-poster="assets/images/lightgallery/pic8.webp"
			data-sub-html="<h4>'Peck Pocketed' by Kevin Herron | Disney Favorite</h4>">
			<img class="img-responsive" src="assets/images/lightgallery/pic8.webp" />
		</a>
	</div>
</div>

Bootstrap carousel

Bootstrap can be used for creating beautiful image galleries with thumbnails.


<div id="bootstrap-gallery-carousel" class="carousel slide">
	<div class="carousel-inner">
		<div class="carousel-item active">
			<a class="lg-item"
				data-src="assets/images/lightgallery/pic1.webp"
				data-sub-html="<h4>Photo by - <a href='javascript:void(0);'>Tobias Rademacher </a></h4><p> Location - <a href='javascript:void(0);'>Puezgruppe, Wolkenstein in Gröden, Südtirol, Italien</a>layers of blue.</p>">
				<img alt="layers of blue." class="img-responsive" src="assets/images/lightgallery/pic1.webp">
			</a>
		</div>
		<div class="carousel-item">
			<a class="lg-item"
				data-src="assets/images/lightgallery/pic2.webp"
				data-sub-html="<h4>Photo by - <a href='javascript:void(0);'>Tobias Rademacher </a></h4><p> Location - <a href='javascript:void(0);'>Puezgruppe, Wolkenstein in Gröden, Südtirol, Italien</a>layers of blue.</p>">
				<img alt="layers of blue." class="img-responsive" src="assets/images/lightgallery/pic1.webp">
			</a>
		</div>
		<div class="carousel-item">
			<a class="lg-item"
				data-src="assets/images/lightgallery/pic3.webp"
				data-sub-html="<h4>Photo by - <a href='javascript:void(0);'>Tobias Rademacher </a></h4><p> Location - <a href='javascript:void(0);'>Puezgruppe, Wolkenstein in Gröden, Südtirol, Italien</a>layers of blue.</p>">
				<img alt="layers of blue." class="img-responsive" src="assets/images/lightgallery/pic1.webp">
			</a>
		</div>
	</div>
	<button class="carousel-control-prev" type="button" data-bs-target="#bootstrap-gallery-carousel" data-bs-slide="prev">
		<span class="carousel-control-prev-icon" aria-hidden="true"></span>
		<span class="visually-hidden">Previous</span>
	</button>
	<button class="carousel-control-next" type="button" data-bs-target="#bootstrap-gallery-carousel" data-bs-slide="next">
		<span class="carousel-control-next-icon" aria-hidden="true"></span>
		<span class="visually-hidden">Next</span>
	</button>
</div>