Embedding jQuery.next () in a simple image slideshow

Question

jsFiddle here: http://jsfiddle.net/qBQD4/

It is pretty simple; I want the right arrow to move the images forward, the left arrow to move them back in a simple slide show. I have launched several slide shows on the page on which this code will be implemented, so I went along the .next () path, and not just specifying a unique div identifier. HTML:

<div class="media"> <div class="slideButtons"> <span class="prev"><</span> <span class="next">/ ></span> </div> <ul class="gallery" id="olympGallery"> <li><img src="http://i.imgur.com/8aA7W.jpg" alt="" title="" /></li> <li><img src="http://i.imgur.com/jE7vj.jpg" alt="" title="" /></li> <li><img src="http://i.imgur.com/L7lVg.jpg" alt="" /></li> </ul> </div> 

And jQuery code:

 var speed = 100; $(".prev").click(function() { var now = $(this).next("ul.gallery").children(":visible"), last = $(this).next("ul.gallery").children(":last"), prev = now.prev(); prev = prev.index() == -1 ? last : prev; now.fadeOut(speed, function() {prev.fadeIn(speed);}); }); $(".next").click(function() { var now = $(this).next("ul.gallery").children(':visible'), first = $(this).next("ul.gallery").children(':first'), next = now.next(); next = next.index() == -1 ? first : next; now.fadeOut(speed, function() {next.fadeIn(speed);}); }); $(".gallery li").click(function() { var first = $(this).parent().children(':first'), next = $(this).next(); next = next.index() == -1 ? first : next; $(this).fadeOut(speed, function() {next.fadeIn(speed);}); }); 

And finally, some CSS:

 .prev, .next {position: relative; padding: 3px; font-size:50px; font-weight: 900; cursor:pointer; } .gallery li{display:none; list-style:none;} .gallery li:first-child {display:block;} .gallery img { max-height:550px } 

The 3rd function works fine (clicking the image goes to the next in the series). However, the first two are completely destroyed. What have I done wrong here?

Answer 1

In the previous and subsequent functions, you forgot to go up to the clicked parent of the div before trying to find the gallery associated with it, that is:

 var now = $(this).parent().next("ul.gallery").children(":visible") 

Working sample at http://jsfiddle.net/alnitak/qBQD4/1/

FWIW, you should also separate this step into a separate variable, and then find the appropriate image:

 var gallery = $(this).parent().next("ul.gallery"); var first = gallery.children(':first'); 

Answer 2

When you use the .next (selector), you are looking for the following siblings matching the selector. In other words, you are looking for the following items at the same level in the DOM tree.

Here is the corrected jsfiddle: http://jsfiddle.net/QALEE/

All you need to do is use $ (this) .parent (). next ("ul.gallery") to be at a good level to select the next element "ul.gallery".

Answer 3

Wrote it in 20 minutes. Maybe there are some unofficial codes, but it works fine. Js

  $(document).ready(function () { var currentBox=0; $("#Right").click(function () { var tobox = $(".mainbox").length; if(currentBox<tobox-1){ if (currentBox == 0) { //if the first slide $(".mainbox:nth(0)").hide(); $(".mainbox:nth(1)").show(); currentBox = currentBox + 1; //alert("to right:" + tobox +currentBox) ; } else { currentBox = currentBox + 1; var h = currentBox - 1; var s = currentBox; $(".mainbox:nth(" + h + ")").hide(); $(".mainbox:nth(" + s + ")").show(); //alert("to right:" + tobox + currentBox); } } else { $(".mainbox:nth(0)").show(); var a = tobox - 1; $(".mainbox:nth(" + a + ")").hide(); currentBox = 0; //alert("end"); } }); $("#Left").click(function () { var tobox = $(".mainbox").length; if (currentBox == 0) {//if the last slide var a = tobox - 1; $(".mainbox:nth(" + a + ")").show(); $(".mainbox:nth(0)").hide(); currentBox = a; // alert("to left:" + tobox +currentBox) ; } else { // alert("Current box:"+ currentBox); // var h = currentBox; var s = currentBox-1; $(".mainbox:nth(" +h+ ")").hide(); $(".mainbox:nth(" + s + ")").show(); // alert("to right:" + tobox + currentBox); currentBox = currentBox - 1; } //else { alert("end"); } }); }); </script> 

HTML

  <div class="sliderOutbx"> <div class="Content"> <div class="NavLeft"><span id="Left">Left</span></div> <div class="mainbox"> <div class="box">1</div> <div class="box">2</div> </div> <div class="mainbox" style="display:none;"> <div class="box">3</div> <div class="box">4</div> </div> <div class="mainbox" style="display:none;"> <div class="box">5</div> <div class="box">6</div> </div> <div class="NavRight"><span id="Right">Right</span></div> </div> </div> 

Hope this helps someone save the day.