I want to create a photo gallery to display my project images.

The scenario is like this...

Thumbnails, each represnting  a project,  are displayed vertically one below the other on the left of the page.

Each project can have multiple images.

All images are stored in folders/directories on the web server.

When you click on a thumbnail on the left, the first image of that project, by default, should be displayed enlarged on the right, with thumbnails of all the respective project images being displayed below the enlarged image.Each thumbnail of the project images, when clicked on, should show an enlarged version of that image.

I have used the following code which works to an extent, but I am not able to display the thumbnails below the enlarged image. 

<div class="MainCover">

<div class="LSide">

<?php

$directory = "../includes/workImages/";

$dir = opendir($directory);

while($cat = readdir($dir))

{

if($cat != "." && $cat != "..")

{

// echo $cat."<br />";

if($cat == "Ads"){

$company = $directory.$cat."/";

$scrdir = scandir($company);

// echo $scrdir[3];

foreach($scrdir as $com)

{

if($com !='.' && $com !='..')

{

$dirname = $company.$com."/";

$img = glob($dirname . "1.jpg");

// $img2 = glob($dirname . "*.jpg");

foreach($img as $imgpath)

{

// echo $imgpath."<br />";

echo $icon= "<img src='$dirname" .basename($imgpath). "' alt='JPG Picture' border='1px' width=150px height=100px />";

}

}

}

}

}

}

?>

</div>

<div class="RSide">

<div class="BigImage">

<?php

//$bigImgPath = $company.$scrdir[3];

$bigImg = $company.$scrdir[3]."/1.jpg";

$html = "<img src='$company$scrdir[3]/1.jpg' width='600' height='500' id='BigImg' />";

echo $html;

?>

</div>

<br />

<div class="SmallImages">

<?php

$doc = new DOMDocument();

$doc->loadHTML($html);

$xpath = new DOMXPath($doc);

$src = $xpath->evaluate("string(//img/@src)");

if($bigImg != $src)

{ echo $bigImg."<br />";

echo $src;

$smallImgPath = substr($src, 0,-5);

// echo "<br />".$smallImgPath;

$smallImg = glob($smallImgPath . "*.jpg");

foreach($smallImg as $SImg)

{

?>

<img src="<?php echo $smallImgPath.basename($SImg);?>" width="60" height="60" />

<?php

}// For End

}

else

{

$smallImgPath = substr($src, 0,-5);

echo "<br />".$smallImgPath;

$smallImg = glob($smallImgPath . "*.jpg");

foreach($smallImg as $SImg)

{

?>

<img src="<?php echo $smallImgPath.basename($SImg);?>" width="60" height="60" />

<?php

}// For End

}

?>

<br />

<br />

</div>

</div>

</div>