C'è un modo per passare una funzione di inizializzazione a uno slideshow Orbita?

Question

Ho risolto il mio problema originale, ma mi chiedo se esiste una soluzione più elegante. Sto usando l'Orbit di Fondazione per creare una presentazione. Questa non è una semplice presentazione, è una presentazione in cui ogni diapositiva ha una didascalia di dati definita e all'interno di questa didascalia di dati c'è l'HTML che deve caricare una finestra di dialogo modale.

Se si utilizza Foundation, si pensa immediatamente all'utilizzo della libreria Reveal per visualizzare una finestra di dialogo modale, e lo farei, ma i requisiti richiedono l'uso di prettyPhoto. (. Questi sono i requisiti) Beh, il problema è che gli elementi nei dati-voce non sono interessati dalla chiamata di inizializzazione originale:

$("a[rel^='prettyPhoto']").prettyPhoto();

Che cosa devo fare è assicurarsi di inizializzare i dati di ogni -caption come è caricato. Bene, ecco il problema Ho risolto questo problema per le transizioni delle diapositive usando l'evento afterSlideChange, ma il problema è la prima diapositiva. Devo chiamare questo metodo per la prima diapositiva che viene visualizzata.

Ecco il codice che risolve questo problema:

<script type="text/javascript"> 
$(window).load(function() { 
    $('#featured').orbit({ 
     afterSlideChange:function() { 
      $("a[rel^='prettyPhoto']").prettyPhoto({ 
       default_width:640, 
       default_height:500, 
       theme:'light_square' 
      }); 
     }, // empty function 
     fluid:true       // or set a aspect ratio for content slides (ex: '4x3') 
    }); 
    $("a[rel^='prettyPhoto']").prettyPhoto({ 
     default_width:640, 
     default_height:500, 
     theme:'light_square' 
    }); 
}); 
</script> 

C'è un modo migliore per fare questo senza dover duplicare il codice. Devo definire un evento "initializeSlide" del mio, o c'è qualche risposta che mi manca?

Answer 1

Il cursore Orbita non espone così tanti metodi. Fortunatamente, ci sono alcuni semplici soluzioni alternative.

Ad esempio, è possibile impostare in questo modo:

$(window).load(function() { 
    var sliderChanged = (function sliderChanged(prevActive, active) { 
     $("a[rel^='prettyPhoto']").prettyPhoto({ 
      default_width: 640, 
      default_height: 500, 
      theme: 'light_square' 
     }); 
     return sliderChanged; 
    }()); 
    jQuery('#featured').orbit({ 
     afterSlideChange: sliderChanged, 
     fluid: true 
    }); 
}); 

Answer 2

qui credo è possibile utilizzare evento carico dal jQuery

<script type="text/javascript"> 
    $(window).load(function() { 
     $('#featured').orbit({fluid:true}); 
     $("a[rel^='prettyPhoto']").load(function(){ 
     $(this).prettyPhoto({ 
      default_width:640, 
      default_height:500, 
      theme:'light_square' 
     }); 
     }); 
    }); 
</script> 

Answer 3

Si utilizza Dopo scorrere Change

riferimento Orbit documentation

'afterSlideChange function(){}, //Empty Function for you to use after slide change' 

Quindi questa chiamata svuoterà la funzione e dovrai chiamarla ancora e ancora ..

Ora, la mia domanda è perché lo stai facendo, qualche motivo particolare? In caso contrario, rimuovilo.

e secondo la mia percezione risposta di Rohit sopra farà il resto ...

Spero che questo farà :)

Answer 4

Con l'aggiornamento alla Fondazione 4 ora c'è un evento orbit:ready. L'evento si attiva quando viene caricato il cursore.