JSFiddle - React, Tailwind, and code Playground

by vanduzled

HTML

<script src="https://raw.githubusercontent.com/marcuswestin/store.js/master/store.js"></script>
	<p>Image 1 <a href="#" data-lightbox="imgID1">Add to Lightbox</a></p>
	<p>Image 2 <a href="#" data-lightbox="imgID2">Add to Lightbox</a></p>
	<p>Image 3 <a href="#" data-lightbox="imgID3">Add to Lightbox</a></p>
	<p>Image 4 <a href="#" data-lightbox="imgID4">Add to Lightbox</a></p>
	<p>Image 5 <a href="#" data-lightbox="imgID5">Add to Lightbox</a></p>
	<p>Image 6 <a href="#" data-lightbox="imgID6">Add to Lightbox</a></p>

	<form id="form1" name="form1" action="lightbox.html">
		<input type="submit" classd="login" value="View Lightbox"/>
	</form>

JavaScript

$( document.body ).on( "click", "a[data-lightbox]",
	    function ( ev ) {
	        ev.preventDefault();
	        var id = $( this ).data( "lightbox" ), list = store.get( "lightbox" );
	        if ( list ) {
	            if ( $.inArray( id, list ) === -1 )
	                list.push( id );    
	        } else {
	            list = [ id ];
	        }

	        store.set( "lightbox", list );
	    }
	);