Mi è capitato recentemente per un cliente di dover “esaudire” una richiesta ben oltre la fase di progettazione del sito… anzi, dico la verità, ormai a ben oltre la metà dello sviluppo del sito.
La richiesta è stata molto semplice e, allo stesso tempo, molto disarmante:”Possiamo mettere un’immagine di sfondo per ogni categoria del sito? Magari un’immagine sfuocata, diversa per ogni categoria o addirittura prodotto?”.
Ok, PANICO!!! (per i primi 20 secondi)… poi ha prevalso il buon senso e la potenza che ci regala ogni giorno la rete e le sue splendide ed infinite risorse, come ad esempio jQuery e i suoi plug-in!
Allora, dopo una breve ricerca mi sono imbattuto nel più semplice ma efficace plug-in jQuery per dare ad ogni pagina di un sito uno sfondo composto da un’immagine che si ridimensiona ad secondo ogni risoluzione. Impossibile ?! Direi proprio di no!
La risoluzione di tutti i problemi (purtroppo legati solo a questa questione 😉 ) si chiama BackStretch.
Il suo funzionamento è davvero banale, intuitivo e molto molto semplice. Ma non si limita solo ad una “banale” immagini dinamica di sfondo! Assolutamente no! Con BackStretch possiamo addirittura creare slideshow di immagini da impostare come sfondo delle nostre pagine oppure far caricare un’immagine all’interno di uno specifico contenuto o elemento.
Vediamo nello specifico cosa succede. Come prima cosa, creiamo (come sempre) il collegamento a jQuery ed al plug-in.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Dopo aver inserito il collegamento a jQuery passiamo all’HTML della nostra pagina. ATTENZIONE! Lo script per l’immagine va caricato in fondo alla pagina!
<!-- JS --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> </pre> <div align="center"> <h1>Questo è il contenuto della vostra pagina</h1> All'interno potete mettere tutto il contenuto che volete!!! <div style="border: 3px #000000 dashed; width: 800px;"> Altro contenuto del sito Ancora contenuti della tua pagina o del tuo sito web </div> © <a href="https://www.jonathandomenici.com">Jonathan Domenici 2013 - Siti web SEO Livorno</a></div> <pre>
Questa che vi ho riportato è la pagina completa (e funzionante) per intero!
Quello che più ci interessa sono le righe in basso alla pagina, più precisamente queste:
<script src="../lib/jquery.backstretch.js"></script> <script>// <![CDATA[ $.backstretch(["../images/immagine_sfondo.jpg"]); // ]]></script>
Queste righe, naturalmente, specificano il link allo script backstretch ed il caricamento dell’immagine.
Per la DEMO di questo plug-in potete cliccare questo link: Immagine di sfondo adattabile allo schermo jQuery
Per scaricare il plug-in vi riporto il link al sito del produttore: http://srobbin.com/jquery-plugins/backstretch/
