JSFiddle - React, Tailwind, and code Playground

by Keith Jeter

HTML

<div id="gallery">
  <img id="image1" />
  <img id="image2" />
  <img id="image3" />
  ...
</div>

<div id="lightbox">
  <img id="lightbox-image" />
</div>

CSS

#lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  display: none;
}
#lightbox-image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 80%;
  max-height: 80%;
}

JavaScript

// jQuery code to load the JSON data and create the image gallery
$.getJSON('images.json', function(data) {
  // Loop through the JSON data and set the src attribute of each img element to the corresponding image URL
  $.each(data, function(i, item) {
    $('#image' + (i+1)).attr('src', item.url);
  });

  // Add a click event handler to each img element that opens the full-size image in a lightbox
  $('img').click(function() {
    var imgUrl = $(this).attr('src');
    $('#lightbox').show();
    $('#lightbox-image').attr('src', imgUrl);
  });
});