Question

我有一个展示来自服务器（最新的）图像的图库，比如缩略图。我需要做的是在用户点击它时以模态弹出窗口显示这些图像。我的问题是，即使您单击其他图像，只有第一个图像显示在弹出窗口中。我一直试图将它整理好几个小时，但没有任何反应。希望你能帮助我，我非常需要帮助。非常感谢提前。请随时编辑我的代码。再次感谢

这是我的HTML部分，我相信这就是我的问题所在：

     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>';

我的HTML在图库页面中得到了回应。

gallery.php

    .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: 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*/
    }

    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>';

            }
    ?>

gallery.css

    .gallery{ !important
        z-index: 1000;
        width:750px;
        height: 900px;
        margin-top: 23px;
        margin-bottom: 13px;
        margin-left: 30px;
        margin-right: 30px;
        overflow-y: auto;
    }
    .outer_cont{ 
        width: 700px;
        height:160px;
        position: relative;
        margin-top: 10px;
        margin-left: 10px;
        margin-bottom: 5px;
    }
    .imagecontainer{
        position: relative;
        margin-left: 10px;
        overflow: hidden;
        float: left;
        width: 250px;
        height: 160px;
        border: 1px solid #999; 
    }
    .images{
        width: 100%;
        height: auto;
    }
    .details{ 
        position: relative;
        margin-left: 10px;
        float: left;
        width: 250px;
        height: 120px;
        padding-top: 20px;
        line-height: 40px;  
    }

模态弹出窗口未在序列中显示正确的图像

0 个答案: