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

1k

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

Best Chatting dashboard
create a modern WhatsApp-like chat dashboard with 3D effects, animations, and a sleek design. This will be a static view showcasing the interface with Nicole Shalom as the developer.

Author:
Nicole Shalom

8 months ago

895
chat bar
live chat

Author:
gidy

8 months ago

1.2k
Popover
basic popover example

Author:
Dipti narayan

2 years ago

13.1k
Native HTML Accordion
native html accordion summary details

Author:
Cristian

1 year ago

2.4k
Food Ordering Dashboard
A responsive user interface for selecting and ordering your favorite meals. The dashboard allows users to browse food categories, view dish details, and place orders with ease.

Author:
Muhammad Umair Arshad

8 months ago

1.1k
blog component
good blog

Author:
Uwera Dorcas

8 months ago

746
Taskify Premium Task Management FREE
Website Task management modern and responsif

Author:
Alif Bima Pradana

5 days ago

24
magic card
by salvator

Author:
Baraka Salvator

8 months ago

932
Dark dashboard
Dark dashboard

Author:
Tanvir Hasan Bappy (Tanvir)

1 month ago

72
Your upside-down text

Author:
Isabella Kowalski

3 years ago

13.2k
Tag Input field
This code creates a dynamic tag input field using HTML, JavaScript, and TailwindCSS. Users can type tags into the input field and press "Enter" to add them. Each tag is displayed inside the input field as a styled container with a remove button. The tag input is limited to a maximum of 5 tags, and an error message is shown if the limit is exceeded. Users can remove tags to free up space for new ones. The input field and tags are styled using TailwindCSS, ensuring a clean and responsive design.

Author:
Ranit Saha

1 year ago

2k
Avant & Après
Avant & Après

Author:
Omer fils ELENGA

2 months ago

298

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