JSFiddle - React, Tailwind, and code Playground

by Mrt Ja

HTML

<body>


	<div class="img-gallery">
		<div class="lbimage"><img src="https://picload.org/image/rcaiiriw/img-01.jpg"><div class="lbinfo">1</div></div>
		<div class="lbimage"><img src="https://picload.org/image/rcaiirpr/img-02.jpg"><div class="lbinfo">2</div></div>
		<div class="lbimage"><img src="https://picload.org/image/rcaiirpa/img-03.jpg"><div class="lbinfo">3</div></div>
		<div class="lbimage"><img src="https://picload.org/image/rcaiirpl/img-04.jpg"><div class="lbinfo">4</div></div>
		<div class="lbimage"><img src="https://picload.org/image/rcaiirpi/img-05.jpg"><div class="lbinfo">5</div></div>
		
	</div>	


</body>

CSS

img { width:100px; height:auto;}

#lightbox-overlay { 
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0,0,0,0.8);
	z-index: 10;
}
#lightbox-content {
	position:absolute;

	top:80px;
	left:10%;
	right:10%;
	bottom:50px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: #646473;
}
#lightbox-content img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}
#lightbox-nav {
	color:#ffffff;
}
.lightboxicon-next, .lightboxicon-prev { 
	position: absolute;
	top:0;
	height: 100%;
	width: 10%;
	opacity: 0;
	z-index: 1;
	transition: ease-in-out .3s;
}
.lightboxicon-next:hover, .lightboxicon-prev:hover { 
		opacity: 1;
		background: rgba(0,0,0,0.3);

}
.lightboxicon-next { 
	right: 0;
}
.lightboxicon-prev {
	left: 0;
}
.lightboxicon-next:after { 
	content: ">";
}
.lightboxicon-prev:after { 
	content: "<";
}
.lightboxicon-close {
	position: fixed;
	top: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 50px;
	width: 50px;
	background-color: #ff7373;
}
.lightboxicon-close:after { 
	content:"X";
}
#lightbox-overlay #lightbox-content #lightbox-nav span { cursor:pointer;}

.lbinfo {
  display: none;
}

JavaScript

$(document).ready(function() {

	var imgActive;
	var imgURL;

	// create lightbox
	$('body').append('<div id="lightbox-overlay"><div id="lightbox-content"><div id="lightbox-nav"><span class="lightboxicon-prev"></span><span class="lightboxicon-close"></span><span class="lightboxicon-next"></span></div><img /></div></div></div>');

	// open lightbox
	$('.img-gallery .lbimage img').click(function(){
		imgURL = $(this).attr('src');
		$('#lightbox-overlay #lightbox-content img').attr('src',imgURL);
		$('#lightbox-overlay').fadeIn(300);
		imgActive = $(this);
	});

// navigation lightbox
 	function imageSlider(){   
		$('#lightbox-overlay #lightbox-content img').fadeOut(150, function(){
		$('#lightbox-overlay #lightbox-content img').attr('src',imgURL);
      $('#lightbox-overlay #lightbox-content img').fadeIn(150);
		});  
	}
// navigation lightbox next
	$('.lightboxicon-next').click(function(){
		$('#lightbox-overlay #lightbox-content img');
		nextIMG(imgActive);
	});
	
	function nextIMG(objectActive) {
		if($(objectActive).next().is('.lbimage')){	
			imgActive = $(objectActive).next();
			imgURL = $(objectActive).next('.lbimage').attr('src');
			$(imageSlider);
		} else {
			imgActive = $(objectActive).parent().children('.lbimage').first();
			imgURL =  $(objectActive).parent().children('.lbimage').first().attr('src');
			$(imageSlider);
		}
	}
	// navigation lightbox prev ------------------------------------------------------------------------------------------------------------	
	$('.lightboxicon-prev').click(function(){
		prev_img(imgActive);
	});
	
	function prev_img(objectActive) {
		if($(objectActive).prev().is('img')){
			imgActive = $(objectActive).prev();
			imgURL = $(objectActive).prev('img').attr('src');
			$(imageSlider);
		} else {
			imgActive = $(objectActive).parent().children('img').last();
			imgURL = $(objectActive).parent().children('img').last().attr('src');
			$(imageSlider);
		}
	}

			
// close...