Displying images stored in database - php

Question

I am doing gallery and I need some help. I have uploaded images to database through website - they are stored in MySQL (names) and in folder called images. What I want is to display (miniatures) them in line and on click enlarge them.
What my code does is displaying miniatures and links them to nothing :/ ...
This is my code:
<?php
$hostname_connect= "localhost";
$database_connect= "gallery";
$username_connect= "root";
$password_connect= "root";
$connect_solning = mysql_connect($hostname_connect, $username_connect, $password_connect) or trigger_error(mysql_error(),E_USER_ERROR);
#mysql_select_db($database_connect) or die (mysql_error());
$query_image = "SELECT * FROM gallery_images";
$result = mysql_query($query_image);
if(mysql_num_rows($result) > 0)
{
while($row = mysql_fetch_array($result))
{
?>
<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">
<?php
echo '<img alt="gallery" src="images/'.$row["image"].'" class="pic-resize" alt=""></a>';
}
while($row = mysql_fetch_array($result))
{
?>
<div id="light" class="white_content">
<?php
echo '<img alt="gallery" src="images/'.$row["image"].'" class="" alt=""></a>';
?>
Close
</div>
<?php
}
}
else
{
echo 'File name not found in database';
}
?>

Answer 1

You are using this in a loop:
<div id="light" class="white_content">
So you will have multiple elements with the same ID and that is not allowed.
Then you try to access them like:
document.getElementById('light')
Which will give you the first element it finds and not the actual one you want to enlarge (unless it is the first...).
Personally I would use the standard lightbox solution, link your thumbnail to your big image (instead of javascript:void(0)) and use the href attribute of your link to set the source for the big image using javascript when the thumbnail gets clicked.
Edit: An example for the html to get you started:
<?php
while($row = mysql_fetch_array($result))
{
?>
<a href="<?php echo 'images/'.$row["image"]; ?>" onclick="return showImage(this);">
<?php
echo '<img alt="gallery" src="images/'.$row["image"].'" class="pic-resize" alt=""></a>';
}
?>
<div id="light"><img src='' alt=''></div>
Now you just have to write the showImage() function in javascript that will do the actual work:
get the href attribute of the clicked link;
set the source of the image in #light to that value;
show the #light element.