Home
Maxim
Image Gallery with Alpine.Js

Image Gallery with Alpine.Js

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

Image gallery Other

Author Maxim

1.2k

2

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

Tailwind CSS Navbar
Logo on the left. Main menu with a mega menu under "Services". Responsive design with a hamburger menu for mobile devices. Mega menu appears on hover for desktop and toggles on click for mobile.

Author:
KULDEEP

8 months ago

1.2k
pile carde scroll
pile carde scroll

Author:
Omer fils ELENGA

1 month ago

130
About Us Component

Author:
KULDEEP

8 months ago

1.3k
Frontend Template Open Source Code Website
This frontend template is designed for a website that provides software services and open-source code to users. It serves as a clean, modern UI for browsing, searching, and downloading open-source projects. Building with HTML, tailwindcss for CSS ,

Author:
Rathanak Phan

8 months ago

1.1k
Table
Table with image and status with pagination buttons

Author:
Abhiraj

1 year ago

2.5k
Innovative Developer & Digital Creator
Innovative Developer

Author:
gidy

9 months ago

908
Payment success page example

Author:
Anonymous

9 months ago

1.5k
Solo leveling 2
Animation & movie field,videos,games.

Author:
ORGIN_DREAMS

9 months ago

810
Heading
Subtle Script Background - Large, very light script font in the background ("Amazing") Light-to-Dark Gradient Heading - Main heading fades from light gray to dark gray Layered Typography - Secondary heading in medium weight for contrast Elegant Divider - With centered italic text Minimalist Border Accents - Thin borders in corners for sophistication Responsive Design - Scales beautifully on all devices

Author:
KULDEEP

8 months ago

707
Ripple Animation
Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are loading, loader,Author box, User information,Transitions

Author:
Tofayel Islam

2 months ago

345
App Hero Section With header

Author:
Abdul Baset Bappy

8 months ago

1.1k
Comparison Pricing Table Component
A responsive pricing table built with HTML and Tailwind CSS, comparing two plans (Free and Unlimited) with a clear feature checklist. Includes distinct styling for the premium plan and a toggle for monthly/annual pricing display.

Author:
Hamza Atig

10 months ago

1.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2026 TailwindFlex. All Rights Reserved.

v1.12