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