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”&gt;
<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”>
http://js/strongprototype.js/strong
http://js/strongscriptaculous.js/strong?load=effects,builder
http://js/stronglightbox.js/strong
</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.
 
FONTE: http://home.comcast.net/~jscheuer1/side/lightbox2.04a/
 

10 commenti

    1. 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.

      "Mi piace"

      Rispondi

  5. Ciao! So che é passato un sacco di tempo da quando hai pubblicato questo Post, ma devo dirti che mi é stato utilissimo! E’ esattamente quel che stavo cercando da due giorni (e notti!). Devo ancora adattarlo alle mie esigenze, ma sono sicuro funzionerá… Grazie ancora. Ciao!

    "Mi piace"

    Rispondi

Lascia un commento

Progetta un sito come questo con WordPress.com
Comincia ora