load image into same page as thumbnail

[php_beginner_83]

Hi Everyone

 

I need some advice on how to display an image on the same page as the thumbnails for the images.  Right now I have the thumbnails displayed down one side of the web page and on the other side is my photo gallery.  The photo gallery is where the photos are displayed.  There are 'Next' and 'Previous' links which allows the user to move between each photo.  Now I want the user to be able to click on one of the thumbnails and that image will display.  Does anyone have any ideas how I should do this?  Should I use php or would javascript or css be a better idea??

 

This is code from the webpage where the photo gallery and thumbnails are displayed...

<div id="content1">
	<div id="sidebar">
        	<p>this is the bar</p>
            <?php include('thumbnails.php');?>
        </div>
        
        <div id="photoContent">
            <?php include('photoGallery.php');?>
        </div>

    </div>

 

This is from the file that creates the thumbnails..

 

while (array is not empty) 
{

$currentImage = "images//" . substr(strrchr($row['Path'],92),1);


   $counter++;
   
   if ($counter % 3 == 0)
   {
	echo "<a href=#><img src='thumb.php?image=$currentImage' alt='' /></a><br/>";
   }
   else
   {
	echo "<a href=#><img src='thumb.php?image=$currentImage' alt='' /></a>";
   }
   
}

 

This is code that creates the photo gallery..

 

while (array is not empty) 
{
$descriptions[$counter] = $row['pictures.Description'];
$paths[$counter] = substr(strrchr($row['Path'],92),1);
   $counter++;
   
}

$imgIndex = $_GET['img'];

if(!isset($paths[$imgIndex]))
{
    $imgIndex = 0;
}

$currentImage = "images//" . $paths[$imgIndex];

if ($imgIndex<=0)
{
    $prev = "Previous";
}
else
{
$prev = "<a href=\"".$_SERVER['SCRIPT_NAME']."?page=photo&img=".($imgIndex-1)."&ID=".$albumID."\">Previous</a>";

}

if ($imgIndex>=(count($paths)-1))
{
    $next = "Next";
}
else
{
$next = "<a href=\"".$_SERVER['SCRIPT_NAME']."?page=photo&img=".($imgIndex+1)."&ID=".$albumID."\">Next</a>";

}


echo "<div id='photoLinks'><pre>$prev                       $next</pre><br></div>";
echo "<div id='photoBody'></br><h2>$titles[$imgIndex]</h2>";
echo "<img src=\"{$currentImage}\"></br></br>";
echo "<p>$descriptions[$imgIndex]</p></div>";

 

I'd really appreciate any advice or suggestions you can give.

 

Thanks

[khr2003]

Hi

It really depends on how you want to do it.

You have number of options:

Displaying the thumbnails on page and once you click on any of them you get the photo in another page.

Displaying the thumbnails and the single large photo in one page, when you click on any thumbnail the page will be refreshed any you will get the new photo.

Or the previous option but using ajax so you do not have to refresh the page to get the new image

 

I think all these three options are valid for you case