How to open an image from the database as a popup? - php

Question

I have this script. I have searched dozens of questions on this site and none of them seem to work. However, none of the ones I saw are calling for the image from a database either, so that may be the issue.
My obejctive is to make it so this can open in the center of the screen as a popup instead of to another page or on top of the page as a link. Any help or guidance is appreciated.
I don't mind using java or css if that is what is needed, however I will tell you that my understanding of both is very small so far, but I'm learning
EDIT 2
I have tried to use lightbox but that didn't work at all. I also tried onclick="window.open... but that didn't work either. At best it opened a blank page in the corner of the window
Here is what I have
<img src="<?= $imageURL; ?>" width="350" />
EDIT
Here is the entire page script I have
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#000000">
<tr valign="top" align="left">
<td width="4%"><a style="text-decoration:none" href="/apppages/more.html"><img src="../appimg/arrow.png" width="108" height="68" border="0"></a></td>
<td width="96%" valign="middle"><a style="text-decoration:none" href="/apppages/more.html"> <font color="#CCCCCC" size="6" face="Verdana, Arial, Helvetica, sans-serif">More
Links Options</font></a></td>
</tr>
</table>
<p><br>
</p>
<p> <img src="header2.jpg" width="921" height="479"><br>
<font size="7"><br>
<a href="app-form.php" target="_blank"><font face="Verdana, Arial, Helvetica, sans-serif" color="#9999FF">TAP
HERE TO ADD YOUR SELFIE</font></a></font><br>
<br>
<?php
include 'config.php';
// Get images from the database
$query = $db->query("SELECT nameviewer, file_name FROM image ORDER BY uploaded_on DESC");
?> </p>
</div>
<table width="20%" border="1" cellspacing="0" cellpadding="0" align="center">
<?php
$i = 0;
while ($row = $query->fetch_assoc()){
$nameviewer = 'uploads/'.$row["nameviewer"];
$imageURL = 'uploads/'.$row["file_name"];
if ($i++ % 4 == 0) { // start new row before each group of 4
echo '<tr>';
}
?>
<td valign="top">
<div align="center"><img src="<?= $imageURL; ?>" width="350" /><br>
<font color='lightblue'> <b><font size="6"><?php echo htmlspecialchars($row["nameviewer"]); ?></font></b></font><br>
<font size="6"><i><font color="#999999">Tap The Pic To Expand</font></i></font>
</div>
</td>
<?php
if ($i % 4 == 0) { // end row after a group of 4
echo '</tr>';
}
}
if ($i % 4 != 0) { // end the last row if it wasn't an even multiple of 4
echo '</tr>';
}
?>
</table>

Answer 1

One of the ways is to use a jquery lightbox
First, add the necessary CSS and JS at the top of your script
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.jqueryscript.net/demo/Responsive-Touch-enabled-jQuery-Image-Lightbox-Plugin/dist/simple-lightbox.jquery.min.js"></script>
<link href='https://www.jqueryscript.net/demo/Responsive-Touch-enabled-jQuery-Image-Lightbox-Plugin/dist/simple-lightbox.min.css' rel='stylesheet' type='text/css'>
<link href='https://www.jqueryscript.net/demo/Responsive-Touch-enabled-jQuery-Image-Lightbox-Plugin/demo.css' rel='stylesheet' type='text/css'>
<link href="https://jquery.app/jqueryscripttop.css" rel="stylesheet" type="text/css">
Enclose your table containing the photos by <div class="gallery"> and </div>
Add the following block to trigger the lightbox script:
<script>
$(function(){
var gallery = $('.gallery a').simpleLightbox({navText: ['‹','›']});
});
</script>
Please further adjust the code if necessary to suit your needs.
See the Sandbox (based on your script and slightly amended) for a working example (check the source and you will be able to see that it is applying the above 3 steps) :
http://www.createchhk.com/SOanswers/sub6/testSO15Oct2022.html