JSFiddle - React, Tailwind, and code Playground

by zlojnaxa

HTML

<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <title>Lightbox</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://lokeshdhakar.com/projects/lightbox2/css/screen.css">
    <link rel="stylesheet" href="https://lokeshdhakar.com/projects/lightbox2/css/lightbox.css">

  </head>
  <body>

    <div class="content">

      <!-- EXAMPLES -->

      <section id="examples" class="examples-section">
        <div class="container">
          <h3 style="clear: both;">Four image set</h3>
          <div class="image-row">
            <div class="image-set">
              <a class="example-image-link" href="https://lokeshdhakar.com/projects/lightbox2/images/image-3.jpg" data-lightbox="example-set" data-title="Click the right half of the image to move forward."><img class="example-image" src="https://lokeshdhakar.com/projects/lightbox2/images/thumb-3.jpg" alt="Golden Gate Bridge with San Francisco in distance"></a>
              <a class="example-image-link" href="https://lokeshdhakar.com/projects/lightbox2/images/image-4.jpg" data-lightbox="example-set" data-title="Or press the right arrow on your keyboard."><img class="example-image" src="https://lokeshdhakar.com/projects/lightbox2/images/thumb-4.jpg" alt="Forest with mountains behind"></a>
              <a class="example-image-link" href="https://lokeshdhakar.com/projects/lightbox2/images/image-5.jpg" data-lightbox="example-set" data-title="The next image in the set is preloaded as you&apos;re viewing."><img class="example-image" src="https://lokeshdhakar.com/projects/lightbox2/images/thumb-5.jpg" alt="Bicyclist looking out over hill at ocean"></a>
              <a class="example-image-link" href="https://lokeshdhakar.com/projects/lightbox2/images/image-6.jpg" data-lightbox="example-set" data-title="Click anywhere outside the image or the X to the right to close."><img class="example-image"...

JavaScript

document.addEventListener("click", function(event) {
    var target = event.target;
    
    if(target.classList.contains("lb-next")) {
        alert("вЏ©");
    }
 
    if(target.classList.contains("lb-prev")) {
        alert("вЏЄ");
    }
    
    if(target.matches(".lb-prev, .lb-next")) {
        var image = target.closest(".lightbox").querySelector("img.lb-image");
        
        image.onload = function() {
            image.onload = null;
            alert(image.src);
        };
    }
}, true);