带有按钮滑块的灯箱图像滑块

我正在制作一个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>

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

在此先感谢

来源

2015-10-14 Yash Agarwal

您可以在这样一个更合适的方式使用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/

来源

2015-10-14 14:50:18 Burimi

非常感谢burimi。它适合我 –

@YashAgarwal我很高兴听到 – Burimi

感谢Burimi。你很棒 –

带有按钮滑块的灯箱图像滑块

回答

相关问题