JSFiddle - React, Tailwind, and code Playground

by NOVUSIDEA

HTML

<h3>Single 1</h3>

<a href="single-image.jpg" rel="lightbox">Link 1</a>

<h3>Group 1</h3>

<a href="group-1-image-1.jpg" rel="lightbox" data-group="group-1">Link 1</a>
<a href="group-1-image-2.jpg" rel="lightbox" data-group="group-1">Link 2</a>
<a href="group-1-image-3.jpg" rel="lightbox" data-group="group-1">Link 3</a>

<h3>Group 2</h3>

<a href="group-2-image-1.jpg" rel="lightbox" data-group="group-2">Link 1</a>
<a href="group-2-image-2.jpg" rel="lightbox" data-group="group-2">Link 2</a>
<a href="group-2-image-3.jpg" rel="lightbox" data-group="group-2">Link 3</a>

<h3>Group 3</h3>

<a href="group-3-image-1.jpg" rel="lightbox" data-group="group-3">Link 1</a>
<a href="group-3-image-2.jpg" rel="lightbox" data-group="group-3">Link 2</a>
<a href="group-3-image-3.jpg" rel="lightbox" data-group="group-3">Link 3</a>

JavaScript

$('a[rel^="lightbox"]').on('click', function(event){

	event.preventDefault();
  
  var currentGallery = [];
  
  if( $(this).data('group') !== undefined ) {
  	
    var groupName = $(this).data('group');
    
    $('a[data-group="' + groupName + '"]').each(function(){
    	
      currentGallery.push( $(this) );
    
    });
  
		lightbox( currentGallery );
    
  } else {
  
  	lightbox( [$(this)] );
  
  }
  
});

var lightbox = function(objects) {

	console.log(objects);

}