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">
	<script src="https://code.jquery.com/jquery-3.2.1.js"></script>


  </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...

JavaScript

var cur = 0;

	$('.example-image-link').on('click', function(){
	    cur = $(this).index();
	});

	$('.lb-next').on('click', function(){
	    alert($('.example-image-link')[cur+1].href);
	    cur++;
	});

	$('.lb-prev').on('click', function(){
	    alert($('.example-image-link')[cur-1].href);
	    cur--;
	});