JSFiddle - React, Tailwind, and code Playground

by Mrt Ja

HTML

<body>

	<div class="img-gallery">
		<img class="count" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Fringilla_coelebs_chaffinch_male_edit2.jpg/424px-Fringilla_coelebs_chaffinch_male_edit2.jpg">
		<img class="count" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Common_Blackbird.jpg/800px-Common_Blackbird.jpg">
		<img class="count" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Song_Thrush_Turdus_philomelos.jpg/800px-Song_Thrush_Turdus_philomelos.jpg">
		<img class="count" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/Cape_Glossy_Starling_%28Lamprotornis_nitens%29_%2816268686840%29.jpg/800px-Cape_Glossy_Starling_%28Lamprotornis_nitens%29_%2816268686840%29.jpg">
		<img class="count" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fb/Rotkehlchenportrait_aus_ca._1_Meter_Entfernung.jpg/800px-Rotkehlchenportrait_aus_ca._1_Meter_Entfernung.jpg">
    
	</div>
	


</body>

CSS

img { width:250px; 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;}


.num{
    background:#000;
    color:#fff;
    padding:10px;
    width:50px;
    text-align:center;
}

JavaScript

// lightbox gallery  -------------------------------------------------------------------------------------------------------------------

$(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 class="num"></div></div>');

	// open lightbox -----------------------------------------------------------------------------------------------------------------------
	$('.img-gallery img').click(function(){
		imgURL = $(this).attr('src');
		$('#lightbox-overlay #lightbox-content img').attr('src',imgURL);
		$('#lightbox-overlay').fadeIn(300);
		imgActive = $(this);
	});
	
	// close lightbox ----------------------------------------------------------------------------------------------------------------------
	
	$('#lightbox-overlay').click(function(e) {
		if (!$(e.target).closest('#lightbox-content').length){
		$("#lightbox-overlay").fadeOut(300);
		}
	});


	$('.lightboxicon-close').click(function(){
	$('#lightbox-overlay').fadeOut(300);
	});
	

/*	// navigation lightbox function image slider using opacity -----------------------------------------------------------------------------
	function imageSlider(){
      $('#lightbox-overlay #lightbox-content img').animate({ opacity: 0}, 150, function(){
			$('#lightbox-overlay #lightbox-content img').attr('src',imgURL);
      $('#lightbox-overlay #lightbox-content img').animate({ opacity: 1}, 150);
		});
	}*/

	// navigation lightbox function image slider using fading ------------------------------------------------------------------------------
 	function imageSlider(){   
		$('#lightbox-overlay #lightbox-content img').fadeOut(150,...