lightgallery.js
Full featured javascript lightbox gallery, No dependencies.
Installation
Add styles in <head></head>
<link rel="stylesheet" href="src/plugins/lightgallery.js/dist/css/lightgallery.min.css">
Add script right before closing </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
Rebranding Your Brand with new Logo
Web
Web Development Service
Graphic
Graphic Design for Marketing
Video
Video Sales and Marketing
Photography
Record Your Best Moment
Apps
Apps Development and Games
<div class="container">
<!-- Portfolio Content -->
<div class="portfolio row g-0 lightgallery-thumbnail">
<figure data-src="src/img-min/project/project_1.jpg" class="col-sm-6 col-lg-4 portfolio-item branding" data-sub-html="title images">
<img class="portfolio-image-2" src="src/img-min/project/project_1.jpg" alt="Image Description">
<figcaption class="portfolio-info-2">
<div class="portfolio-info-content-2">
<h4 class="h5 mb-3 text-white">Logo Design</h4>
<small class="d-block text-light">Rebranding Your Brand with new Logo</small>
</div>
</figcaption>
</figure>
<figure data-src="src/img-min/project/project_2.jpg" class="col-sm-6 col-lg-4 portfolio-item photovid branding web" data-sub-html="title images">
<img class="portfolio-image-2" src="src/img-min/project/project_2.jpg" alt="Image Description">
<figcaption class="portfolio-info-2">
<div class="portfolio-info-content-2">
<h4 class="h5 mb-3 text-white">Web</h4>
<small class="d-block text-light">Web Development Service</small>
</div>
</figcaption>
</figure>
<figure data-src="src/img-min/project/project_3.jpg" class="col-sm-6 col-lg-4 portfolio-item graphic" data-sub-html="title images">
<img class="portfolio-image-2" src="src/img-min/project/project_3.jpg" alt="Image Description">
<figcaption class="portfolio-info-2">
<div class="portfolio-info-content-2">
<h4 class="h5 mb-3 text-white">Graphic</h4>
<small class="d-block text-light">Graphic Design for Marketing</small>
</div>
</figcaption>
</figure>
<figure data-src="src/img-min/project/project_4.jpg" class="col-sm-6 col-lg-4 portfolio-item branding graphic" data-sub-html="title images">
<img class="portfolio-image-2" src="src/img-min/project/project_4.jpg" alt="Image Description">
<figcaption class="portfolio-info-2">
<div class="portfolio-info-content-2">
<h4 class="h5 mb-3 text-white">Video</h4>
<small class="d-block text-light">Video Sales and Marketing</small>
</div>
</figcaption>
</figure>
<figure data-src="src/img-min/project/project_5.jpg" class="col-sm-6 col-lg-4 portfolio-item photovid" data-sub-html="title images">
<img class="portfolio-image-2" src="src/img-min/project/project_5.jpg" alt="Image Description">
<figcaption class="portfolio-info-2">
<div class="portfolio-info-content-2">
<h4 class="h5 mb-3 text-white">Photography</h4>
<small class="d-block text-light">Record Your Best Moment</small>
</div>
</figcaption>
</figure>
<figure data-src="src/img-min/project/project_6.jpg" class="col-sm-6 col-lg-4 portfolio-item web" data-sub-html="title images">
<img class="portfolio-image-2" src="src/img-min/project/project_6.jpg" alt="Image Description">
<figcaption class="portfolio-info-2">
<div class="portfolio-info-content-2">
<h4 class="h5 mb-3 text-white">Apps</h4>
<small class="d-block text-light">Apps Development and Games</small>
</div>
</figcaption>
</figure>
</div>
</div>
More example lightgallery.js in here Portfolio section
Popup video
<div class="d-inline-block lightgallery-thumbnail">
<a class="btn btn-light border text-primary mb-3 mb-md-0 hover-button-up" href="https://www.youtube.com/watch?v=B7UG9v-n6WI">
<!-- <i class="fas fa-play"></i> -->
<svg class="bi bi-play-fill ms-1 mb-1 me-2 rtl-180" 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>Watch Video
</a>
</div>
More example lightgallery.js in here Portfolio section
For complete documentation read in here
Slider popup
<!-- slider -->
<div class="lightgallery-slider mb-7 mb-lg-3 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="carousel-cell slider-item text-center col-12 col-md-6 px-2" 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="carousel-cell slider-item text-center col-12 col-md-6 px-2" 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="carousel-cell slider-item text-center col-12 col-md-6 px-2" 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