multi category image slider with jquery

multi category image slider with jquery

/* *********************
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="pagecode">
<div class="work">
<br /><br />

<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 />";

}
}
}
}
}
}


function smallimages($path)
{
echo'<script type="text/javascript"\n;';
// echo'alert("Please $path")\n;';
echo'history.go(-1)\n;';
echo'</script>;';
}
?>

</div>

<div class="RSide">
<div class="BigImage" id="BigImage">
<?php
$bigImg = $company.$scrdir[3]."/1.jpg";
echo'<img src="$bigImg" width="600" height="500" id="BigImg" />';
?>
</div>
<br />
<div class="SmallImages" id="SmallImages">

<img src="../images/s1.jpg" width="60" height="60" />

</div>

</div>

</div>


</div>
</div>


</div>
</div>
<!--  -->
  <script type="text/javascript" src="../includes/slider/demo/scripts/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="../includes/slider/jquery.nivo.slider.js"></script>
    <script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider();
    });
    </script>
  
    <script type="text/javascript" src="../includes/js/small_images.js"></script>
<script type="text/javascript" src="../includes/js/slider.js"></script>    
    <script type="text/javascript">
$(window).load(function() {
$('.BigImage img').attr("src", $('.LSide img').attr("src"));
// alert($('.BigImage img').attr("src").slice(0,-5))
});
</script>   

  
    <script type="text/javascript">

$(function(){
$('.SmallImages img').click(function(){
$('.BigImage img').attr("src", $(this).attr("src"));
});
});
</script>
    

<script type="text/javascript">

</script>
/********************End of workDetails.php**********/

/*********thumbs.php******/
<?php
if(isset($_GET['company']))
{
$company = $_GET['company'];
$imagesArr = array();
$i = 0;

/* read the descriptions xml file */
/*
if(file_exists('../thumbs/'.$album.'/desc.xml')) {
    $xml = simplexml_load_file('../thumbs/'.$album.'/desc.xml');
}
*/
/* read the images from the album and get the
 * description from the XML file:
 */
 
if(file_exists($company)) {
    $xml = simplexml_load_file($company);
}
if(is_dir($company)) {
$files = array_slice(scandir($company), 2);
foreach($files as $file){
if($file != "." && $file !="..")
{
$imagesArr[] = array('src' => $company.$file,
'alt' => $company.$file,);
}
}
}
$json = $imagesArr; 
$encoded = json_encode($json);
echo $encoded;
unset($encoded);
}
else
{
echo "Error in sending";
}
?>
/****************End of thumbs.php******/

/********************small_images.js**************************/
$(function(){
//var company = $('#BigImage img').attr("src").slice(0,-5).html();
$('.LSide img').click(function(){
var company =$('.BigImage img').attr("src").slice(0,-5);
$('.BigImage img').attr("src", $(this).attr("src"));
buildThumb(company);
// alert(company);
});

function buildThumb(company){
// alert(company);
$.get('../../ajax/thumbs.php?company='+company, function(data){
var countImages = data.length;
alert(countImages);
var count = 0;
var tContainer = $('<div/>',{
                id : 'thumbsContainer',
                style : 'visibility:hidden;'
            })
for(var i=0; i < countImages; ++i){
$('<img alt="'+data[i].alt+'" height="75" />').load(function(){
                    var $this = $(this);
                    $tContainer.append($this);
                    ++count;
                    if(count==1){
                        /* load 1 image into container*/
                        $('<img id="displayed" style="display:block;" class="SmallImages"/>').load(function(){
                            var $first = $(this);
                           // $('#loading').hide();
                           // resize($first,0);
                            $('#SmallImages').append($first);
//                            $('#description').html($this.attr('title'));
                        }).attr('src',$this.attr('alt'));
                    }
                    if(count == countImages){
                        $('#SmallImages').empty().append($tContainer);
                        //thumbsDim($tContainer);
                        //makeScrollable($('#thumbsWrapper'),$tContainer,15);
                    }
                }).attr('src',data[i].src);
}
// alert(countImages);
},'json');
}


});
/******************End of small_images.js *********************/
/*
I want to load small thumbnails which is below that big image dynamically, when I clicked on left side thumbnail images
*/