Jquery Cycle Fragen: Pause bei Belastung + Hover Action

Question

Hey Leute, baut eine Website und ich habe zwei Fragen für Sie. Die Seite wird derzeit vorläufig gehostet: http://wesbos.com/tf/shutterflow/?cat=5.

Ich habe zwei Fragen:

1. Gegenwärtig dreht die Diashow divs mit der Klasse .slide, die das Bild enthält. In diesem Fall überlagert eine Klasse von .cover es mit den Daten/einem halbtransparenten Hintergrund über.

Wenn Sie dies versuchen, wird es geladen (aufgrund der CSS-Anzeige: keine on.cover), aber wenn ich auf ein Thumbnail klicke lädt beide divs, keine Anzeige: keine auf die .cover div. Es blendet nur aus, wenn ich über den Bildschirm schwebe. Ich benutze JQuery-Zyklus und mein Code sieht wie folgt aus: (in shutterflow.js gefunden)

$(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>'; 
      } 
}); 

Und

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

Wie kann ich .Abdeckung als Anzeige zu laden, erhalten: keine, wenn auf ein Thumbnail geklickt wird?


2. Meine zweite Frage sollte ziemlich einfach sein. Wenn ich das obige Snippet betrachte, möchte ich, dass die Diashow in einem angehaltenen Zustand geladen wird und nur ausgeführt wird, wenn auf den Wiedergabe-Link geklickt wird.

Answer 1

EDIT: Antwort für die erste Frage hinzugefügt.

Erste Frage: Fügen Sie die pagerClick-Option zur Zyklusfunktion hinzu.

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

Die zweite Frage scheint einfach: basiert auf dem Plugin doc:

Angenommen, Sie haben eine Play/Pause BTN

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

Sie können auch das Play/Pause-Button-Bild in diesen Funktionen ändern. Auch Schau here