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>
Christopher Robbins
  • 37
  • 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 java*script*?) – tgdavies Oct 15 '22 at 00: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 – Christopher Robbins Oct 15 '22 at 00:34
  • Okay @tgdavies thank you for taking the time to look at this :) – Christopher Robbins Oct 15 '22 at 00: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. – Christopher Robbins Oct 15 '22 at 00:51
  • You may (1) use a php to load from the db the photo data and display the photo in say "photo1.php" and (2) just say jquery to trigger the popup loading this "photo1.php?id=123" . See this [SO link](https://stackoverflow.com/questions/12137033/load-external-url-into-modal-jquery-ui-dialog) – Ken Lee Oct 15 '22 at 00:54
  • @KenLee thank you, however that isn't what I'm looking for. That looks to load an external page into a popup. I'm wanting the same image they click on to popup so they can see it larger. I tried lightbox (I should have said that too) but it wasn't working with the php code I have in – Christopher Robbins Oct 15 '22 at 00:59
  • 2
    I edited the original question to show the entire pages scripting – Christopher Robbins Oct 15 '22 at 01:00

1 Answers1

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

Ken Lee
  • 6,985
  • 3
  • 10
  • 29