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

200

1

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

Glassmorphism form

Author:
Sophia Baker

2 years ago

16.4k
Contact Form Component
A multi-step, responsive contact form with a modern dark-themed design. The form includes four steps: name, email, phone number, and message. It features a side panel with contact information and a sleek, gradient-styled interface using Tailwind CSS.

Author:
Muhammad Umair Arshad

3 weeks ago

83
3D Animated Image Gallery
3D Animated Image Gallery

Author:
Samuel Abera

1 year ago

6.7k
Terms of Service Page Template

Author:
Anonymous

3 months ago

1k
Notifications
Toast Notifications are lightweight and customizable components for displaying short messages or alerts. They are perfect for feedback on user actions, such as form submissions or system updates. Supports different types of notifications (success, error, warning, info). Automatically hides after a specified timeout. Option to include action buttons or close icons. Customizable styles, animation, and position on the screen.

Author:
Abhiraj

3 months ago

440
Image Grid
The layout is designed to showcase various categories or items using images and descriptive text. Each grid item features a high-quality image and a centered text overlay with a semi-transparent background

Author:
R Thapa

1 year ago

12.9k
Responsive Multi-Tier Pricing Table Component
flexible and responsive 3-tier pricing table component built with HTML and Tailwind CSS. Features distinct visual styles for different plans (e.g., highlighting a recommended option), adapts to various screen sizes, and supports both light and dark color schemes. Uses generic placeholders for easy adaptation to any product or service.

Author:
Hamza Atig

6 days ago

20
Your upside-down text

Author:
Isabella Kowalski

2 years ago

12.2k
Chat template
fullscreen chat template suitable for mobile devices

Author:
Manon Daniel

2 years ago

16.5k
nft card
nft card

Author:
5upreme505

6 months ago

1.1k
Image - Figure with figcaption design

Author:
Maxim

3 months ago

282
blockquote

Author:
Freja Jensen

2 years ago

9.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ 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

© 2025 TailwindFlex. All Rights Reserved.

v1.1