I have been working on developing my own lightbox gallery and I think I'm almost there.
My gallery is currently set up as a grid, where each cell displays a preview image using an img tag with the url specified in the CSS. However, if I can't extract that URL from the CSS code, I resort to including an anchor tag in the HTML code. From there, I attempt to use this to retrieve the URL from the markup and insert it into the img src for the lightbox.
The functionality for clicking on a cell and showing the lightbox works fine, but I'm facing issues with integrating the HTML content into the lightbox.
Since explaining this concept might be tricky, please refer to the code snippet below for clarity.
$(document).ready(function($) {
$('.image-item').click(function(e) {
e.preventDefault();
var image_href = $(this).attr("href");
$("#lightbox").css("display", "block");
$('#content').html('<img src="' + image_href + '" />');
});
$('body').on('click', '#lightbox', function() {
$("#lightbox").css("display", "none");
});
});#gallery {
height: 1200px;
position: relative;
width: 90%;
margin-left: 5%;
padding-top: 75px;
}
.image-item {
display: flex;
justify-content: center;
align-items: center;
font-family: Thasadith;
font-weight: 400;
font-size: 18px;
letter-spacing: 3px;
color: #fff;
text-transform: uppercase;
background-color: steelblue;
}
#images-gallery {
display: grid;
height: 1150px;
grid-template-rows: repeat(4, 1fr);
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
width: 100%;
}
.image-item.one {
grid-row: span 2;
grid-column: span 2;
}
.image-item.two {
grid-row: span 3;
grid-column: span 3;
}
.image-item.three {
grid-row: span 3;
grid-column: span 2;
}
.image-item.four {
grid-row: span 3;
grid-column: span 1;
}
#lightbox {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background-color: black;
opacity: 0.5;
text-align: center;
z-index: 2;
display: none;
}
#lightbox p {
text-align:right;
color:#fff;
margin-right:20px;
font-size:12px;
}
#lightbox img {
box-shadow:0 0 25px #111;
-webkit-box-shadow:0 0 25px #111;
-moz-box-shadow:0 0 25px #111;
max-width:940px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="gallery">
<div id = "images-gallery">
<div id="image-one" class="image-item">
<a href="https://i.ibb.co/HXfG735/tattoo.jpg"></a>
</div>
<!-- Remaining image items omitted for brevity-->
</div>
</div>
<div id="lightbox">
<p>Click to close</p>
<div id="content">
<img src="#" />
</div>
</div>