UX & Coding
-50% su Hosting WordPress con Serverplan (codice promo NM50)

Image Lightbox: effetto ingrandimento per le immagini

"Uno script semplice e leggero per consentire di ingrandire a pieno schermo le immagini attraverso un click senza appesantire il caricamento della pagina"

Un’Image Lightbox è una finestra sovrapposta al contenuto della pagina che ha lo scopo di ingrandire una specifica immagine per consentire di visualizzarla in tutta l’area del browser con lo scopo di focalizzare l’utente su di essa.

Sotto un esempio dove si può vedere che al mouseover il cursore mostra un icona di “ingrandimento” ed al click viene estesa l’immagine originale a pieno schermo (o al massimo delle sue dimensioni originali).

Successivamente basterà cliccare in una qualsiasi area della pagina per chiuderla.

Su questo blog l’effetto funziona solo sui dispositivi desktop.

Image Lightbox
Con un click sull'immagine si aprirà una versione a pieno schermo

Ovviamente l’immagine utilizzata dovrà essere di dimensioni maggiori rispetto a come viene presentata nel contenuto o l’effetto Lightbox non farà altro che mostrarla esattamente come viene percepita inizialmente.

Per questa ragione è importante che le risorse siano ben ottimizzate utilizzando strumenti specifici per la riduzione del peso.

Come si implementa l’Image Lightbox

Per gestire l’ingrandimento attraverso Lightbox all’interno di una pagina in modo estremamente semplice e leggero è possibile utilizzare un metodo essenziale che prevede l’utilizzo di una piccolissima libreria JavaScript e qualche riga di CSS.

Gestione dell’HTML

Il primo passo è scegliere quali immagini dovranno avere questa caratteristica (normalmente solo alcune hanno necessità di essere ingrandite) e per farlo basterà utilizzare l’attributo class associando il valore zoom.

<img class="zoom" src="/percorso/immagine.jpg" alt="Testo alternativo" />

In questo modo solo le immagini che avranno all’interno del codice HTML la classe zoom potranno essere ingrandite.

Il codice JavaScript

Questo script basato su jQuery, si divide in tre parti e ha lo scopo di analizzare automaticamente l’immagine e fornire una modale di visualizzazione adatta a qualsiasi situazione o risoluzione.

La prima parte intercetta tutte le immagini che hanno la classe zoom e salva al click alcune informazioni necessarie per visualizzare la versione ingrandita tra cui l’altezza dell’are del browser e il percorso del file.

$('.zoom').click(function() {

var imageUrl = $(this).attr('src');
var imageHeight = $(this).prop('naturalHeight');
var windowHeight = $(window).height();

if (imageHeight > windowHeight) {
var optionalProperty = '; background-size: contain';
} else {
var optionalProperty = '';
}

La porzione successiva costruisce la modale che si sovrapporrà al contenuto e utilizzando la proprietà di background imposta come sfondo l’immagine a piena grandezza rispettando le dimensioni massime del browser (più precisamente della viewport, ovvero l’area del sito visualizzabile in quel momento).

$('body').prepend('<div class="zoomOpen"><div style="background-image: url(' + imageUrl + ')' + optionalProperty + '"></div></div>');
$('html').css('overflow', 'hidden');

Per concludere viene definita l’animazione “effetto zoom” di apertura e chiusura e alcune proprietà tra cui la velocità di esecuzione (espressa in millisecondi) e alcuni accorgimenti per evitare lo scroll del contenuto sottostante.

$('.zoomOpen').animate({
opacity: 1,
zoom: 1
}, 100, function() {
$(this).click(function() {
$(this).animate({
opacity: 0,
zoom: .85
}, 250, function() {
$(this).remove();
$('html').css('overflow', 'auto');
})
})
})
})

L’insieme di queste tre porzioni di codice in accoppiata con jQuery, genera la funzione complessiva per l’effetto Image Lightbox.

CSS per la modale

Aggiungendo al foglio stile queste proprietà si imposteranno le regole generali di impaginazione della modale tra cui margini, colore dello sfondo e grandezza.

.zoom {
cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAABmJLR0QA/wD/AP+gvaeTAAABRElEQVRIie3Vvy5EQRTH8Q/RbImHUVi5/kQh0ZEsD6DkGXTiGfREQqfagmwsCS3eAYVWSbGzMjvu3OsmFMQvmWRy5szvOyd37hn+isai+Rxm8ZbkvOCgwmMLUyW+V7iE8WhhCXtYwWQ0WjUHbSX5K8FnqSx5F108Yb7GOKf5sL8b/DBaCVxjDcdYbAhoh32bwedDKQT6AXTUANTGaQCcp4tlkBh0+AVQGyc5QAp5DiMGdQwqKjKAwqCCTgJIvWrVxqPPFQ3jC03MqlTgNondyFf4r59Xgbskdu8bv0nuFuVuXaV2sJ3ECoNeVPWflK2PeMU/4xSmk5MeYwO9DKSnvNeNeOXaStyLLjI5Q/WxrqLXlUGaAGLQl5rqj70nE0nSMs4wEwbNn99brIrelBjSx36YT0bx15rTD5/foR7C6Nfs+4V6B2p1Sa5+2199AAAAAElFTkSuQmCC"), pointer;
}

.zoomOpen {
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
background: #fff;
padding: 25px;
z-index: 99999;
zoom: .85;
opacity: 0;
cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAABmJLR0QA/wD/AP+gvaeTAAAAp0lEQVRIie2VTQqAIBSE52BBP7evbS47QJ6iNgpio8/8oYgGXEg633ukDvBFrQD6Sl698buoA7ADmAoB1meMVaDBO9qEubSfVuJ3dAhzsQMG0h4oBrHrkwEhUAjCCsoGMUgxwGowRgyizffbUsaADR/ChsqB/orqkX/S5HS5an5Pmt/4nLfrVkyUvsIiKJYHftKx5BPzJDlwBFkfeurmCgAXtFTyepFOkXBc+2M5ykQAAAAASUVORK5CYII="), pointer;
}

.zoomOpen > div {
background-color: #fff;
background-repeat: no-repeat;
background-position: center center;
height: 100%;
width: 100%;
}

L’utilizzo della proprietà cursor permette di utilizzare dei puntatori personalizzati anche sfruttando il formato SVG e rende quindi possibile scegliere quale icona visualizzare.

Codice pronto all’uso

Per avere una buona base di partenza è possibile scaricare un template completo con CSS e JavaScript che integra al suo interno tutto il codice necessario al funzionamento di questo effetto.

Codice completo per ottenere l'effetto di Image Lightbox


L’estrema leggerezza di questa libreria ha il vantaggio di non appesantire la pagina fornendo un effetto di ingrandimento efficace.

Unisciti alla community! Rimani aggiornato, scopri le migliori guide e ricevi risorse gratuite.



Aggiungi un commento

UX & Coding

Articoli recenti

Newsletter

Inserisci la tua email per restare aggiornato sulle ultime novità.