Problema di visualizzazione immagine ingrandita con Lightbox

**bigzip** · 23-04-2007, 17:31

Vorrei fare una pagina con una galleria fotografica usando Lightbox. Ho scaricato la cartella con tutti i file dal sito originario ed ho seguito tutte le istruzioni ma, quando clicco sulla miniatura, si apre l'immagine come se fosse un link.
Ho visto le altre discussioni sul problema senza però venirne a capo.
Di seguito metto il codice della pagina, qualcuno può aiutarmi e dirmi dov'è l'errore?
Grazie

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<link rel="shortcut icon" href="../Nuovo sito/favicon.ico" />

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="it" />

<title>Mie foto</title>
<style type="text/css">

</style>

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

</head>

<body onload="MM_preloadImages(‘/images/menu_on.gif’)…;initLightbox()">

<table width="75%" border="0" align="center" bgcolor="#333333">
<tr>
<td>

</p>
<table width="755" border="0" align="center">
<tr>
<th scope="col" width="20%" bgcolor="#990000">[img]../Nuovo sito/Index_files/LogoTrasparente.gif[/img]</th>
<th scope="col" width="25%" bgcolor="#990000">
<center><span class="Stile2">Circolo Fotografico</span></center>

<center><span class="Stile3">Milano</span></center>
</th><th scope="col" width="20%" bgcolor="#990000">[img]../Nuovo sito/Index_files/Logo_CFC.jpg[/img]</th>
</tr>
</table>
<table width="755" border="0" align="center">

</table>
</div>
</center>

<table width="100%" border="0" align="center">
<tr>
<td> <p align="center">

<span class="Stile11">Mie foto</span></p>

<table width="60%" border="0" align="center">
<tr>
<td width="15%">
<div align="center" class="thumbnail">
[img]Lightbox/images/Thumb.JPG[/img] </div> </td>
<td width="2%"></td>
<td width="15%">
<div align="center" class="thumbnail">
[img]Lightbox/images/Thumb-2.JPG[/img]</div></td>
<td width="2%"></td>
<td width="15%">
<div align="center" class="thumbnail">
[img]Lightbox/images/Thumb-3.JPG[/img]</div></td>
</tr>
<tr>
<td><div align="center" class="Stile17">Calliope (musei vaticani)</div></td>
<td></td>
<td><div align="center" class="Stile17">Canale</div></td>
<td></td>
<td><div align="center" class="Stile17">Cascate di Iguaçu</div></td>
</tr>
<tr>
<td colspan="5"></td>
</tr>
<tr>
<td>
<div align="center" class="thumbnail">
[img]Lightbox/images/cimitero.JPG[/img]</div></td>
<td></td>
<td>
<div align="center">
[img]Lightbox/images/Colosseo-Panorama.JPG[/img]</div></td>
<td></td>
<td>
<div align="center">
[img]Lightbox/images/Costa Azzurra.JPG[/img]</div></td>
</tr>
<tr>
<td><div align="center" class="Stile17">Cimitero</div></td>
<td></td>
<td><div align="center" class="Stile17">Colosseo - Panorama</div></td>
<td></td>
<td><div align="center" class="Stile17">Costa azzurra</div></td>
</tr>
</table>

</p>
</tr>
</table>

</td>
</tr>
</table>

</body>
</html>

**Threepwood** · 24-04-2007, 09:07

ciao io l'ho usata tempo fa... non mi dava problemi anzi

Prova a controllare il codice in questo sito dove l'ho usata (ci sono 2-3 gallerie)

Guarda più che altro come è composto il collegamento

**mircov** · 24-04-2007, 09:37

Originariamente inviato da Threepwood
ciao io l'ho usata tempo fa... non mi dava problemi anzi

Prova a controllare il codice in questo sito dove l'ho usata (ci sono 2-3 gallerie)

Guarda più che altro come è composto il collegamento

Perdonate l'OT. Volevo solo dire che le immagini non vengono in alcun modo ridimensionate. Usare uno script php per gestire le foto e poi non ridimensionarle automaticamente mi sembra assolutamente inutile.

**Threepwood** · 24-04-2007, 09:52

ok ho un'altro script spettacolare che ridimensiona anche le immagini e che è anche + facile da gestire.
basta mettere le immagini nelle cartelle e si crea lui le gallerie...

però devo ancora mettere online il sito quindi non velo posso dare subito

**bigzip** · 24-04-2007, 14:16

Purtroppo ho controllato i collegamenti e mi sembrano corretti di seguito metto anche il foglio css ma non capisco proprio cosa non funziona.

#lightbox{
position: absolute;
left: 0;
width: 100%;
z-index: 100;
text-align: center;
line-height: 0;
}

#lightbox a img{ border: none; }

#outerImageContainer{
position: relative;
background-color: #fff;
width: 250px;
height: 250px;
margin: 0 auto;
}

#imageContainer{
padding: 10px;
}

#loading{
position: absolute;
top: 40%;
left: 0%;
height: 25%;
width: 100%;
text-align: center;
line-height: 0;
}
#hoverNav{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
}
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{
width: 49%;
height: 100%;
background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */
display: block;
}
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{
font: 10px Verdana, Helvetica, sans-serif;
background-color: #fff;
margin: 0 auto;
line-height: 1.4em;
overflow: auto;
width: 100%
}

#imageData{ padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; }

#lightbox img{ border: none; clear: both;}
#overlay img{ border: none; }

#overlay{
position: absolute;
top: 0;
left: 0;
z-index: 90;
width: 100%;
height: 500px;
background-color: #000;
background-image: url(overlay.png);
}

* html #overlay{
background-color: #000;
back\ground-color: transparent;
background-image: url(blank.gif);
filter: progid

XImageTransform.Microsoft.AlphaImageLoader(src="ov erlay.png" , sizingMethod="scale");
}

Discussione: Problema di visualizzazione immagine ingrandita con Lightbox

Strumenti discussione

Ricerca discussione

Visualizza

Problema di visualizzazione immagine ingrandita con Lightbox

Permessi di invio