Grandi immagini di sfondo ad alto impatto emozionale sono un’ottima strategia alla quale ogni Web Designer non riuscirebbe a resistere, infatti, la scelta di un’immagine di forte impatto riesce a trasformare completamente l’aspetto di una pagina anche se composta da semplici elementi in quanto riempie completamente lo schermo permettendoci di realizzare un design innovativo che non siamo abituati a vedere.

Oggi, con questo semplicissimo tutorial voglio condividere un semplice ma innovativo plugin jQuery FullScreen che trasforma l’immagine di sfondo visualizzandola a schermo intero indipendentemente dalla dimensione della finestra in modo da non lasciare spazi vuoti rovinando in qualche modo la nostra interfaccia grafica.

L’installazione è semplicissima occorre solamente includere:

  • Foglio di stile
  • Libreria jQuery
  • Relativo plugin jQueryFullScreenr,
  • infine basta fare attenzione a settare le dimensioni dell’immagine originale inserita

Ma vediamo immediatamente come è strutturato il Plugin jQuery FullScreen per implementarlo nelle nostre pagine web.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<title>Fullscreenr v1.0 demo page</title>

	<!-- Inclusione foglio di stile -->
	<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

	<!-- Inclusione libreria jQuery + PluginFullScreenr -->
	<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
	<script src="js/jquery.fullscreenr.js" type="text/javascript"></script>

  <!-- Parametri di settare -->
	<script type="text/javascript">
			var FullscreenrOptions = {
				width: 1024,  // Larghezza Immagine originale
				height: 640, // ALtezza Immagine originale
				bgID: '#bgimg'  // Contenitore dell'immagine
			};
			jQuery.fn.fullscreenr(FullscreenrOptions);
	</script>

</head>

<body>
	<img id="bgimg" src="img/img.jpg" />

	<div id="realBody">
	</div>

</body>

</html>

scarica il zip contenente il plugin funzionante per poterlo utilizzare e testare all’interno del vostro SitoWeb/Blog.

Demo Scarica il sorgente