Nivo Slider Ritarda solo la prima immagine

Question

FUNZIONA !!! http://jsfiddle.net/jupago/W6CkP/

Sulla base di questa discussione: Pause Nivo Slider

sono stato in grado di capire farlo smettere sulla prima immagine.

Ecco il mio codice. Sto fermando l'animazione due volte perché voglio che si fermi anche dopo finita la presentazione:

$(window).load(function() { 
    $('#slider').nivoSlider({ 
    effect: 'fade', // Specify sets like: 'fold,fade,sliceDown' 
    animSpeed: 500, // Slide transition speed 
    pauseTime: 5000, 
    startSlide: 0, // Set starting Slide (0 index) 
    directionNav: true, // Next & Prev navigation 
    controlNav: false, // 1,2,3... navigation 
    controlNavThumbs: false, // Use thumbnails for Control Nav 
    pauseOnHover: false, // Stop animation while hovering 
    manualAdvance: false, // Force manual transitions 
    prevText: 'previous', // Prev directionNav text 
    nextText: 'next', // Next directionNav text 
    randomStart: false, // Start on a random slide 
    slideshowEnd: function(){   
      $('#slider').data('nivoslider').stop(); 
    setTimeout("$('#slider').data('nivoslider').start()",10000); 
     }, // Triggers when last slide is shown 
    }); 

    $('#slider').data('nivoslider').stop(); 
    setTimeout("$('#slider').data('nivoslider').start()",10000); 
}); 

---

post originale qui:

Sto usando il plugin cursore NIVO e mentre ho preso per funzionare senza problemi, ho bisogno che la prima immagine duri più a lungo del resto (la prima immagine contiene del testo).

Ho creato un violino di lavoro qui: jsfiddle.net/jupago/W6CkP

che dovrebbe rendere molto più facile da capire il problema. Sto ancora allegando codice html da violino prima di rinvio:

HTML:

<div class="slider-wrapper"> 
    <div id="slider" class="nivoSlider"> 
<img src="http://goo.gl/I4c65" /> 
<img src="http://goo.gl/acxBF"/> 
<img src="http://goo.gl/GBzYF"/> 
<img src="http://goo.gl/BC2EA" /> 
<img src="http://goo.gl/9Sd69" /> 
<img src="http://goo.gl/qOaZl"/> 
<img src="http://goo.gl/btswq" /> 
    </div> 
</div> 

JS NIVO:

$('#slider').nivoSlider({ 
    effect: 'fade', // Specify sets like: 'fold,fade,sliceDown' 
    animSpeed: 500, // Slide transition speed 
    pauseTime: 5000, // How long each slide will show 
    startSlide: 0, // Set starting Slide (0 index) 
    directionNav: true, // Next & Prev navigation 
    controlNav: false, // 1,2,3... navigation 
    controlNavThumbs: false, // Use thumbnails for Control Nav 
    pauseOnHover: false, // Stop animation while hovering 
    manualAdvance: false, // Force manual transitions 
    prevText: 'next', // Prev directionNav text 
    nextText: 'previous;', // Next directionNav text 
    randomStart: false, // Start on a random slide 
    beforeChange: function(){}, // Triggers before a slide transition 
    afterChange: function(){}, // Triggers after a slide transition 
    slideshowEnd: function(){}, // Triggers after all slides have been shown 
    lastSlide: function(){}, // Triggers when last slide is shown 
    afterLoad: function(){} // Triggers when slider has loaded 
}); 

Answer 1

si potrebbe provare qualcosa di simile:

$(window).load(function() { 
    var waited = false; 
    $('#slider').nivoSlider({ 
    //... 
    beforeChange: function(){ 
     if(!waited && ($('#slider').data("nivo:vars").currentSlide == 0)) { //first slide 
      //wait a little longer 
      $('#slider').data('nivoslider').stop(); 
      setTimeout(function(){ 
       waited = true; 
       $('#slider').data('nivoslider').start(); 
      }, 2000); //2 seconds 
     } else { 
      waited = false; 
     } 
    }, 
    //... 
    }); 
}); 

EDIT: Non so se il settaggio è davvero necessario, forse solo lo return false lo farebbe.

$(window).load(function() { 
    var waited = false; 
    $('#slider').nivoSlider({ 
    //... 
    beforeChange: function(){ 
     if(!waited && ($('#slider').data("nivo:vars").currentSlide == 0)) { //first slide 
      //wait a little longer 
      return false; 
     } else { 
      waited = false; 
     } 
    }, 
    //... 
    }); 
}); 

Answer 2

Non ho provato questo, quindi non posso garantire che funzionerà, ma una delle cose che si potrebbe provare è in realtà l'impostazione del pauseTime a una funzione invece di una costante, 5000. Dovresti determinare su quale immagine sei, quindi, se è l'immagine desiderata, devi impostare l'ora su qualcosa come 8000, altrimenti lo imposteresti su 5000.

Just to reiterate: NON ho provato questo, né posso garantire che funzionerà. Tuttavia, se lo fa, ti fornirebbe una notevole quantità di extra flessibilità.

Qui è il codice che si usa se si voleva cercare di implementare questa:

... 
pauseTime: function() { 
    if ($("#slider").data("nivo:vars").currentSlide == 0) { 
     return 8000; 
    } 
    return 5000; 
}, 
... 

In alternativa, se questo non funziona nel pauseTime, quindi vorrei provare a mettere quasi lo stesso cosa che in Othe beforeChange opzione, in questo modo:

... 
beforeChange: function() { 
    if ($("#slider").data("nivo:vars").currentSlide == 0) { 
     $("#slider").delay(3000); 
    } 
    return; 
}, 
... 

NOTA IMPORTANTE: si dovrebbe effettivamente sostituire il ....currentSlide == 0) in i campioni sopra con l'accessor per l'opzione startSlide del Nivo Slider, specialmente se si prevede di cambiare l'indice iniziale del cursore.Non ricordo che cosa la funzione di accesso è, ma vorrei l'imaging che sarebbe simile:

....currentSlide == settings.startSlide) 

dove settings è il nome delle impostazioni variabili Nivo utilizza.

UPDATE

Sulla base degli errori che hai menzionato nei vostri commenti, il mio prossimo suggerimento è che si tenta ancora una volta le stesse due soluzioni, ma questa volta sostituisce il setting.startSlide con 0. Se ciò non funziona (anche se dovrebbe), allora dobbiamo tornare al tavolo da disegno. Se funziona, prova a sostituire 0 con this.startSlide. Fammi sapere come funziona.

Answer 3

ho fatto questo e funziona bene:

Nel codice HTML cambio pagina:

$(window).load(function() { 
    $('#slider').nivoSlider({... 

da

$(document).ready(function() { 
    $('#slider').nivoSlider({...