Jquery Cycle2 Progessive Chargement affichant <script> tag

Question

J'essaye de configurer jquery cycle2 pour charger progressivement un ensemble d'images. Il y a plusieurs objets ".slider" sur la page qui doivent charger des images progressivelly

C'est le HTML

<li class="slider"><img title="Company Name" alt="Company Name" src="/photos/listings/company-name6.jpg"> 
 
<script class="other-slides" type="text/cycle">[<img title='Ad 6 Auto wide' alt='Ad 6 Auto wide' src='/photos/listings/ad-6-auto-wide.jpg'> 
 
<img title='Ad 6 Auto wide' alt='Ad 6 Auto wide' src='/photos/listings/ad-6-auto-wide1.jpg'> 
 
<img title='Ad 6 Auto wide' alt='Ad 6 Auto wide' src='/photos/listings/ad-6-auto-wide2.jpg'> 
 
<img title='Ad 6 Auto wide' alt='Ad 6 Auto wide' src='/photos/listings/ad-6-auto-wide3.jpg'> 
 
<img title='Ad 6 Auto wide' alt='Ad 6 Auto wide' src='/photos/listings/ad-6-auto-wide4.jpg'> 
 
]</script></li>

Ceci est le Javascript

$('.slider').each(function() { 
 
    var $this = $(this); 
 

 
    $this.cycle({ 
 
     slides: '> img', 
 
     sync: true, 
 
     progressive: function() { 
 
      var slides = $('.other-slides', $this).html(); 
 
      return $.parseJSON(slides); 
 
     }, 
 
     speed: 1500, 
 
     timeout: 4000, 
 
     loader: true 
 
    }); 
 
});

L'image initiale est affichée, puis cycles et montre cela Result

Answer 1

Vous êtes presque là. Si vous regardez le progressive example sur le site Web cycle2, il note que la balise de script doit contenir un tableau JSON des diapositives à charger. Chaque diapositive individuelle doit être entourée de guillemets doubles et les diapositives séparées par une virgule.

Voici le JSON pour les diapositives mises à jour progressives:

<script class="other-slides" type="text/cycle"> 
[ 
    "<img title='Ad 6 Auto wide' alt='Ad 6 Auto wide' src='/photos/listings/ad-6-auto-wide.jpg'>", 
    "<img title='Ad 6 Auto wide' alt='Ad 6 Auto wide' src='/photos/listings/ad-6-auto-wide1.jpg'>", 
    "<img title='Ad 6 Auto wide' alt='Ad 6 Auto wide' src='/photos/listings/ad-6-auto-wide2.jpg'>", 
    "<img title='Ad 6 Auto wide' alt='Ad 6 Auto wide' src='/photos/listings/ad-6-auto-wide3.jpg'>", 
    "<img title='Ad 6 Auto wide' alt='Ad 6 Auto wide' src='/photos/listings/ad-6-auto-wide4.jpg'>" 
] 
</script> 

Et voici un working fiddle.