lighslider-Captions animieren mit animate.css

[philofdeath]

Moin wertes ngb.

Ich verwende lighslider und suche eine Möglichkeit meine Captions pro Slide mit animate.css zu animieren.

[src=html5]
<ul id="team-gallery" class="galleryrr">
<li data-thumb="thumbs/blub_thumb.jpg">
<div class="caption fadeIn">Ich bin eine Beschreibung</div>
<img src="1.jpg">
</li>
</ul>
[/src]

[src=javascript]
// DOCRDY
$(document).ready(function(){

// LIGHTSLIDER
$('#team-gallery').lightSlider({
gallery:true,
item:1,
thumbItem:9,
slideMargin: 0,
speed:500,
auto:true,
loop:true
});
// LIGHTSLIDER-END

}); // DOCRDY-END

[/src]


Hat da jemand eine fixe Lösung?



so long

phil

 

[KingJamez]

Ich kenne den lightSlider jetzt nicht, eine Demo ist bei sowas immer schöner.

Laut der Doku kannst gibt es einen Callback "onAfterSlide".
Du könntest also die captions ausblenden, je nachdem wie du sie einblenden willst, hier mal ein Beispiel für "fadeIn".
[src=css]
.caption.is--hidden {
opacity: 0;
}

.catption.is--visible {
opacity: 1;
transition: opacity 1s ease;
}
[/src]

Mit den Callbacks kannst du dann wunderbar diverse classen hinzufügen.

[src=javascript]
$('#team-gallery').lightSlider({
gallery:true,
item:1,
thumbItem:9,
slideMargin: 0,
speed:500,
auto:true,
loop:true,
onBeforeSlide: function() {
// finde alle slides
// füge .is--hidden hinzu.
$(this).find('.slides').addClass('.is--hidden');
}
onAfterSlide: function() {
// finde den aktiven slide
// entferne .is--hidden
// füge .is--visible hinzu
$(this).find('.slides.active').removeClass('.is--hidden').addClass('.is--visible');
}

});

[/src]

Achtung! der Javascript Code ist eher pseudocode, die bezüge auf classen und $(this) müssen von dir ein deinem script angepasst werden! Ich kenne, wie schon gesagt den lightSlider nicht.

[src=javascript]
$(this)
// ist der interne Bezug auf das $('#team-gallery') jQuery element. Normalerweise sollte das gehen, kann es aber nicht garantieren. Notfalls ginge der Weg über $('#team-gallery'), bei mehreren Instanzen würde das aber crashen!

'.slides' und '.slides.active'
// die klasse slides sind die einzelnen slider Elemente und der aktive, die klasse muss ausgetauscht werden mit der die lightSlider wirklich verwendet.
[/src]

Mit animate.css sollte es genauso gehen, nur das du eben nicht .is--active, .is--visible hinzufügst sondern deine gewünschte Animate.css klasse. Ich finde Animate, für einen simplen fadeIn allerdings etwas overkill.

 

[philofdeath]

Ahh super!
Dank dir. Funktioniert wunderbar. :-)
Habs mir jetzt ein wenig angepasst.

Callback war hier das Stichwort