Jquery Tools Diaporama et tabs question

Question

J'ai créé l'exemple suivant pour illustrer un problème que j'ai avec un diaporama d'outils jquery. Je souhaite que la liste des titres en bas de la page s'affiche lorsque je fais défiler les points de navigation sous le volet de contenu.

http://testing.lukem.co.uk/slider/slideshow.htm

Il est un moment que je l'ai fait tout javascript ou jquery si tous les pointeurs reçus avec reconnaissance!

Je pense que je peux être en mesure d'y parvenir en utilisant l'API et/ou l'index des onglets.

Un grand merci,

Answer 1

Il est pas joli, mais je piraté cela ensemble rapidement:

$(".slidetabs a").mouseover(function() { 
    // clear styles from the other elements 
    $(".headline-list a").removeClass("current"); 
    // find the corresponding headline and highlight it 
    $(".headline-list a:eq(" + $(this).index() + ")").addClass("current"); 
}); 

Hope it helps. De plus, vous devriez vraiment emballer tout votre code référençant le DOM dans un gestionnaire que vous passez à la fonction document.ready(), qui s'assurera qu'il s'exécute seulement après que le DOM a été entièrement généré. Si vous ne le faites pas, c'est un peu un pot-shot pour savoir si les éléments que vous référencez dans votre script (".slidetabs", par exemple) existeront réellement sur la page lorsque vous essaierez de les rechercher. Voici un exemple d'utilisation document.ready() avec votre code:

$(document).ready(function() { 
    // What is $(document).ready ? See: http://flowplayer.org/tools/documentation/basics.html#document_ready 

    var api = $(".slidetabs").tabs(".images > div",{api: true}); 

    api.onClick(function (tabIndex) { 
     console.log(tabIndex); 
     if (tabIndex === 0) { 
     $("headline-list > li > a.current").hide(); 
     } 
    }); 

    // removed the shorthand $(function() { }); part 
    // since the whole thing is inside the more readable document.ready handler now 

    $(".slidetabs,.headline-list").tabs(".images > div", {event:'mouseover'},{ 

     // enable "cross-fading" effect 
     effect: 'fade', 
     fadeOutSpeed: "slow", 

     // start from the beginning after the last tab 
     rotate: true 

    }).slideshow(); 
}); 

Answer 2

Ajouter un ID à chacun des « onglets » (qui sont affichés comme les points) et vous serez en mesure de trouver le titre correspondant élément de celui-ci. De là, il suffit de s'assurer que c'est le seul avec la classe current.

<!-- the tabs --> 
<div class="slidetabs"> 
    <a id="tab_0" class="current" href="#"></a> 
    <a id="tab_1" href="#"></a> 
    <a id="tab_2" href="#"></a> 
</div> 

... 

$(".slidetabs a").mouseover(function() { 
    $(".headline-list li a").removeClass("current"); 
    var id = $(this).attr("id").substr(4); 
    $(".headline_"+id).addClass("current"); 
}) 

Vous pouvez faire les headline_X - à moins que les classes ids fait ne vous attendez d'avoir plusieurs de chacun, mais ils semblent plus comme des identificateurs uniques que les classes d'éléments qui ont le même comportement.