Fullpage.js + figcaption + Lazyload Einblenden

Question

Ich bin ein Anfänger und kein professioneller Programmierer, der versucht, eine Webseite für meine kleine Architekturfirma zu machen. Ich bin auf Fullpage.js gestoßen und dachte, ich sollte es versuchen. Siehe http://codepen.io/nor159/pen/RayPZB.

<section class="section"> 
<figure class="slide"> 
    <img data-src="http://placekitten.com/g/400/600"> 
    <figcaption>Section 1, slide 1/4</figcaption> 
</figure> 
<figure class="slide"> 
    <img data-src="http://placekitten.com/g/800/300"> 
    <figcaption>Section 1, slide 2/4</figcaption> 
</figure> 
<figure class="slide"> 
    <img data-src="http://placekitten.com/g/500/500"> 
    <figcaption>Section 1, slide 3/4</figcaption> 
</figure> 
<figure class="slide"> 
    <img data-src="http://placekitten.com/g/1200/400"> 
    <figcaption>Section 1, slide 4/4</figcaption> 
</figure> 
</section> 

Jetzt habe ich zwei kleine Probleme und ich kann nicht mehr weiter, weil ich nicht genügend Kenntnisse von CSS und Javascript-Codierung:

1) Alle figcaptions für alle Folien sind auf der gleichen Zeit. Ist es möglich, nur die aktive figcaption sichtbar zu machen?

2) Das Lazyloading von Bildern ist nicht sehr glatt. Kann es einen leichten Ein- und Ausblendeffekt haben?

Grüße, Jan

Answer 1

1. die Zeile entfernen, wo es heißt: fixedElements: 'figcaption', - diese selbsterklärend ist, wird das figcaption Element in der rechten unteren Ecke fixiert.
2. Sie könnten alle Bilder im Voraus mit CSS img {display: none;} verstecken, geben Sie das erste Bild style="display: block;" Attribut und fügen Sie ein Ereignis in Javascript afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){var loadedSlide = $(this).find('img');loadedSlide.fadeIn();}. Reference

Sie können in diesem codepen