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

Popular posts from this blog

jOOQ update returning clause with Oracle -

java - Warning equals/hashCode on @Data annotation lombok with inheritance -

java - BasicPathUsageException: Cannot join to attribute of basic type -