Hi all,

I'm not sure what forum is best for this question since it possible involves several, so apologies if I'm in the wrong one.

I have a page where I make a call to my MySQL database and return images into a bootstrap grid, and on top of the image, I also display the person's initials. When completing the query, I also return the person's name and location into variables $name and $location.

What I want to do is create a lightbox of some kind where a user clicks on the image and the lightbox appears with the additional information of name and location.

I've researched this for days, and most information say I need to make another ajax call, but I already have the information. I don't understand the need for the additional query.

Essentially, if a user clicks on my image, I want to display a popup with my image, name and location.

I hope that is enough of a description to garner some pointers for accomplishing this.

Thanks in advance!

Code:
<!DOCTYPE html>

<head>
	<title>Moncton ACC Photo Board</title>
	<meta charset="utf-8">
	<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" href="css/style.css">
	<script src = "jquery/jquery-3.3.1.js"></script>
	<script src = "bootstrap/js/bootstrap.min.js"></script>

	<script type="text/javascript">
	$(document).ready(function(){
		$("#acc").hide();

	$("#MonctonAcc").click(function(){
		$("#acc").show();
	});
	});


	</script>

	

	
</head>

<body>

<header>Moncton FIR Staff Directory</header>

<div class="container-fluid">

	<div class="row">
	<div class ="col-lg-12 text-center">



	<div class = "btn-group" role="group">
		<a href="?" class="btn btn-primary">Home</a></button>
		<a href = "?specialty=Manager" class="btn btn-primary">Management</a>
		<a href="#" class="btn btn-primary hide_btn" id="MonctonAcc">Moncton ACC</a>
		<a href = "?specialty=Halifax" class="btn btn-primary">Halifax Tower</a>
		<a href = "high.php" class="btn btn-primary">Fredericton Tower</a>
		<a href = "high.php" class="btn btn-primary">Saint John FSS</a>
		<a href = "high.php" class="btn btn-primary">Charlottetown FSS</a>
		<a href = "high.php" class="btn btn-primary">Iqaluit FSS</a>
		<a href = "high.php" class="btn btn-primary">Halifax FIC</a> 
		
		</div> 

<div class="acc" id="acc">
	<div class = "btn-group" role="group">
		
		<a href = "?specialty=High" class="btn btn-primary">High</a>
		<a href = "high.php" class="btn btn-primary">Maritime</a>
		<a href = "high.php" class="btn btn-primary">TCU</a>
		<a href = "high.php" class="btn btn-primary">DSC</a>
		<a href = "high.php" class="btn btn-primary">ATOS</a> 
		<a href = "high.php" class="btn btn-primary">Tech Ops</a>
		<a href = "high.php" class="btn btn-primary">Engineering</a>
		<a href = "high.php" class="btn btn-primary">CNS</a>
		<a href = "high.php" class="btn btn-primary">Training</a>
		<a href = "high.php" class="btn btn-primary">Admin Group</a>
		
		</div>
</div>
	</div>

	
	<?php
	 include ('db_connect.php');
	 //include_once ('functions.php');

	// $result = $db->query("SELECT * from monctonfir order by initials ASC");
	 $sql = "SELECT * from monctonfir where 1 ";

	 if(isset($_GET['specialty'])) $sql .= " AND specialty = '".$_GET['specialty']."' ";
	 $sql .=" order by initials ASC";
	 $result = $db->query($sql);

	 if($result->num_rows > 0){
	 	while ($row = $result->fetch_assoc()){
	 		$imageURL = 'image/'.$row["file"];
	 		$initial = $row["initials"];
	 		$name = $row["name"];
	 		$location = $row["location"];

	 		
	 		

	 	?>
	 		 	
	 	<div id="photos" class = "col-lg-1 no-gutters" style="margin-top:1rem;">
	 	<div class="card" style="width: 6.5rem;">
	 	<a href = "#">
	 		<img id="staff" class="img card-img-top" src = "<?php echo $imageURL ?>"> 
	 	</a>
	 	<div class = "card-body">
	 		<h5 class = "card-title round-button" style="text-align: center;"><?php echo $initial  ?></h5>
	 	</div>
	 	
	 	</div>
	 	</div>
	 	
	 	
	 	<?php }
	 } ?>



	 
		
	</div>



</div>
<script type="text/javascript" src = "lightbox/js/jquery.1.2.3.js"></script>
<script type="text/javascript" src = "lightbox/js/jquery.lightbox.js"></script>





	
</body>