javascript - Not able to create a clicking slideshow -
i'm having problems creating clicking slideshow in jquery. have 5 image display can click on of them , image cover screen. after having image pop up, want click controllers display next image without coming out of current image.
here code in html images
<div class="img-container"> <div class="box-img" > <img src="images/cold.jpg" alt="kikilidesigns" id="1"> </div> <div class="box-img "> <img src="images/dear.jpg" alt="kikilidesigns" id="2"> </div> <div class="box-img"> <img src="images/polar.jpg" alt="kikilidesigns" id="3"> </div> <div class="box-img "> <img src="images/fishing.jpg" alt="kikilidesigns" id="4"> </div> <div class="box-img"> <img src="images/bird.jpg" alt="kikili" id="5"> </div> </div> and i've created container image display:
<div class="img-display"> </div> here js code.
$('.box-img').each(function(){ $(this).click(function(){ var el = $(this).find(':first-child').clone(); $('.img-display').append(el); }); }); when user clicks closing tag image removed img-display allow next image clone , added container.
(this not complete answer, stack overflow won't let me make comment because don't have enough reputation)
the use of each in block of code little strange:
$('.box-img').each(function() { $(this).click(function() { var el = $(this).find(':first-child').clone(); $('.img-display').append(el); }); using each cause click handlers .box-img elements exist within scope of each loop (so once each loop done running, click handlers no longer exist). should able replace following:
$('.box-img').click(function() { var el = $(this).find(':first-child').clone(); $('.img-display').append(el); }); hopefully solves problem.
Comments
Post a Comment