Gallery

What this component does

This module turns a set of links into a gallery. Each item should have: a full-size file (for the lightbox) and a thumbnail/preview (for the page grid).

Important

Prepare two versions of assets: thumb for previews and full for the lightbox. This keeps the page fast while still showing high-quality images in the viewer.

Component location

Files are located in src/components/layout/gallery. Inside you’ll find:

JS file with base settings / initialization.
HTML example snippet.
assets/ folder with LightGallery CSS files.

How to use

Add the attribute data-anim-gallery to the parent container that contains the gallery items. The module will auto-connect when it detects the attribute.

Gallery — basic wrapper

<div data-anim-gallery class="gallery">
	...
</div>

Markup example

The typical structure is: a link to the full image, and inside it — an <img> with the thumbnail.

Gallery — HTML example

<div data-anim-gallery class="gallery">

	<a href="img/img-full-1.jpg" class="gallery__image">
		<img alt="Preview" src="img/img-thumb-1.jpg" class="gallery__preview">
	</a>

	<a href="img/img-full-2.jpg" class="gallery__image">
		<img alt="Preview" src="img/img-thumb-2.jpg" class="gallery__preview">
	</a>

	...

</div>

Note

Extended features (download button, video/iframe support, thumbnails plugin, etc.) depend on LightGallery configuration and plugins. Use the official LightGallery docs to enable the exact controls you need.

Download

Want a ready-to-use gallery workflow with clean structure and automated component connection? Download the template and plug the Gallery into your page in minutes.

Download Animmaster Vite Template Save your time — start now

Component: Gallery LightGallery integration (lightbox + slideshow)

What this component does

Component location

How to use

Markup example

Download