JQuery Cycle Questions: Pause sur le chargement + Hover Action

Question

Hé les gars, la construction d'un site et j'ai deux questions pour vous. Le site est hébergé ici pour le moment: http://wesbos.com/tf/shutterflow/?cat=5.

J'ai deux questions:

1. Actuellement, le diaporama fait pivoter divs avec la classe de .slide qui contient l'image. à l'intérieur, une classe de .cover le superpose avec les données/un fond semi-transparent sur.

Si vous essayez ceci, il se charge bien (en raison de l'affichage CSS: aucun sur .cover) mais quand je clique sur une vignette, il charge les deux divs, n'appliquant pas display: none à la div .cover. Il ne disparaît que lorsque je survole. J'utilise le cycle Jquery et mon code ressemble à ceci: (dans shutterflow.js)

$(document).ready(function() { 
$('#slideshow').cycle({ 
    fx:  'fade', 
next: '#next', 
    pause: 1, 
prev: '#prev', 
    pause: '#pause', 
    pager: '.thumbs', 
    pagerAnchorBuilder: function(idx, slide) { 
        var src = $('img',slide).attr('src'); 
        return '<li><a href="#"><img src="' + src + '" height="75" /></a></li>'; 
      } 
}); 

Et

 $(document).ready(  
       function() { 
       $('.slide').hover(
        function() { $(".cover").fadeIn('500'); }, 
        function() { $(".cover").fadeOut('500'); 
       } ); 
     } ); 

Comment puis-je obtenir .Couvrir le matériel pour charger comme affichage: aucun quand une vignette est cliquée?


2. Ma deuxième question devrait être assez facile. En regardant l'extrait ci-dessus, je veux que le diaporama se charge dans un état en pause et ne s'exécute que lorsque le lien de lecture est cliqué.

Answer 1

EDIT: Ajout de la réponse à la première question.

Première question: Ajoutez l'option pagerClick à la fonction cycle.

pagerClick:function(zeroBasedSlideIndex, slideElement) {$(slideElement).find('div.cover').hide();} 

La deuxième question semble facile: basé sur le plug-in doc:

En supposant que vous avez une lecture/pause BTN

btnPlayPause.toggle (function() {$ ("# slideshow") .cycle ('pause');}, function() {$ ("# slideshow.cycle ('resume');})

Vous pouvez également changer l'image du bouton de lecture/pause dans ces fonctions regarder here