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

712

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

Responsive layout with header, main body, aside (sidebar) and footer

Author:
Ahmed Malik

2 years ago

12.1k
Customer support chatbox
Floating chatbox

Author:
gmer33

2 years ago

11.5k
Responsive Light Mode Footer Component
This is a fully responsive and reusable light-mode footer component designed by ABNahid Agency. Built with a clean structure and optimized for modern web applications, this footer features essential sections, including About, Services, Contact, and Social Links. Ideal for personal portfolios, business websites, or startup platforms—plug and play in your React or HTML project.

Author:
Abdul Jabbar Al Nahid

3 months ago

415
Date picker
Date picker example using flatpickr library

Author:
Lîmåã M

2 years ago

16.9k
Google map iframe with tailwind

Author:
Kofi Osei

2 years ago

21.3k
News feed

Author:
Bunny

2 years ago

13.5k
Verify OTP
verification code

Author:
gidy

6 months ago

455
Ethical Fashion

Author:
Tanvir Hasan Bappy (Tanvir)

9 months ago

968
Modern website that provides software services
The website is a platform that offers software services to users, including access to open-source code, downloadable projects, and relevant documentation. The main objective is to support students, developers, and the open-source community by sharing free tools and source code examples.

Author:
Rathanak Phan

5 months ago

394
pricing
pricing

Author:
Omer fils ELENGA

4 months ago

447
Privacy Policy
Privacy Policy

Author:
Tanvir Hasan Bappy (Tanvir)

11 months ago

1.1k
Innovative Developer & Digital Creator
Innovative Developer

Author:
gidy

6 months ago

658

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

© 2025 TailwindFlex. All Rights Reserved.

v1.12