Introduction of Tailwind Image Gallery Grid
Today we will make an tailwind image gallery grid with on-click functionality with the help of HTML, Tailwind, and Alpine.js. In this image gallery, you will see how many images will be shown on a page. When you click on any image, that image will show up on the full screen. A button to slide left or right will appear. This is very useful, as you can use it to store your personal images in this gallery.
You can also use it to take ideas from here and make your own project like this with your own creativity. Which will increase your practice and also your knowledge about some more concepts of code in detail.
Let’s start making this by doing simple code with a basic concept and follow the steps one by one carefully. The code will not be very complicated. A fresher or an experienced guy can both understand it without any problem. If you’ll have to face any problems. Then you can contact us through the details given in the footer of the web page.
HTML
First, we will create the structure of the Tailwind image gallery grid with the help of HTML. In this first step, we will write the heading of the image gallery in the h1 tag. Then we will make a parent div in which all the divs of images will be inserted. Then the images will be inserted in each div in the parent div in the img tag. At the end, we will also make a slide button.
In this code, the tags used are the h1 tag (which is used to write the heading of any topic) and the img tag (which is used to insert the image in this tag).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/dist/output.css" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://kit.fontawesome.com/0f01d8d2a0.js" crossorigin="anonymous"></script>
<title>Document</title>
</head>
<body class="bg-black">
<head>
<script src="//unpkg.com/alpinejs" defer></script>
</head>
<body>
<section class="px-4 py-24 mx-auto max-w-7xl">
<div class="w-full mx-auto text-left md:w-11/12 xl:w-9/12 md:text-center">
<h1 class="mb-6 text-4xl font-extrabold leading-none tracking-normal text-gray-900 md:text-6xl md:tracking-tight">
<span class="block w-full text-transparent bg-clip-text bg-gradient-to-r from-green-400 to-purple-500 lg:inline">Image gallery</span>
</h1>
</div>
</section>
<section>
<div x-data="{
imageGalleryOpened: false,
imageGalleryActiveUrl: null,
imageGalleryImageIndex: null,
imageGalleryOpen(event) {
this.imageGalleryImageIndex = event.target.dataset.index;
this.imageGalleryActiveUrl = event.target.src;
this.imageGalleryOpened = true;
},
imageGalleryClose() {
this.imageGalleryOpened = false;
setTimeout(() => this.imageGalleryActiveUrl = null, 300);
},
imageGalleryNext(){
if(this.imageGalleryImageIndex == this.$refs.gallery.childElementCount){
this.imageGalleryImageIndex = 1;
} else {
this.imageGalleryImageIndex = parseInt(this.imageGalleryImageIndex) + 1;
}
this.imageGalleryActiveUrl = this.$refs.gallery.querySelector('[data-index=\'' + this.imageGalleryImageIndex + '\']').src;
},
imageGalleryPrev() {
if(this.imageGalleryImageIndex == 1){
this.imageGalleryImageIndex = this.$refs.gallery.childElementCount;
} else {
this.imageGalleryImageIndex = parseInt(this.imageGalleryImageIndex) - 1;
}
this.imageGalleryActiveUrl = this.$refs.gallery.querySelector('[data-index=\'' + this.imageGalleryImageIndex + '\']').src;
}
}" @image-gallery-next.window="imageGalleryNext()" @image-gallery-prev.window="imageGalleryPrev()" @keyup.right.window="imageGalleryNext();" @keyup.left.window="imageGalleryPrev();" x-init="
imageGalleryPhotos = $refs.gallery.querySelectorAll('img');
for(let i=0; i<imageGalleryPhotos.length; i++){
imageGalleryPhotos[i].setAttribute('data-index', i+1);
}
" class="w-full h-full select-none">
<div class="max-w-6xl mx-auto 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-5 lg:grid-cols-5">
<li><img x-on:click="imageGalleryOpen" src="https://images.pexels.com/photos/2356059/pexels-photo-2356059.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" class="object-cover select-none w-full h-auto bg-gray-200 rounded cursor-zoom-in aspect-[5/6] lg:aspect-[2/3] xl:aspect-[3/4]" alt="photo gallery image 01"></li>
<li><img x-on:click="imageGalleryOpen" src="https://images.pexels.com/photos/3618162/pexels-photo-3618162.jpeg" class="object-cover select-none w-full h-auto bg-gray-200 rounded cursor-zoom-in aspect-[5/6] lg:aspect-[2/3] xl:aspect-[3/4]" alt="photo gallery image 07"></li>
<li><img x-on:click="imageGalleryOpen" src="https://images.unsplash.com/photo-1689217634234-38efb49cb664?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1887&q=80" class="object-cover select-none w-full h-auto bg-gray-200 rounded cursor-zoom-in aspect-[5/6] lg:aspect-[2/3] xl:aspect-[3/4]" alt="photo gallery image 08"></li>
<li><img x-on:click="imageGalleryOpen" src="https://images.unsplash.com/photo-1520350094754-f0fdcac35c1c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80" class="object-cover select-none w-full h-auto bg-gray-200 rounded cursor-zoom-in aspect-[5/6] lg:aspect-[2/3] xl:aspect-[3/4]" alt="photo gallery image 09"></li>
<li><img x-on:click="imageGalleryOpen" src="https://cdn.devdojo.com/images/june2023/mountains-10.jpeg" class="object-cover select-none w-full h-auto bg-gray-200 rounded cursor-zoom-in aspect-[5/6] lg:aspect-[2/3] xl:aspect-[3/4]" alt="photo gallery image 10"></li>
<li><img x-on:click="imageGalleryOpen" src="https://cdn.devdojo.com/images/june2023/mountains-06.jpeg" class="object-cover select-none w-full h-auto bg-gray-200 rounded cursor-zoom-in aspect-[5/6] lg:aspect-[2/3] xl:aspect-[3/4]" alt="photo gallery image 06"></li>
<li><img x-on:click="imageGalleryOpen" src="https://images.pexels.com/photos/1891234/pexels-photo-1891234.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" class="object-cover select-none w-full h-auto bg-gray-200 rounded cursor-zoom-in aspect-[5/6] lg:aspect-[2/3] xl:aspect-[3/4]" alt="photo gallery image 07"></li>
<li><img x-on:click="imageGalleryOpen" src="https://images.unsplash.com/photo-1529655683826-aba9b3e77383?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1965&q=80" class="object-cover select-none w-full h-auto bg-gray-200 rounded cursor-zoom-in aspect-[5/6] lg:aspect-[2/3] xl:aspect-[3/4]" alt="photo gallery image 08"></li>
<li><img x-on:click="imageGalleryOpen" src="https://images.pexels.com/photos/4256852/pexels-photo-4256852.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" class="object-cover select-none w-full h-auto bg-gray-200 rounded cursor-zoom-in aspect-[5/6] lg:aspect-[2/3] xl:aspect-[3/4]" alt="photo gallery image 09"></li>
<li><img x-on:click="imageGalleryOpen" src="https://images.unsplash.com/photo-1541795083-1b160cf4f3d7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1887&q=80" class="object-cover select-none w-full h-auto bg-gray-200 rounded cursor-zoom-in aspect-[5/6] lg:aspect-[2/3] xl:aspect-[3/4]" alt="photo gallery image 10"></li>
</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" @click="imageGalleryClose" @keydown.window.escape="imageGalleryClose" x-trap.inert.noscroll="imageGalleryOpened" class="fixed inset-0 z-[99] flex items-center justify-center bg-black bg-opacity-50 select-none cursor-zoom-out" x-cloak>
<div class="relative flex items-center justify-center w-11/12 xl:w-4/5 h-11/12">
<div @click="$event.stopPropagation(); $dispatch('image-gallery-prev')" class="absolute left-0 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">
<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>
<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 h-full select-none cursor-zoom-out" :src="imageGalleryActiveUrl" alt="" style="display: none;">
<div @click="$event.stopPropagation(); $dispatch('image-gallery-next');" class="absolute right-0 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">
<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>
</section>
</main>
</body>
</body>
</html>TailwindCss
After making the structure of this Tailwind image gallery, we will now design it through Tailwind (a framework of CSS used to design websites or make them responsive). In this first section, we will give styling to the heading of this page. Now we will move toward the main content of the image gallery given the parent div.
Now we will give styling to the parent div and subdiv of images, like adjusting the image divs in the right manner.
@tailwind base; @tailwind components; @tailwind utilities;
Alpine.js
After making the whole design of the tailwind image gallery grid, now it’s time to make it workable to behave like a real image gallery. In this first step, we will target the image div, where when the user clicks on a particular image, that image will be shown on the full screen by using the “onclick” method, and we also have to make the slide button visible while clicking on the image.
In the slide button, we will target the button in Alpine.js and then make it slide. When the user clicks on the button, the image will slide left or right.
Output of Tailwind Image Gallery Grid
Finally, we made the complete, workable anime image gallery TailwindCss (Tailwind Css Image Gallery) with the help of Tailwind and HTML by following the simple code step by step to clear all the basic concepts of Tailwind. This is a very important and usable project for the user; you can use it to store your personal memories. If you want to download the source code, then click on the button given below.
You can also check:
For more explanation, click on the link
3 Responses
Nice bro i am also anime lover
Anime Image Gallery with TailwindCss (Source Code) – LayakCoder
This Tailwind image gallery grid tutorial was exactly what I needed! The instructions were clear, and the on-click functionality works perfectly. Thanks for making it so beginner-friendly!