[英]Lightbox image slider with button slide
我正在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>
我無法理解如何在燈箱效果的圖像之間移動。
提前致謝
您可以使用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/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.