Member Avatar for karen.frias0316
karen.frias0316 0 Newbie Poster

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 
     
*/
x:-o-prefocus, .lb-overlay img {
    height: 100%;
}

</style>


<?php
        $image=''; 
        $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]=";

         $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="'.$imageName.'"'.$count.' /></a></div><div class="lb-overlay" ><a href="#page"><img src="'.$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="'.$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

  • 1 Contributor
  • 0 Replies
  • 124 Views

Dani AI

Generated

The symptom — every thumbnail opening the same image — is almost always caused by every thumbnail linking to the same fragment ID. In the posted loop the thumbnail anchors all point to a single target (e.g. #image-1), so the browser always highlights the first matching overlay. Fix by generating a unique id for each overlay and making the thumbnail href match that id.

Minimal server-side pattern to generate unique targets (conceptual example):

$id = "image-$count";
echo "<a href=\"#{$id}\" class=\"thumb\"><img src=\"{$baseUrl}/{$imageName}\" alt=\"\" /></a>";
echo "<div id=\"{$id}\" class=\"lb-overlay\"><a href=\"#page\"><img src=\"{$baseUrl}/{$imageName}\" alt=\"\" /></a></div>";

Alternatively, use a single overlay and update its image with JavaScript. This is more efficient than duplicating overlays for every image:

document.querySelectorAll('.thumb').forEach(function(t){
  t.addEventListener('click', function(e){
    e.preventDefault();
    document.getElementById('modal-img').src = t.dataset.src;
    document.getElementById('modal').classList.add('open');
  });
});

Troubleshooting checklist:

  • Inspect the rendered HTML (View Source / DevTools) to confirm each <a href="#..."> points to a unique id="...".
  • Ensure ids are valid and not duplicated anywhere on the page.
  • Validate that the thumbnail src and overlay src strings are well-formed (no stray HTML tags or broken quotes).
  • Confirm the CSS relies on :target for fragment-driven overlays; that only works when ids and fragments match.
  • If fragments remain unreliable, prefer the single-overlay + JS approach.

Background reading on the CSS fragment behavior is at the MDN entry for :target (MDN :target) and a concise guide on usage is at CSS-Tricks (). Mention of : the loop logic should be adjusted so the generated href/id pairs are unique per iteration.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.