0
我正在製作一個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>
我無法理解如何在燈箱效果中的圖像之間移動。
在此先感謝
非常感謝burimi。它適合我 –
@YashAgarwal我很高興聽到 – Burimi
感謝Burimi。你很棒 –