Lightgallery Js
Full featured javascript lightbox gallery, No dependencies.
How to install?
Add script right before </body> tag, and initialize Lightgallery js.
<!-- Plugin js -->
<script src="src/plugins/lightgallery.js/dist/js/lightgallery.min.js"></script>
<script src="src/plugins/lightgallery.js/demo/js/lg-thumbnail.min.js"></script>
<script src="src/plugins/lightgallery.js/demo/js/lg-video.js"></script>
<!-- Theme js -->
<script src="src/js/theme.js"></script>
If you want to edit lightgallery.js open theme.js and edit in this function myLightgallery();
Example gallery
Logo Design
Branding
Web Development
Web
Graphic Design
Graphic
Video Marketing
Video
Photography
Photo
Apps Development
Apps
<div x-data="{ tab: 'all' }" class="container xl:max-w-6xl mx-auto px-4">
<!-- navigation -->
<div class="space-x-5 text-center">
<button @click.prevent="tab = 'all'" :class="{ 'text-blue-700' : tab === 'all' }" class="inline-block bg-transparent border-0 outline-none mb-6 md:mb-12 focus:text-blue-700 focus:ring-0 focus:outline-none text-blue-700">
All
</button>
<button @click.prevent="tab = 'web'" :class="{ 'text-blue-700' : tab === 'web' }" class="inline-block bg-transparent border-0 outline-none mb-6 md:mb-12 focus:text-blue-700 focus:ring-0 focus:outline-none">
Web
</button>
<button @click.prevent="tab = 'graphic'" :class="{ 'text-blue-700' : tab === 'graphic' }" class="inline-block bg-transparent border-0 outline-none mb-6 md:mb-12 focus:text-blue-700 focus:ring-0 focus:outline-none">
Graphic
</button>
<button @click.prevent="tab = 'photo'" :class="{ 'text-blue-700' : tab === 'photo' }" class="inline-block bg-transparent border-0 outline-none mb-6 md:mb-12 focus:text-blue-700 focus:ring-0 focus:outline-none">
Photograpy
</button>
</div><!-- end navigation -->
<!-- Portfolio Content -->
<div class="flex flex-wrap flex-row -mx-4 lightgallery-thumbnail">
<figure x-show="tab === 'graphic' || tab === 'photo' || tab === 'all'" data-src="src/img-min/project/project_1.jpg" class="flex-shrink max-w-full px-4 w-full sm:w-1/2 lg:w-1/3 group" data-sub-html="title images">
<div class="relative overflow-hidden cursor-pointer mb-6">
<img class="block w-full h-auto transform duration-500 hover:scale-125" src="src/img-min/project/project_1.jpg" alt="Image Description">
<figcaption class="absolute inset-x-0 bottom-0 h-20 transition-opacity duration-500 ease-in opacity-0 group-hover:opacity-100 overflow-hidden px-4 py-2 text-gray-100 bg-blue-700 text-center">
<h3 class="text-base leading-normal font-semibold my-1 text-gray-100">Logo Design</h3>
<small class="d-block">Branding</small>
</figcaption>
</div>
</figure>
<figure x-show="tab === 'web' || tab === 'all'" data-src="src/img-min/project/project_2.jpg" class="flex-shrink max-w-full px-4 w-full sm:w-1/2 lg:w-1/3 group" data-sub-html="title images">
<div class="relative overflow-hidden cursor-pointer mb-6">
<img class="block w-full h-auto transform duration-500 hover:scale-125" src="src/img-min/project/project_2.jpg" alt="Image Description">
<figcaption class="absolute inset-x-0 bottom-0 h-20 transition-opacity duration-500 ease-in opacity-0 group-hover:opacity-100 overflow-hidden px-4 py-2 text-gray-100 bg-blue-700 text-center">
<h3 class="text-base leading-normal font-semibold my-1 text-gray-100">Web Development</h3>
<small class="d-block">Web</small>
</figcaption>
</div>
</figure>
<figure x-show="tab === 'graphic' || tab === 'all'" data-src="src/img-min/project/project_3.jpg" class="flex-shrink max-w-full px-4 w-full sm:w-1/2 lg:w-1/3 group" data-sub-html="title images">
<div class="relative overflow-hidden cursor-pointer mb-6">
<img class="block w-full h-auto transform duration-500 hover:scale-125" src="src/img-min/project/project_3.jpg" alt="Image Description">
<figcaption class="absolute inset-x-0 bottom-0 h-20 transition-opacity duration-500 ease-in opacity-0 group-hover:opacity-100 overflow-hidden px-4 py-2 text-gray-100 bg-blue-700 text-center">
<h3 class="text-base leading-normal font-semibold my-1 text-gray-100">Graphic Design</h3>
<small class="d-block">Graphic</small>
</figcaption>
</div>
</figure>
<figure x-show="tab === 'graphic' || tab === 'all'" data-src="src/img-min/project/project_4.jpg" class="flex-shrink max-w-full px-4 w-full sm:w-1/2 lg:w-1/3 group" data-sub-html="title images">
<div class="relative overflow-hidden cursor-pointer mb-6">
<img class="block w-full h-auto transform duration-500 hover:scale-125" src="src/img-min/project/project_4.jpg" alt="Image Description">
<figcaption class="absolute inset-x-0 bottom-0 h-20 transition-opacity duration-500 ease-in opacity-0 group-hover:opacity-100 overflow-hidden px-4 py-2 text-gray-100 bg-blue-700 text-center">
<h3 class="text-base leading-normal font-semibold my-1 text-gray-100">Video Marketing</h3>
<small class="d-block">Video</small>
</figcaption>
</div>
</figure>
<figure x-show="tab === 'photo' || tab === 'all'" data-src="src/img-min/project/project_5.jpg" class="flex-shrink max-w-full px-4 w-full sm:w-1/2 lg:w-1/3 group" data-sub-html="title images">
<div class="relative overflow-hidden cursor-pointer mb-6">
<img class="block w-full h-auto transform duration-500 hover:scale-125" src="src/img-min/project/project_5.jpg" alt="Image Description">
<figcaption class="absolute inset-x-0 bottom-0 h-20 transition-opacity duration-500 ease-in opacity-0 group-hover:opacity-100 overflow-hidden px-4 py-2 text-gray-100 bg-blue-700 text-center">
<h3 class="text-base leading-normal font-semibold my-1 text-gray-100">Photography</h3>
<small class="d-block">Photo</small>
</figcaption>
</div>
</figure>
<figure x-show="tab === 'web' || tab === 'all'" data-src="src/img-min/project/project_6.jpg" class="flex-shrink max-w-full px-4 w-full sm:w-1/2 lg:w-1/3 group" data-sub-html="title images">
<div class="relative overflow-hidden cursor-pointer mb-6">
<img class="block w-full h-auto transform duration-500 hover:scale-125" src="src/img-min/project/project_6.jpg" alt="Image Description">
<figcaption class="absolute inset-x-0 bottom-0 h-20 transition-opacity duration-500 ease-in opacity-0 group-hover:opacity-100 overflow-hidden px-4 py-2 text-gray-100 bg-blue-700 text-center">
<h3 class="text-base leading-normal font-semibold my-1 text-gray-100">Apps Development</h3>
<small class="d-block">Apps</small>
</figcaption>
</div>
</figure>
</div>
</div>
Popup video
Story Behind Our Digital Marketing Agency
Upgency is the leading digital marketing agency in New York. We are striving to provide integrated digital marketing solutions.
Read Story
<!-- =========={ VIDEO }========== -->
<div id="video" class="relative py-20 md:py-24 bg-white dark:bg-gray-800">
<div class="container xl:max-w-6xl mx-auto px-4">
<div class="flex flex-wrap flex-row -mx-4">
<!-- content -->
<div class="flex-shrink max-w-full px-4 w-full lg:w-1/2 lg:order-2 self-center">
<div class="mb-12 lg:mb-0 lg:ml-12 lg:pr-6">
<h2 class="text-3xl leading-normal font-bold text-gray-800 dark:text-gray-100 mb-3">Story Behind Our Digital Marketing Agency</h2>
<p class="text-gray-600 leading-relaxed font-light text-xl mx-auto pb-2 mb-12">Upgency is the leading digital marketing agency in New York. We are striving to provide integrated digital marketing solutions.</p>
<!-- button -->
<a href="#" class="py-3 px-5 -ml-1 rounded-md leading-5 text-gray-100 bg-blue-700 border border-blue-700 hover:text-white hover:bg-blue-800 hover:ring-0 hover:border-blue-800 focus:bg-blue-800 focus:border-blue-800 focus:outline-none focus:ring-0 ltr:mr-3 rtl:ml-3">
<!-- <i class="fas fa-paper-plane me-1"></i> -->
<svg xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" class="inline-block ltr:mr-2 rtl:ml-2" fill="currentColor" viewBox="0 0 512 512"><path d="M53.12,199.94l400-151.39a8,8,0,0,1,10.33,10.33l-151.39,400a8,8,0,0,1-15-.34L229.66,292.45a16,16,0,0,0-10.11-10.11L53.46,215A8,8,0,0,1,53.12,199.94Z" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><line x1="460" y1="52" x2="227" y2="285" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/></svg>
Read Story
</a>
</div>
</div><!-- end content -->
<!-- play -->
<div class="flex-shrink max-w-full px-4 w-full lg:w-1/2 lg:order-1">
<div class="relative rounded-md overflow-hidden hover:shadow-xl">
<img src="src/img-min/human/purple-laptop.jpg" class="max-w-full w-full h-auto" alt="background images">
<div class="absolute left-1/2 top-1/2 transform -translate-y-1/2 -translate-x-1/2 lightgallery-thumbnail">
<a id="preview-video2" aria-label="Introcluding Upgency" href="https://www.youtube.com/watch?v=nOsKM0cb0qE" class="p-5 rounded-full leading-5 text-gray-800 bg-gray-100 border border-gray-100 hover:text-gray-900 hover:bg-gray-200 hover:ring-0 hover:border-gray-200 focus:bg-gray-200 focus:border-gray-200 focus:outline-none focus:ring-0 relative">
<svg class="bi bi-play-fill inline-block" width="1.5rem" height="1.5rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M11.596 8.697l-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 010 1.393z"></path>
</svg>
</a>
</div>
</div>
</div><!-- end team -->
</div>
</div>
</div><!-- end video -->
Slider popup
<!-- slider -->
<div class="lightgallery-slider mb-20 lg:mb-4 carousel nav-inset-button nav-dark-button" data-flickity='{ "cellAlign": "left", "wrapAround": true, "pageDots": false, "draggable": false, "adaptiveHeight": true, "prevNextButtons": true , "imagesLoaded": true }'>
<!-- item -->
<div class="slider-item text-center max-w-full w-full md:w-1/2 px-2 cursor-pointer" data-src="src/img-min/project/project_1.jpg" data-sub-html="Screenshot 1">
<img class="img-fluid d-inline-block" src="src/img-min/project/project_1.jpg">
</div>
<!-- item -->
<div class="slider-item text-center max-w-full w-full md:w-1/2 px-2 cursor-pointer" data-src="src/img-min/project/project_2.jpg" data-sub-html="Screenshot 2">
<img class="img-fluid d-inline-block" src="src/img-min/project/project_2.jpg">
</div>
<!-- item -->
<div class="slider-item text-center max-w-full w-full md:w-1/2 px-2 cursor-pointer" data-src="src/img-min/project/project_3.jpg" data-sub-html="Screenshot 3">
<img class="img-fluid d-inline-block" src="src/img-min/project/project_3.jpg">
</div>
</div><!-- end slider -->
Note: This features is required Flickity slider and can't applied in flickity draggable style, other style work fine.
For complete documentation read in here