Responsive Gallery Previewable Display with Fancybox Using Tailwind UI
A gallery utilizing FancyBox and Tailwind CSS can display images with an attractive and interactive previewable effect.
gallery
Loading component...
143 lines
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css">
<h1 class="text-center font-bold pt-10 text-3xl mb-4 text-gray-800">Responsive Image Previewable Display with Fancybox
</h1>
<div class="container items-center px-4 py-8 m-auto mt-5">
<div class="flex flex-wrap w-full md:max-w-7xl lg:max-w-5xl mx-auto justify-center">
<div class="max-w-md bg-white border border-gray-200 rounded-lg shadow">
<a href="#" data-fancybox data-src="https://lipsum.app/id/1/1600x1200"
data-caption="Noteworthy technology acquisitions 2021">
<img class="rounded-t-lg" src="https://lipsum.app/id/1/1600x1200" alt="" />
</a>
<div class="p-5">
<a href="#">
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Noteworthy technology
acquisitions 2021</h5>
</a>
<p class="mb-3 font-normal text-gray-700 dark:text-gray-400">Here are the biggest enterprise technology
acquisitions of 2021 so far, in reverse chronological order.</p>
<a href="#"
class="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
Read more
<svg class="w-3.5 h-3.5 ml-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 14 10">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M1 5h12m0 0L9 1m4 4L9 9" />
</svg>
</a>
</div>
</div>
<div class="w-full mt-10">
<div class="flex flex-wrap">
<div class="lg:w-1/4 md:w-1/2 w-full">
<a data-fancybox="gallery1"
data-src="https://images.unsplash.com/photo-1512845296467-183ccf124347?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80"
data-caption="Optional caption,<br />that can contain <em>HTML</em> code">
<img
src="https://images.unsplash.com/photo-1512845296467-183ccf124347?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80"
width="200" height="150" alt="" />
</a>
</div>
<div class="lg:w-1/4 md:w-1/2 w-full">
<a data-fancybox="gallery1"
data-src="https://images.unsplash.com/photo-1594862565524-acad491f0958?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=869&q=80">
<img
src="https://images.unsplash.com/photo-1594862565524-acad491f0958?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=869&q=80"
width="200" height="150" alt="" />
</a>
</div>
<div class="lg:w-1/4 md:w-1/2 w-full">
<a data-fancybox="gallery1"
data-src="https://images.unsplash.com/photo-1512845296467-183ccf124347?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80"
data-caption="Optional caption,<br />that can contain <em>HTML</em> code">
<img
src="https://images.unsplash.com/photo-1512845296467-183ccf124347?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80"
width="200" height="150" alt="" />
</a>
</div>
<div class="lg:w-1/4 md:w-1/2 w-full">
<a data-fancybox="gallery1"
data-src="https://images.unsplash.com/photo-1594862565524-acad491f0958?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=869&q=80">
<img
src="https://images.unsplash.com/photo-1594862565524-acad491f0958?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=869&q=80"
width="200" height="150" alt="" />
</a>
</div>
</div>
</div>
<div class="w-full mt-10">
<div class="flex flex-wrap">
<div class="lg:w-1/2 w-full">
<a class="group"
href="https://images.unsplash.com/photo-1463320898484-cdee8141c787?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80"
data-fancybox="gallery">
<img
src="https://images.unsplash.com/photo-1463320898484-cdee8141c787?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80"
alt="Thumbnail 1" class="h-auto max-w-full">
</a>
</div>
<div class="lg:w-1/2 w-full">
<a class="group"
href="https://images.unsplash.com/photo-1536882240095-0379873feb4e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=871&q=80"
data-fancybox="gallery">
<img
src="https://images.unsplash.com/photo-1536882240095-0379873feb4e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=871&q=80"
alt="Thumbnail 2" class="h-auto max-w-full">
</a>
</div>
<div class="lg:w-1/2 w-full">
<a class="group"
href="https://images.unsplash.com/photo-1536882240095-0379873feb4e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=871&q=80"
data-fancybox="gallery">
<img
src="https://images.unsplash.com/photo-1536882240095-0379873feb4e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=871&q=80"
alt="Thumbnail 2" class="h-auto max-w-full">
</a>
</div>
<div class="lg:w-1/2 w-full">
<a class="group"
href="https://images.unsplash.com/photo-1463320898484-cdee8141c787?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80"
data-fancybox="gallery">
<img
src="https://images.unsplash.com/photo-1463320898484-cdee8141c787?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80"
alt="Thumbnail 2" class="h-auto max-w-full">
</a>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
<script>
$(document).ready(function () {
$('[data-fancybox="gallery"]').fancybox({
thumbs: {
autoStart: true,
axis: "x",
type: "modern",
},
Toolbar: {
display: {
left: ["infobar"],
middle: [
"zoomIn",
"zoomOut",
"toggle1to1",
"rotateCCW",
"rotateCW",
"flipX",
"flipY",
],
right: ["slideshow", "thumbs", "close"],
},
},
});
});
</script>