Modal popup: not showing the right image

[karen.frias0316]

Hi all! I have a gallery page which displays images from my server (newset first). now, I need those images to be displayed in a modal popup when users click on it. My problem is that the popup shows only the first image even when you click at others still the first iamge is being shown. I hope you can help me with this. I've been trying to sort for hours now.

My HTML is echoed here in gallery.php after the styling:

<style type="text/css">

.lb-overlay{
    width: 0px;
    height: 0px;
    position: fixed;
    overflow: hidden;
    left: 0px;
    top: 0px;
    padding: 0px;
    z-index: 99;
    text-align: center;
    background: rgb(102,102,102);
    background: -moz-radial-gradient(center, ellipse cover, rgba(102,102,102,0.56) 0%, rgba(102,102,102,1) 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(102,102,102,0.56)), color-stop(100%,rgba(102,102,102,1)));
    background: -webkit-radial-gradient(center, ellipse cover, rgba(102,102,102,0.56) 0%,rgba(102,102,102,1) 100%);
    background: -o-radial-gradient(center, ellipse cover, rgba(102,102,102,0.56) 0%,rgba(102,102,102,1) 100%);
    background: -ms-radial-gradient(center, ellipse cover, rgba(102,102,102,0.56) 0%,rgba(102,102,102,1) 100%);
    background: radial-gradient(center, ellipse cover, rgba(102,102,102,0.56) 0%,rgba(102,102,102,1) 100%);


}


a.lb-close{
    background: #666;
    font-family: Arial, Gadget, Impact, sans-serif;
    z-index: 1001;
    color: #fff;
    position: relative;
    font-size: 12px;
    line-height: 15px;
    text-align: center;
    width: 50px;
    height: 15px;
    display: inline;
    margin: 0 auto;
    overflow: hidden;
    opacity: 0;
    filter: alpha(opacity=0); /* internet explorer */   
}

.lb-overlay img{
    /* height: 100%; For Opera max-height does not seem to work */
    height: 600px;
    width: 600px;
    position: relative;
    display: block;
    margin: 0 auto;
    padding-top: 300px;
    opacity: 0;
    filter: alpha(opacity=0); /* internet explorer */
}

.lb-overlay:target {
    width: auto;
    height: auto;
    bottom: 0px;
    right: 0px;
    margin: 0 auto;

}
.lb-overlay:target img,
.lb-overlay:target a.lb-close{
    opacity: 1;
    filter: alpha(opacity=99); /* internet explorer */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=99)"; /*IE8*/
}
/* 
    100% Height for Opera as the max-height seems to be ignored, not optimal for large screens 
    http://bricss.net/post/11230266445/css-hack-to-target-opera 
*/
x:-o-prefocus, .lb-overlay img {
    height: 100%;
}

</style>


<?php
        $image='https://www.mysite.com/Testupdate/image_entry/'; 
        $count = 0;
        $image_query = mysql_query("SELECT filename FROM tbl_amatest ORDER BY time DESC") or die(mysql_error());
        while($image_data = mysql_fetch_array($image_query)){
         $imageName = stripslashes(mysql_real_escape_string($image_data['filename']));

         $count++; 
         $imagedisp = $image . $imageName;
         $share = "<a onClick=\"window.open('http://www.facebook.com/sharer.php?s=100&amp;p[title]=Amadeus Super Stories&amp;p[caption]=View Gallery&amp;p[summary]=And here is my story.&amp;p[url]=https://www.mysite.com/Testupdate/gallery.php&amp;p[images][0]=";

         $share2 = "','sharer','toolbar=0,status=0,width=548,height=325');\" href=\"javascript: void(0)\"><img src=images/share.jpg></a>";

         echo '<div class="outer_cont">';
         echo '<div class="imagecontainer"><a href="#image-1"><img class="images" src="https://www.mysite.com/Testupdate/image_entry/'.$imageName.'"'.$count.' /></a></div><div class="lb-overlay" ><a href="#page"><img src="https://www.mysite.com/Testupdate/image_entry/'.$imageName.'" /></a><a href="#page" class="lb-close" style="color:#FFF; text-decoration:none;">CLOSE</a></div><div class="details"><div class="fb-like" data-href="https://www.mysite.com/Testupdate/image_entry/'.$imageName.'" data-colorscheme="light" data-layout="button_count" data-action="like" data-show-faces="true" data-send="false"></div> <br /> <div class="share">';
         echo $share . $imagedisp . $share2;

         echo'</div></div></div>';

        }
?>

please help me guys. thank you so much in advance