Question

I have a list with images which I display from db like this:

<?php                                           
    $result = mysql_query("SELECT * FROM images ORDER BY position");
    while ($image = mysql_fetch_array($result)){
?>
        <img src="/<?php echo $image['thumb'];?>" />
    
php } ?>

I already created a mask where to display the big image but I have no idea how do I know which image is clicked then to display the big image inside the popup.

Fields I use from db are

image_id    
image   
position    
thumb

Answer 1

You need to surround your <img> tag with a <a> link that points to another PHP script which retrieves the correct image:

Inside your while() loop:

<a href='getImage.php?id=<?php echo $image['image_id']; ?>'>
  <img src="/<?php echo $image['thumb'];?>" />
</a>

getImage.php

getImage.php mainly displays an <img> tag containing the full size image selected earlier. Be sure to fill in the rest of the HTML it needs as necessary, as I have only included the <img> tag below.

$img = isset($_GET['id']) ? intval($_GET['id']) : NULL;

if ($img) { 
  $image_qry = mysql_query("SELECT image FROM images WHERE image_id = $img");
  if ($image_qry) {
    $image_data = mysql_fetch_assoc($image_qry);
    // One row was returned...
    if ($image_data) {
      echo "<img src='{$image_data['image']}' alt='alt text...' />";
    }
  }
}
else {
  // Invalid id, not an integer
}