/ / jQuery Cycle2 bei Hover-Image-Ausgabe - Jquery, Plugins, Zyklus

jQuery Cycle2 bei Hover-Bild Problem - jquery, Plugins, Zyklus

Mit jQuery Cycle2 Plugin Pictures wird das Drehen mit dem Hover auf dem Bild gestartet, was einwandfrei funktioniert, aber wie würde ich zum ersten Bild in der Liste beim Hover-Out-Ereignis zurückkehren.

HTML

  <div class="col-md-15 col-sm-3">
<ul class="cycle-slideshow1"
data-cycle-slides="li"
data-cycle-fx=shuffle
data-cycle-shuffle-right=0
data-cycle-shuffle-top="-75"
data-cycle-timeout=1000
data-cycle-caption="#alt-caption"
data-cycle-caption-template="{{alt}}"
>

<!-- Slideshow
=========================-->
<li><a href="/"><img alt="caption1" class="img-responsive" src="/images//wp-content/uploads/2014/05/1.jpg"/></a></li>
<li><a href="/"><img alt="caption2" class="img-responsive" src="/images//wp-content/uploads/2014/05/2.jpg"/></a></li>
<li><a href="/"><img alt="caption" class="img-responsive" src="/images//wp-content/uploads/2014/05/4_small.jpg"/></a></li>

</ul>
<div class="cycle-caption">SHOP</div>
</div>

jQuery

$(".cycle-slideshow1").cycle("pause");
$(".cycle-slideshow1").hover(function () {
//mouse enter - Resume the slideshow
$(".cycle-slideshow1").cycle("resume");
$(this).parent().find(".cycle-caption").fadeIn();
},
function () {
//mouse leave - Pause the slideshow
$(".cycle-caption").hide();
$(".cycle-slideshow1").cycle("pause");
});

Antworten:

0 für die Antwort № 1

Es gibt einen goto-Befehl für Cycle per the api. Ich habe ihn im mouseout-Bereich des Hover-Event-Handlers hinzugefügt.

$(".cycle-slideshow1").cycle("pause");
$(".cycle-slideshow1").hover(function () {
//mouse enter - Resume the slideshow
$(".cycle-slideshow1").cycle("resume");
$(this).parent().find(".cycle-caption").fadeIn();
},
function () {
//mouse leave - Pause the slideshow
$(".cycle-slideshow1").cycle("goto", 0);
$(".cycle-caption").hide();
$(".cycle-slideshow1").cycle("pause");
});