I am making a website on WAMP in which you can store your image and view in lightbox effect and can move between them within the lightbox effect. I able to make the lightbox effect and having difficult to move images between them in lightbox effect
<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>
The 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;
}
The display function
<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>
I am not able to understand how to move between images in lightbox effect.
Thanks in advance
You can solve this with jQuery in a more appropriate way like this :
$(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");
});
}
});
});
Here is a working fiddle : https://jsfiddle.net/rq1vw9wt/1/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.