Elastislide - come farlo funzionare con diverse larghezze di immagine

Question

Sto usando Elastislide per un cursore di immagine per un sito su cui sto lavorando (http://tympanus.net/codrops/2011/09/12/elastislide-responsive-carousel/).

Amo il plug in e funziona bene in questo sito reattivo (l'ho modificato per far scorrere solo un'immagine alla volta in base a questa risposta: elastislide move one at a time), tuttavia vorrei anche modificare il JS in modo che funziona con immagini di larghezza variabile.

Attualmente itemSpace viene calcolato in base alla prima larghezza dell'immagine e funziona correttamente se tutte le immagini hanno le stesse dimensioni. Ma non appena metti insieme un mucchio di immagini tutte con diverse larghezze, allora la matematica è sbagliata e scivola nelle posizioni sbagliate.

Ho provato a giocare con cose diverse nel JS e non riesco a farlo funzionare.

Qualsiasi suggerimento sarebbe apprezzato, grazie!

Answer 1

Il problema che si ha è che il plug-in scatta sempre la prima immagine e usa quella altezza/larghezza predefinita per essa.

Ci sono due modi per procedere.

1. La via più semplice È possibile ridimensionare tutte le immagini alla stessa dimensione (sia che si tratti a mano o PHP/C#).

2. The Hard Way Dal _setItemsSize: function() (in js/jquery.elastislide.js) è dove il codice è, che sta allestendo la matematica, questo è dove è possibile modificarlo. Tuttavia questo codice verrà colpito una sola volta, da self.layout() nel costruttore ($ .Elastislide.prototype = {). Se avete intenzione di farlo in questo modo, quindi è necessario modificare il (w) in setItemsSize e calcolare la migliore larghezza% da usare.

Tuttavia vorrei suggerire ridimensionamento delle immagini sopra scherzi con la matematica, solo perché che ti porterà il risultato più rapido e si può andare avanti e tornare in questo seguito, se avete tempo nel ciclo di sviluppo .