Jquery - Blog Posts

Back to work! #javascript #jquery #bootstrap #developer

Ridimensionare immagini di Lightbox 2

Lightbox è un plugin Javascript basato su jQuery che permette di visualizzare le immagini con un bell'effetto di overlay. Di default le immagini visualizzate con lightbox rimangono nella loro dimensione originale, il che potrebbe essere un problema per immagini troppo grandi, che superano la grandezza della finestra aperta.

Qui di seguito descriverò il metodo per impostare una larghezza di default per le nostre immagini, che si ridimensioneranno automaticamente.

In lightbox.css cambiare

#lightbox img{ width: auto; height: auto;}

in

#lightbox img{max-width: 800px;}

In lightbox.js cambiare

return _this.sizeContainer(preloader.width, preloader.height);

in

if

(preloader.width > 800)

{return _this.sizeContainer(800, preloader.height/(preloader.width/800));}

else

{return _this.sizeContainer(preloader.width, preloader.height);}

(nella versione 2.51 si trova alla riga 205)

Nell'esempio ho messo 800px ma potete usare la dimensione che volete. Nello specifico ho impostato nel css la dimensione dell'immagine, nel js la dimensione del riquadro intorno; se la larghezza è inferiore a 800px, l'immagine non verrà ridimensionata ma verrà visualizzata alla sua dimensione originale.

Questo esempio funziona per l'ultima versione in cui scrivo, la 2.51