JSFiddle - React, Tailwind, and code Playground
by Michael Prosser
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<a href="https://agrisphere-portal.com/agGear/uploads/agAUDIT-1707514017-pexels-mark-stebnicki-8374540.jpeg" data-ambient-lightbox="gallery_1" data-ambient-lightbox-gallery-name="AUDIT ITEM PHOTOS"><img width="100" height="100" src="https://agrisphere-portal.com/agAudit/thumbnails/?path=/agGear/uploads/agAUDIT-1707514017-pexels-mark-stebnicki-8374540.jpeg"></a>
<a href="https://agrisphere-portal.com/agGear/uploads/agAUDIT-1707514017-pexels-mark-stebnicki-2965707.jpeg" data-ambient-lightbox="gallery_1" data-ambient-lightbox-gallery-name="AUDIT ITEM PHOTOS"><img width="100" height="100" src="https://agrisphere-portal.com/agAudit/thumbnails/?path=/agGear/uploads/agAUDIT-1707514017-pexels-mark-stebnicki-2965707.jpeg"></a>
<a href="https://agrisphere-portal.com/agGear/uploads/agAUDIT-1707514017-pexels-mark-stebnicki-8374540.jpeg" data-ambient-lightbox="gallery_2" data-ambient-lightbox-gallery-name="AUDIT AFTER PHOTOS"><img width="100" height="100" src="https://agrisphere-portal.com/agAudit/thumbnails/?path=/agGear/uploads/agAUDIT-1707514017-pexels-mark-stebnicki-8374540.jpeg"></a>
<a href="https://agrisphere-portal.com/agGear/uploads/agAUDIT-1707514017-pexels-mark-stebnicki-2965707.jpeg" data-ambient-lightbox="gallery_2" data-ambient-lightbox-gallery-name="AUDIT AFTER PHOTOS"><img width="100" height="100" src="https://agrisphere-portal.com/agAudit/thumbnails/?path=/agGear/uploads/agAUDIT-1707514017-pexels-mark-stebnicki-2965707.jpeg"></a>
CSS
.ambient-lightbox{
position: fixed;
z-index: 99999999999999;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
background-color: rgba(0,0,0,0.9);
font-family: helvetica, serif;
}
.ambient-lightbox>header{
color:#999;
background-color: #222;
text-align: center;
padding: 10px;
position: absolute;
left: 0px;
right: 0px;
top: 0xp;
}
.ambient-lightbox>ul{
padding: 10px;
margin: 0px;
list-style: none;
background-color: #111;
border-bottom: solid 1px #333;
position: absolute;
left: 0px;
right: 0px;
bottom: 0px;
}
.ambient-lightbox>ul>li{
display: inline-block;
width: 100%;
}
.ambient-lightbox>ul>li.ambient-lightbox-align-left{
text-align: left;
}
.ambient-lightbox>ul>li.ambient-lightbox-align-right{
text-align: right;
}
.ambient-lightbox button.ambient-lightbox-prev-btn{
position: absolute;
top: 50px;
bottom: 50px;
width: 100px;
z-index: 999;
opacity: 0.5;
left: 0px;
background-color: transparent;
border: none;
cursor: pointer;
}
.ambient-lightbox button.ambient-lightbox-prev-btn.disabled:before{
opacity: 0.2;
}
.ambient-lightbox button.ambient-lightbox-next-btn.disabled:before{
opacity: 0.2;
}
.ambient-lightbox button.ambient-lightbox-prev-btn:before{
content: "";
display: block;
width: 0px;
height: 0px;
border-style: solid;
border-width: 60px 30px 60px 0;
border-color: transparent #DDDDDD transparent transparent;
transform: rotate(0deg);
margin-left: 10px;
}
.ambient-lightbox button.ambient-lightbox-next-btn{
position: absolute;
top: 50px;
bottom: 50px;
width: 100px;
z-index: 999;
opacity: 0.5;
right: 0px;
float: left;
background-color: transparent;
border: none;
cursor: pointer;
margin-right: 10px;
}
.ambient-lightbox button.ambient-lightbox-next-btn:before{
content: "";
display: block;
width: 0px;
height: 0px;
border-style: solid;
border-width: 60px 30px 60px 0;
border-color: transparent #DDDDDD transparent...
JavaScript
function AmbientLightbox(){
var t = this;
t.images = [];
t.currentGallery = '';
t.currentImages = [];
t.currentImage = null;
t.currentGalleryName = '';
t.ui = null;
t.update = function(){
$('a[data-ambient-lightbox]').each(function(){
var cached_this = $(this);
let image = {
gallery: cached_this.attr('data-ambient-lightbox'),
url: cached_this.attr('href'),
title: typeof(cached_this.attr('title')) == 'undefined' ? "" : cached_this.attr('title'),
element: cached_this,
gallery_name: cached_this.attr('data-ambient-lightbox-gallery-name')
};
console.log(image);
cached_this.attr('href','javascript:void(0);')
t.images.push(image);
$(this).click(function(){
t.loadGallery($(this));
});
});
}
t.loadGallery = function(element){
console.log("LOADING");
$('.ambient-lightbox').remove();
t.currentGallery = '';
t.currentImages = [];
t.currentImage = null;
t.currentImageIndex = -1;
// get the current gallery based on element being clicked
var i,len = t.images.length;
for(i=0;i<len;i++){
if(t.images[i].element.is(element)){
t.currentGalleryName = t.images[i].gallery_name;
t.currentGallery = t.images[i].gallery;
t.currentImage = element;
}
}
for(i=0;i<len;i++){
if(t.images[i].gallery == t.currentGallery){
t.currentImages.push(t.images[i]);
}
}
// now we have all the image in the current gallery, let's put them to use
t.ui = $('<div class="ambient-lightbox"><header>' + t.currentGalleryName + '<button class="ambient-lightbox-close-button">X</button></header><figure></figure><ul><li class="ambient-lightbox-counter">Image 1 of 1</li></ul><button class="ambient-lightbox-prev-btn"></button><button...