Image Gallery with Alpine.Js

This tailwind example is contributed by Maxim, on 20-Jan-2025. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Masonry, Image grid

Image gallery Other

Author Maxim

Tailwind v3.4 1.7k 4

Fork Fullscreen

<script src="//unpkg.com/alpinejs" defer></script>
<script>
    const imageGallery = [
        {
            "photo": "https://lqrs.com/site/assets/files/60812/s-pellegrino_700x700.jpeg",
            "thumbnail": "https://lqrs.com/site/assets/files/60812/s-pellegrino_500x500.jpeg",
            "alt": "S.Pellegrino Sparkling Mineral Water",
            "description": "S.Pellegrino Sparkling Mineral Water"
        },
        {
            "photo": "https://lqrs.com/site/assets/files/60812/77665f3a-f06e-43e5-ab35-9a1c32518122__cr0-0-1464-600_pt0_sx1464_700x700.jpg",
            "thumbnail": "https://lqrs.com/site/assets/files/60812/77665f3a-f06e-43e5-ab35-9a1c32518122__cr0-0-1464-600_pt0_sx1464_500x500.jpg",
            "alt": "S.Pellegrino Sparkling Mineral Water",
            "description": "S.Pellegrino Sparkling Mineral Water"
        }
    ];
</script>
<div x-data="{ imageGalleryOpened: false, imageGalleryActiveUrl: null, imageGalleryActiveDescription: null, imageGalleryActiveAlt: null, imageGalleryImageIndex: null, startX: null, startY: null, imageGallery: imageGallery,
		startTouch(event) { 
			this.startX = event.touches[0].clientX; this.startY = event.touches[0].clientY; 
		}, 
		moveTouch(event) { 
			if (!this.startX || !this.startY) { 
				return; 
			} 
			let endX = event.touches[0].clientX; let endY = event.touches[0].clientY; 
			let diffX = this.startX - endX; let diffY = this.startY - endY; 
			if (Math.abs(diffY) > Math.abs(diffX)) { 
				return; 
			} 
			if (diffX > 0) { 
				this.imageGalleryNext(); 
			} else { 
				this.imageGalleryPrev(); 
			} 
			this.startX = null; this.startY = null; 
		}, 
		imageGalleryOpen(event) { 
			let index = event.target.dataset.index; 
			this.imageGalleryImageIndex = index; 
			this.imageGalleryActiveUrl = this.imageGallery[index - 1].photo; 
			this.imageGalleryActiveDescription = this.imageGallery[index - 1].description; 
			this.imageGalleryActiveAlt = this.imageGallery[index - 1].alt; 
			this.imageGalleryOpened = true;
			document.body.classList.add('overflow-hidden');
		}, 
		imageGalleryClose() { 
			this.imageGalleryOpened = false;
			document.body.classList.remove('overflow-hidden');
			setTimeout(() => { 
				this.imageGalleryActiveUrl = null; 
				this.imageGalleryActiveDescription = null; 
				this.imageGalleryActiveAlt = null; 
			}, 300); 
		}, 
		imageGalleryNext() { 
			this.imageGalleryImageIndex = (this.imageGalleryImageIndex == this.imageGallery.length) ? 1 : (parseInt(this.imageGalleryImageIndex) + 1); 
			this.updateActiveImage(); 
		}, 
		imageGalleryPrev() { 
			this.imageGalleryImageIndex = (this.imageGalleryImageIndex == 1) ? this.imageGallery.length : (parseInt(this.imageGalleryImageIndex) - 1); 
			this.updateActiveImage(); 
		}, 
		updateActiveImage() { 
			this.imageGalleryActiveUrl = this.imageGallery[this.imageGalleryImageIndex - 1].photo; 
			this.imageGalleryActiveDescription = this.imageGallery[this.imageGalleryImageIndex - 1].description; 
			this.imageGalleryActiveAlt = this.imageGallery[this.imageGalleryImageIndex - 1].alt; 
		} 
	}" 
	@image-gallery-next.window="imageGalleryNext()" @image-gallery-prev.window="imageGalleryPrev()" @keyup.right.window="imageGalleryNext();" @keyup.left.window="imageGalleryPrev();" 
class="w-full h-full select-none">
	<div class="duration-1000 delay-300 opacity-0 select-none ease animate-fade-in-view" style="translate: none; rotate: none; scale: none; opacity: 1; transform: translate(0px, 0px);">
		<ul x-ref="gallery" id="gallery" class="grid grid-cols-2 gap-2 lg:grid-cols-3 mt-4">
			<template x-for="(image, index) in imageGallery" :key="index">
				<li><img x-on:click="imageGalleryOpen" :src="image.thumbnail" :alt="image.alt" :data-index="index + 1" class="object-cover select-none w-full h-full bg-gray-200 rounded cursor-zoom-in aspect-square" /></li>
			</template>
		</ul>
	</div>
	<template x-teleport="body">
		<div x-show="imageGalleryOpened" x-transition:enter="transition ease-in-out duration-300" x-transition:enter-start="opacity-0" x-transition:leave="transition ease-in-in duration-300" x-transition:leave-end="opacity-0" x-on:touchstart="startTouch" x-on:touchmove="moveTouch" @click="imageGalleryClose" @keydown.window.escape="imageGalleryClose" x-trap.inert.noscroll="imageGalleryOpened" class="fixed inset-0 z-[99] flex items-center justify-center backdrop-blur bg-stone-900/80 select-none cursor-zoom-out" x-cloak>
		<div class="relative flex flex-col items-center justify-center w-11/12 xl:w-4/5 h-11/12">
				<div @click.stop="imageGalleryPrev" class="absolute left-0 top-1/2 transform -translate-y-1/2 flex items-center justify-center text-white translate-x-10 rounded-full cursor-pointer xl:-translate-x-24 2xl:-translate-x-32 bg-white/10 w-14 h-14 hover:bg-white/20 hidden md:flex"><svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" /></svg>
				</div>
				<div class="relative flex flex-col items-center">
					<img x-show="imageGalleryOpened" x-transition:enter="transition ease-in-out duration-300" x-transition:enter-start="opacity-0 transform scale-50" x-transition:leave="transition ease-in-in duration-300" x-transition:leave-end="opacity-0 transform scale-50" class="object-contain object-center w-full max-h-screen select-none cursor-zoom-out rounded" :src="imageGalleryActiveUrl" :alt="imageGalleryActiveAlt" />
					<div class="w-full px-4 py-2 text-center text-white bg-black bg-opacity-75 rounded-b-lg" 
						 x-show="imageGalleryActiveDescription"><p x-text="imageGalleryActiveDescription" x-transition:enter="transition ease-in-out duration-300" x-transition:enter-start="opacity-0 transform scale-50" x-transition:leave="transition ease-in-in duration-300" x-transition:leave-end="opacity-0 transform scale-50"></p>
					</div>
				</div>
				<div @click.stop="imageGalleryNext" class="absolute right-0 top-1/2 transform -translate-y-1/2 flex items-center justify-center text-white -translate-x-10 rounded-full cursor-pointer xl:translate-x-24 2xl:translate-x-32 bg-white/10 w-14 h-14 hover:bg-white/20 hidden md:flex"><svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" /></svg>
				</div>
			</div>
		</div>
	</template>
</div>

Related Examples

default images playground
an images gallery

mingderwang

3 months ago

111
Pinterest-Style Masonry Gallery
A Pinterest-inspired masonry gallery featuring images of different heights in a seamless multi-column layout.

JUGENDRA GANGWAR

2 months ago

175
Creative Bento Gallery
A modern bento-style gallery combining differently sized image cards in a structured and visually engaging layout.

JUGENDRA GANGWAR

2 months ago

301
GALLERY

ORGIN_DREAMS

1 year ago

1.9k
dashboard

Anonymous

2 days ago

8
background animation
background animation

Anonymous

10 months ago

1.2k
Clean AI Workspace Dashboard
A pristine, light-mode SaaS interface designed for AI chat applications. It features a structured three-column layout: a navigation sidebar with a theme toggle, a central workspace showcasing a "Welcome" state with colorful quick-action entry cards and a floating input bar, and a right-hand sidebar for project context. The design relies on soft grays, subtle borders (border-gray-200), and ample whitespace to create a focused, professional productivity environment.

Hamza Atig

9 months ago

869
Interactive Order Report Chart with TailwindCSS and Chart.js
Create a stunning and interactive order report chart using HTML, TailwindCSS, and Chart.js. This chart combines bar and line graphs to visualize delivered, shipping, cancelled, and returned orders effectively. Perfect for dashboards and analytics pages with responsive design and clean aesthetics.

SHARIFUL ISLAM

1 year ago

2.5k
profile
user profile

gidy

1 year ago

1.1k
Terms of Service Page Template

Anonymous

1 year ago

2.9k
3d element

Omer fils ELENGA

10 months ago

821
Card post blog
Targetas para blog

Raul antonio de la cruz hernandez

10 months ago

705

Browse by topic

Explore components by Tags

Jump straight to the UI pattern you need.

Footer Header Card Article Avatar FAQ Banner Blog Breadcrumb Button Call to Action Form Carousel Contact us Error page Feature Gallery Hero Input Spinner Login Modal Pagination Pricing Profile

Can't find it?

Didn't find the component you were looking for?

Search across 3,000+ community-built components and grab the code in seconds.