JSFiddle - React, Tailwind, and code Playground

HTML

<div>
	<p>This is a test</p>
	<img class="mod-itrigger" src="http://placeimg.com/98/100/animals" />
	<a class="mod-atag" href="http://placeimg.com/98/100/animals">View the Image</a>
</div>
<div>
	<p>This is a test</p>
	<img class="mod-itrigger" src="http://placeimg.com/100/95/animals" />
	<a class="mod-atag" href="http://placeimg.com/100/95/animals">View the Image</a>
</div>
<div>
	<p>This is a test</p>
	<img class="mod-itrigger" src="http://placeimg.com/95/95/animals" />
	<a class="mod-atag" href="http://placeimg.com/95/95/animals">View the Image</a>
</div>
<div id="msg"></div>

<!-- Modal -->
<div class="modal fade" id="gallery-lightbox" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title" id="myModalLabel"><?= $gallery['name'];?></h4>
			</div>
			<div class="modal-body">
				...
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
			</div>
		</div>
	</div>
</div>
<!-- ./Model -->

CSS

DISABLED#msg{position:absolute;top:30%;left:40%;}

JavaScript

/*
	Note that there is a several-second DELAY before 
	placeimg.com displays the image in the modal
*/

$('.mod-atag').click(function(e){
   e.preventDefault();
   var i = $(this).attr('href');
	//alert(i);
	$('.modal-body').html('<img src="'+i+'" class="msg" width="200" height="200" />');
	$('#gallery-lightbox').modal('show');
});

$('.mod-itrigger').click(function(){
   var i = $(this).next('a').attr('href');
	$('.modal-body').html('<img src="'+i+'" class="msg" width="200" height="200" />');
	$('#gallery-lightbox').modal('show');
});