Display second image when the 1'st image was selected - php

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
}

Answer 2

<?php
$result = mysql_query("SELECT * FROM images ORDER BY position");
while ($image = mysql_fetch_array($result)){
?>
<img src="/<?php echo $image['thumb'];?>" onclick="openImage('<?php echo $image["image"];?>');" />
<?php } ?>
than write a javascript function called openImage(image_src) that will put the image in the right location

Answer 3

Look at this and pick something that satisfy your needs http://www.1stwebdesigner.com/css/fresh-jquery-image-gallery-display-solutions/

Answer 4

<script>
function showBigImage(image_id){
// show your big image here with using image_id
}
</script>
<?php
$result = mysql_query("SELECT * FROM images ORDER BY position");
while ($image = mysql_fetch_array($result)){
?>
<img src="/<?php echo $image['thumb']; ?>" onclick="showBigImage('<?php echo $image["image_id"]; ?>');" />
<?php } ?>