CODEWITHSUNDEEP
phphtmlmysql
Christopher Robbins
Christopher Robbins

Reputation: 37

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

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>

Upvotes: 1

Views: 467

Answers (1)

Ken Lee
Ken Lee

Reputation: 8073

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

Upvotes: 1

Related Questions