Question

我正在WAMP上建立一个网站，您可以在其中存储您的图像并以灯箱效果查看，并可以在灯箱效果中在它们之间移动。我能够制作灯箱效果并且难以在灯箱效果中移动它们之间的图像

<html>
<?php 
    $select_image = mysqli_query($conndb,"SELECT * FROM images");
    ?>
    <div id="images" align="left">
<?php
    while($fetch = mysqli_fetch_assoc($select_image)){
        $image_name = $fetch['caption'];
        $image_src = $fetch['image'];
        $image_id = $fetch['id'];
?>
    <div class="image_div">
    <a href="#">
    <img src="<?php echo $image_src;?>" alt="<?php echo $image_name;?>" id="image_from_db" onclick = "display('<?php echo $image_src;?>')">
    </a>
    </div>
<?php 
} 
?>
    </div>
    <div id = 'lightbox'>
        <div class= "limage"></div>
        <div class= "left_btn"></div>
        <div class= "right_btn"></div>
        <div class= "close">
            X
        </div>
    </div>
   <div class="clear"></div>
</html>

css

.image_div{
    width:318px;
    height:318px;
    float:left;
    margin-right:5px;
    margin-bottom:10px;
    position:relative;
}
#lightbox{
    background-color: rgba(0,0,0,0.8);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
}

.close{
    color: #fff;
    border: 1px solid #fff;
    border-radius: 20px;
    position: absolute;
    right: 10px;
    padding: 10px;
    top: 10px;
    font-family: arial;
    font-size: 18px;
    z-index: 11;
    cursor: pointer;
}

.limage img {
    position: absolute;
    margin: auto;
    top: 5%;
    bottom: 5%;
    left: 0;
    right: 0;
}

.left_btn{
    position: absolute;
    width: 50%;
    height: 100%;
    top: 0;
    left: 0;
}

.right_btn{
    position: absolute;
    width: 50%;
    height: 100%;
    top: 0;
    right: 0;
}
.clear {
clear: both;
   }

显示功能

<script>
    function display(src){
        $('.limage').html("<img src="+src+">");
        $('#lightbox').css("display", "block");
        $('#lightbox').fadeIn();

        $('.close').click(function(){
            $('#lightbox').fadeOut();
        });

           $('.right').click(function(){ 
             // code that will excute on click on right
           });

      $('.left').click(function(){ 
        // code that will excute on click on right
      });

    }

</script>

我无法理解如何在灯箱效果中的图像之间移动。

提前致谢

Answer 1

您可以使用jQuery以更合适的方式解决此问题：

$(document).ready(function(){

//Listen on each anchor click which has an image
$(".image_div a").click(function(){
    var el = $(this);
    var img = el.children("img").clone(); //Clone the image child of this element

    var container = el.parents("#images");
    container.find(".image_div.active").removeClass("active"); //use the class active to find out which image is being disapleyd currently

    el.parent().addClass("active");

    $('.limage').html(img); //append the cloned image to lightbox
    $('#lightbox').stop(true,true).fadeIn(); //make sure it fades in by clearing the animation queue
});

$(".close").click(function(){
    $('#lightbox').stop(true,true).fadeOut();
});

$(".right_btn").click(function(){
    var $currentImage = $("#images").find(".image_div.active"); //find the current image holder and get it's next element
    var $nextImage = $currentImage.next();

    if($nextImage.length){
        //hide the lightbox and after the fadeout is done trigger the next element click to show the next image
        $('#lightbox').stop(true,true).fadeOut("fast",function(){
            $nextImage.find("a").trigger("click");
        });
    }
});

$(".left_btn").click(function(){
    var $currentImage = $("#images").find(".image_div.active");
    var $nextImage = $currentImage.prev();

    if($nextImage.length){
        $('#lightbox').stop(true,true).fadeOut("normal",function(){
            $nextImage.find("a").trigger("click");
        });
    }
});

}）;

这是一个工作小提琴：https://jsfiddle.net/rq1vw9wt/1/

https://jsfiddle.net/rq1vw9wt/1/embedded/result/

带有按钮幻灯片的灯箱图片滑块

1 个答案: