jQuery onclick and change image

Question

I am trying to make a simple jQuery that when an image is clicked, it changes to the next image. I got most of it working, but when the last image is clicked, it ends. I would like it to rotate again to the first image so it continues to rotate indefinitely when clicked.

<li id="t_01">
    <img src="images/tear_sheets/t_02.jpg" alt="" class="image"/>
</li>

http://jsfiddle.net/zLk430dm/

Answer 1

I just insert first li after last li

$("img").click(function () {
    $('#tear_sheets li:first').insertAfter($('#tear_sheets li:last'));
});

Demo: http://jsfiddle.net/8ky8wmb8/

Answer 2

Try this

 $(".box li").click(function() { if ($(this).is(':last-child')) { $(".box li:first-child").addClass("active").nextAll("li").removeClass("active") } else { $(this).next("li").addClass("active").prevAll("li").removeClass("active"); } }) 

 ul { height: 150px; position: relative; width: 150px; } ul li { left: 0; list-style: none; position: absolute; text-decoration: none; top: 0; } ul li { display: none; } ul li.active { display: block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="tear_sheets"> <h2>Tear Sheets</h2> <ul class="box"> <li id="t_01" class="active"> <img src="http://placekitten.com/175/300" class="image" /></li> <li id="t_01"> <img src="http://placekitten.com/250/300" alt="" class="image" /></li> <li id="t_01"> <img src="http://placekitten.com/275/300" alt="" class="image" /></li> <li id="t_01"> <img src="http://placekitten.com/190/300" alt="" class="image" /></li> </ul> </div> 

Update (see Comment) Opacity and transition

 $(".box li").click(function() { if ($(this).is(':last-child')) { $(".box li:first-child").addClass("active").nextAll("li").removeClass("active") } else { $(this).next("li").addClass("active").prevAll("li").removeClass("active"); } }) 

 ul { height: 150px; position: relative; width: 150px; } ul li { left: 0; list-style: none; position: absolute; text-decoration: none; top: 0; } ul li { opacity:0; z-index:-9999; transition: opacity .3s ease; } ul li.active { opacity:1; z-index:1; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="tear_sheets"> <h2>Tear Sheets</h2> <ul class="box"> <li id="t_01" class="active"> <img src="http://placekitten.com/175/300" class="image" /></li> <li id="t_01"> <img src="http://placekitten.com/250/300" alt="" class="image" /></li> <li id="t_01"> <img src="http://placekitten.com/275/300" alt="" class="image" /></li> <li id="t_01"> <img src="http://placekitten.com/190/300" alt="" class="image" /></li> </ul> </div> 

DEMO using fadeIn

 $(".box li").click(function() { if ($(this).is(':last-child')) { $(".box li:first-child").fadeIn("slow").nextAll("li").hide() } else { $(this).next("li").fadeIn("slow").prevAll("li").hide(); } }) 

 ul { height: 150px; position: relative; width: 150px; } ul li { left: 0; list-style: none; position: absolute; text-decoration: none; top: 0; } ul li { display: none; } ul li.active { display: block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="tear_sheets"> <h2>Tear Sheets</h2> <ul class="box"> <li id="t_01" class="active"> <img src="http://placekitten.com/175/300" class="image" /></li> <li id="t_01"> <img src="http://placekitten.com/250/300" alt="" class="image" /></li> <li id="t_01"> <img src="http://placekitten.com/275/300" alt="" class="image" /></li> <li id="t_01"> <img src="http://placekitten.com/190/300" alt="" class="image" /></li> </ul> </div> 

Answer 3

Maybe this is the one that you are trying to achieve:

1. HTML:

    <div id="tear_sheets">
        <h2>Tear Sheets</h2>
        <ul class="box">
        <li id="t_01">  
          <img src="http://placekitten.com/175/300" class="image"/>
          <img src="http://placekitten.com/250/300" alt="" class="image"/>
          <img src="http://placekitten.com/275/300" alt="" class="image"/>
          <img src="http://placekitten.com/190/300" alt="" class="image"/>
            </li>
        </ul>

    </div>

 2. Javascript: 

$(function(){
  $("img").hide();
  $("img").first().show();
});

$("img").click(function () {
  $(this).hide();
   debugger;
    if( $(this).next().length === 0) {
          $("img").first().show();
    }
    else {
         $(this).next().show();
    }


})

Demo: http://jsfiddle.net/zLk430dm/1/

Hope it helps.

Answer 4

You can simply do it with one line script by keep on appending the clicked item to the parent while displaying only the first item:

 $("img").click(function () { $(this).parent("li").appendTo(".box") }) 

 ul li { display:none; text-decoration: none; list-style: none; } ul li:first-child { display:block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="tear_sheets"> <h2>Tear Sheets</h2> <ul class="box"> <li> <img src="http://placekitten.com/175/300" class="image" /> </li> <li> <img src="http://placekitten.com/250/300" alt="" class="image" /> </li> <li> <img src="http://placekitten.com/275/300" alt="" class="image" /> </li> <li> <img src="http://placekitten.com/190/300" alt="" class="image" /> </li> </ul> </div>