jQuery backstretch imposta un’immagine come sfondo del documento e la adatta alle dimensioni della finestra del browser.

jQuery backstretch può essere utilizzato anche per mostrare più immagini di sfondo come slideshow. 

Il funzionamento di jQuery backstretch

Il funzionamento di jQuery backstretch

Come si vede nell’immagine di esempio, quando le proporzioni della finestra del browser sono diverse da quelle dell’immagine quest’ultima viene ridimensionata o ritagliata in modo da coprire l’intera viewport.

Usare jQuery backstretch

Per prima cosa scaricare una copia di jQuery e di backstretch dai relativi siti ufficiali.

Poi, includere una copia di jQuery e di backstretch in fondo al proprio documento, subito prima della chiusura dell’elemento body.

Infine, attivare il plugin con la funzione $.backstretch() che richiede come argomento il percorso dell’immagine da visualizzare.

<!DOCTYPE HTML>
<html lang="it">
<head>
<meta charset="utf-8">
<title>jQuery backstretch | Sintesi-Design.it</title>
</head>
<body>
<!-- Includere jQuery e backstretch -->
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery.backstretch.min.js"></script>
<script>
$(function(){
   // Attivare il plugin quando il documento è pronto per essere manipolato
   $.backstretch("images/Stonehenge.jpg");
});
</script>
</body>
</html>

Come si può visualizzare nella demo, se le dimensioni o le proporzioni dell’immagine sono diverse da quelle della finestra, l’immagine viene ridimensionata o ritagliata.

Backstretch ridimensiona automaticamente l’immagine per adattarla alle dimensioni della finestra perciò è necessario utilizzare immagini molto grandi per non ridurre la loro qualità quando sono visualizzate alle risoluzioni più alte.

Creare una slideshow

La funzione $.backstretch() consente di specificare più immagini mostrate come slide show.

$(function(){
	 $.backstretch([
		"images/Stonehenge.jpg", 
		"images/Buckingham.jpg"], {
		duration: 3000, 
		fade: 750
	});
});

Nell’esempio il primo parametro è un array contenente tutte le immagini da mostrare nella slideshow.

Il secondo parametro, opzionale, è un letterale in cui possono essere specificati nell’ordine:

  1. Il tempo di visualizzazione di ciascuna immagine
  2. La durata dell’effetto dissolvenza tra le due immagini

In entrambi i casi il valore indicato è espresso in millisecondi (1 secondo = 1000).

Visualizza la demo

Nel sito ufficiale di backstretch è mostrato anche come modificare l’immagine mostrata in base a un evento e come adattare l’immagine a un qualsiasi elemento blocco della pagina.