JSFiddle - React, Tailwind, and code Playground

by Shuaib Khan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="gallery">
        <div class="row">
            <div class="diamondCaper col-sm-6 col-md-6 col-lg-6">
                <a href="javascript:void(0)" href="https://via.placeholder.com/150">
              <img src="https://via.placeholder.com/150" alt="First book in the Crystal O'Mally series."></a>
              <p>Meet fifteen year old Crystal O'Mally who is drawn to the excitement of mysteries. She gets a chance to unravel a mystery and things don't go as planned. Her father's jewelry store is robbed, a huge diamond goes missing, and her father is on the list of never-ending suspects.</p>
                
            </div>
            <div class="anythingButADiamond col-sm-6 col-md-6 col-lg-6">
                <a href="javascript:void(0)" href="https://via.placeholder.com/150">
              <img src="https://via.placeholder.com/150" alt="Second book in the Crystal O'Mally series."></a>
              <p>Crystal is back, and things are out of control. A mystery at Lesler's ranch has her captivated. But why? Is it because the ranch is being sabotaged, cowboys are being injured, cows are stampeding out of control, or the fact that jewelry and horses are disappearing? The suspect list is growing, and every cowboy seems to be on it.</p>
            </div>
        </div>
    </div>

CSS

#overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 10px;
	top:0;
	left:0;
	display:none;
	align-items:center;
	justify-content:center;
	background-color:rgba(0,0,0,0.7);
	padding:15px;
}

#slideshow>div {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
}

JavaScript

/*************************************************************
            Gallery Lightbox On Stories Page
**************************************************************/

//Problem: User when clicking on image goes to a dead end
//Solution: Create an overlay with the large image - Lightbox

var $overlay = $('<div id="overlay"></div>');
var $image = $("<img>");
// var $caption = $("<p></p>");

// An image to overlay
$overlay.append($image);

// A caption to overlay
// $overlay.append($caption);

// Add overlay
$("body").append($overlay);

// Capture the click event on a link to an image
$(".gallery a").click(function(event){
  event.preventDefault();
  var imageLocation = $(this).attr("data-href");
  // Update overlay with the image linked in the link
  $image.attr("src", imageLocation);

  // Show the overlay.
  $overlay.css("display","flex");

});
  // Get child's alt attribute and set caption
//  var captionText = $(this).children("img").attr("alt");
//  $caption.text(captionText);
// }); 

// When overlay is clicked
$overlay.click(function(){
  // Hide the overlay
  $overlay.hide();
});

/*************************************************************
           Hide Email Using Javascript To Avoid Spam 
**************************************************************/
//var parts = ["lpstories", "yahoo", "com", "&#46;", "&#64;"];
//var email = parts[0] + parts[4] + parts[1] + parts[3] + parts[2];
//document.getElementById("email").innerHTML=email;