jQuery fs wallpaper applica un’immagine o un video come sfondo di un elemento e lo adatta alle varie risoluzioni senza alterarne le proporzioni.

Fa parte di una serie di plugin che possono essere usati separatamente, è semplice da usare ed è distribuito con licenza MIT.

Usare jQuery fs wallpaper con un’immagine

Scaricare una copia aggiornata di jQuery fs wallpaper dal sito ufficiale del plugin e poi, includere i file necessari come mostrato nel seguente esempio:

<!DOCTYPE HTML>
<html lang="it">
<head>
<meta charset="utf-8">
<title>jQuery - fs wallpaper | Sintesi-Design.it</title>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/jquery.fs.wallpaper.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.fs.wallpaper.css">
<style>
.wallpapered { background: #eee; margin: 0 0 20px; padding-top: 50%; width: 100%; }
.wallpapered.square { padding-top: 100%; }
.wallpapered.bar { margin: -25px 0; }
</style>
</head>
<body>
    <div id="foto" class="wallpapered"></div>
    <script type="text/javascript">
    $(function() {
	 $("#foto").wallpaper({
		 source: "images/horsehead2.jpg"
	 });
    });
    </script>
</body>
</html>

L’intestazione del documento contiene gli elementi che includono jQuery, il plugin (jquery.fs.wallpaper.min.js) e il relativo file css (jquery.fs.wallpaper.css).

Nel foglio di stile successivo (elemento style) sono definite alcune regole fondamentali per il funzionamento del plugin che consentono anche di modificare l’elemento in cui viene inserita l’immagine.

.wallpapered { background: #eee; margin: 0 0 20px; padding-top: 50%; width: 100%; }
.wallpapered.square { padding-top: 100%; }
.wallpapered.bar { margin: -25px 0; }

L’elemento che contiene l’immagine va marcato con la classe wallpapered. Lo stesso elemento contiene l’attributo id, con il valore foto, così da poterlo selezionare in modo univoco con jQuery.

Aggiungere in fondo al documento un altro elemento script che imposta l’immagine e attiva il plugin.

$("#foto").wallpaper({
    source: "images/horsehead2.jpg"
});

L’istruzione mostrata seleziona l’elemento a cui applicare l’immagine (l’elemento con id uguale a foto) e attiva il plugin con il metodo wallpaper(), in cui è specificata, come argomento, la proprietà source con il percorso dell’immagine.

Visualizza la demo

Usare jQuery fs wallpaper con un video

jQuery fs wallpaper può essere utilizzato anche con un video. In questo caso è necessario modificare lo script finale in cui andranno indicati i file, nei vari formati, e alcune proprietà opzionali.

<div id="video" class="wallpapered"></div>
<script type="text/javascript">
$(function() {
	$("#video").wallpaper({
		autoPlay:true,
		/*hoverPlay: true,*/
		loop: true,
		source: {
		 mp4:  "",
		 ogg:  "images/earth_night_rotate.ogv",
		 webm: "images/earth_night_rotate.webm"
		}
	});
});

La funzione jQuery seleziona l’oggetto in cui inserire il video, nell’esempio è l’elemento con id uguale a video, e poi il metodo wallpaper() attiva il plugin. L’unico argomento obbligatorio è source che indica il percorso del video nei diversi formati: mp4, ogg e webm.

Gli altri argomenti (facoltativi), passati al metodo wallpaper(), consentono di personalizzare il comportamento del plugin:

  • autoPlay: avvia la riproduzione al caricamento della pagina
  • hoverPlay: avvia la riproduzione solo quando il mouse si sovrappone all’elemento
  • loop: riproduce ciclicamente il video all’infinito

Visualizza il risultato finale nella demo.

Informazioni dettagliate sulle altre opzioni del plugin sono disponibili nel sito ufficiale di formstone wallpaper.