1

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

 <a href="<?= $imageURL; ?>"><img src="<?= $imageURL; ?>" width="350" /></a>

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">&nbsp;<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"><a href="<?= $imageURL; ?>"><img src="<?= $imageURL; ?>" width="350" /></a><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>
Improve this question
7
  • From your template it looks like you are using PHP? If so, you should tag this question php and remove the java tag (did you mean javascript?) Commented Oct 15, 2022 at 0:33
  • Yes sorry. I added those tags because I'm willing to use those. I'll edit it now. Thank you for the heads up Commented Oct 15, 2022 at 0:34
  • Okay @tgdavies thank you for taking the time to look at this :) Commented Oct 15, 2022 at 0:38
  • I thought I would spare people the reading of all the different scripts I tried and places I went to. Thats why I said "dozens". I have been at this the entire day. I guess for now on I should site all the examples I tried. But thank you tgdavies for the heads up, and @SamSabin for your upvote too. Commented Oct 15, 2022 at 0:51
  • 2
    I edited the original question to show the entire pages scripting Commented Oct 15, 2022 at 1:00

1 Answer 1

Reset to default
1

One of the ways is to use a jquery lightbox

  1. 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">

  1. Enclose your table containing the photos by <div class="gallery"> and </div>

  2. Add the following block to trigger the lightbox script:

<script> $(function(){ var gallery = $('.gallery a').simpleLightbox({navText: ['&lsaquo;','&rsaquo;']}); }); </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

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thank you so much. I couldn't get lightbox to work for my mobile pages right but this will be great for the pc users

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.