La mise en œuvre de jQuery .next() dans une simple image du diaporama

jsFiddle est ici: http://jsfiddle.net/qBQD4/

C'est assez simple en fait, je veux la flèche droite pour déplacer les images vers l'avant, la flèche gauche pour déplacer vers l'arrière dans un diaporama simple. J'ai plusieurs diaporamas en cours d'exécution sur la page que ce code sera mis en œuvre, c'est pourquoi j'ai disparu .next() de la route au lieu de simplement en spécifiant un unique div id. Le code HTML est:

<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>

Et le jQuery, le code est:

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);});
});

Et enfin, un peu de 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
}

La 3ème fonction fonctionne très bien (en cliquant sur l'image passe à la suivante dans la série). Toutefois, les deux premiers sont complètement brisé. Qu'ai-je fait de mal?

OriginalL'auteur JVG | 2012-01-04

  1. 3

    Dans le précédent et suivant les fonctions que vous avez oublié de monter à l'cliqué div parent avant d'essayer de trouver son associé de la galerie, c'est à dire:

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

    Échantillon de travail à http://jsfiddle.net/alnitak/qBQD4/1/

    FWIW, vous devriez vraiment séparer de cette étape dans une variable distincte, et ensuite trouver les images pertinentes:

    var gallery = $(this).parent().next("ul.gallery");
var first = gallery.children(':first');
    Magnifique, merci. Obtenu en seulement 2 min avant de fflorent.

    OriginalL'auteur Alnitak

  2. 1

    Lorsque vous utilisez .prochaine(sélecteur de), vous êtes à la recherche pour les prochaines frères et sœurs correspondant au sélecteur.
    En d'autres mots, vous êtes à la recherche pour la prochaine éléments au même niveau dans l'arborescence DOM.

    Voici le corrigé jsfiddle : http://jsfiddle.net/QALEE/

    Tous vous avez besoin est d'utiliser $(this).parent().suivant("ul.galerie") pour être au bon niveau pour sélectionner le prochain "ul.galerie" élément .

    OriginalL'auteur fflorent

  3. 0

    Écrit-il dans 20 minutes ... peut-être certains officieux codelines, mais qui fonctionne bien.
    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>

    Espère que cela peut aider à sauver quelqu'un un jour.

    OriginalL'auteur mzonerz