Effetto Lightbox apertura pagina o sito

 
Spesso capita, entrando in un sito, di vedere un’immagine di apertura (di solito una pubblicità) su sfondo opaco.
L’effetto è ottenuto tramite uno script JavaScript chiamato Lightbox che permette proprio di sovrapporre un’immagine alla pagina.
Lo stesso effetto viene usato anche per la visualizzazione di una galleria di foto.
 
Di seguito è riportato il codice html per ottenere un’immagine sovrapposta alla pagina, visibile all’apertura della pagina.
L’effetto sarà simile a questo.
 
Ecco la pagina di prova index.html:

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<title>Titolo</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
<link rel=”stylesheet” href=”css/lightbox.css” type=”text/css” media=”screen”>
<script src=”js/prototype.js” type=”text/javascript”></script>
<script src=”js/scriptaculous.js?load=effects,builder” type=”text/javascript”></script>
<script src=”js/lightbox.js” type=”text/javascript”></script>
</head>
<body>
<div>
<a id=”first” href=”images/prova.gif” rel=”lightbox[roadtrip]” ><img src=”images/prova.gif” alt=”” width=”1″ height=”1″ title=”prova”></a>
</div>
</body>
</html>

 
L’immagine sovrapposta è prova.gif che deve essere presente nella pagina, ma non visibile. Per questo le dimensioni sono impostate ad 1 pixel x 1 pixel.
 
Nell’ ARCHIVIO ZIP sono presenti tutti i file necessari al funzionamento.
 
FONTEhttp://home.comcast.net/~jscheuer1/side/lightbox2.04a/
 

Effetto Lightbox apertura pagina o sito ultima modifica: 2010-12-27T15:47:28+00:00 da Adriana
Condividi Share on FacebookTweet about this on TwitterShare on Google+Pin on PinterestEmail this to someone

8 thoughts on “Effetto Lightbox apertura pagina o sito

    • Adriana says:

      Come puoi leggere, nel post ho inserito l’intero contenuto di index.html (che dovrebbe essere la homepage del tuo sito). Ma non posso assicurarti che funzioni anche con Joomla.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *