Bugfix: ricalcolo altezza di Caroufredsel responsive

Caroufredsel è una ottima e famosa plugin per JQuery (esiste anche un'estensione per Contao 3). Il punto di forza di questo carosello è la possibilità di far scorrere uno o più elementi per schermata, anche di dimensioni differenti, ed in modo responsive, cioè adattandosi alla dimensione del proprio container.
Lo script è molto completo, maggiori informazini le travate nel sito ufficiale.

Mi sono accorto di un problema mentre ridimensionavo la pagina: l'altezza rimaneva della grandezza calcolata inizialmente, e non si adattava all'eventuale dimensione dei contenuti. E' normale che riducendo la pagina i testi vadano a capo, producendo più righe, oppure che le foto si riducano accorciando l'altezza. Il carosello dovrebbe quindi adeguarsi non solo alla larghezza ma anche all'altezza.

Ho cercato una risposta al problema, in Stack Overflow ho trovato uno script che al resize della pagina imposta l'height del carosello e del container come il primo elemento del carosello. Ma questo può andare bene solo se il primo elemento è maggiore o uguale di tutti gli altri, non se è più corto.

Quindi ho cecato ancora, ed ho trovato nella documentazione ufficiale i trigger Get e Set on fly, inoltre, per calcolare in modo più sicuro l'altezza da usare, propongo il seguente script: prima calcolo l'altezza maggiore tra tutti gli elementi figli del carosello, una volta trovata la setto tramite il trigger di configurazione.

$(window).on('resize', function(){

// reset the variable
var biggeritem = 0;

// find the height of the taller item
$(".caroufredsel").children().each(function() {
    var h = $(this).height(); 
    biggeritem = h > biggeritem ? h : biggeritem;
});  

// set the height to the Caroufredsel
$(".caroufredsel").trigger("configuration", ['height', biggeritem]);

}).trigger('resize');

Venerdì 18 Ottobre 2013

(0 commenti)

CSS