[Javascript] Problema lightbox

D4rkAng3l · 30-01-2008, 15:29

Ciao,
ho un problema ad usare correttamente il lightbox (premetto che l'ho sempre usato su altri siti e che non mi ha MAI dato problemi di alcun tipo). Il link del prodotto in questione è: http://www.huddletogether.com/projects/lightbox2/

Mentre il link del sito dove mi crea problemi è: http://www.siatec.net/andrea/archivi...2/gallery.html

Praticamente i problemi sono i seguenti:

1) Sul server remoto NON MI VISUALIZZA TUTTE LE MINIATURE (mentre sul mio apache in locale fle visualizza tutte...da cosa può dipendere?!?!)

2) Se con Firefox clickate su di una miniatura di quelle che si vedono...apre la foto ma non compare la barra sottostante con il tasto per chiuderla, con Opera funziona perfettamente mentre con Explorer tale barra si vede male...come risolvere?

Posto anche il codiche HTML e CSS

HTML:

Codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>andreas07: the simple solution template</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="description goes here" />
<meta name="keywords" content="keywords,goes,here" />
<link rel="stylesheet" href="andreas07.css" type="text/css" />
<!--[if IE 6]>
<link rel="stylesheet" href="fix.css" type="text/css" />
<![endif]-->

<script type="text/javascript" src="lightbox/js/prototype.js"></script>
<script type="text/javascript" src="lightbox/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="lightbox/js/lightbox.js"></script>
</head>

<body>
<div id="sidebar">
<h1>Andrea Montepaone</h1>
<h2>Pianista e Compositore</h2>

<div id="menu">
<a href="index.html">Biografia</a>
<a href="#">Discografia</a> 
<a href="#">Colonne Sonore</a> 
<a href="#">Musiche di Scena</a> 
<a href="#">Musica Sacra</a> 
<a href="#">Articoli e Pensieri</a>
<a class="active" href="#">Photogallery</a>
<a href="#">Note di Cinema</a>
<a href="#">Prossimi Appuntamenti</a>
<a href="#">Contatti</a>
</div>

<h3>Citando Baricco:</h3>
<p>Ora tu pensa: un pianoforte. I tasti iniziano. I tasti finiscono. Tu sai che sono 88, su questo nessuno può fregarti. Non sono infiniti, loro. Tu, sei infinito, e dentro quei tasti, infinita è la musica che puoi fare. Loro sono 88. Tu sei infinito...</p>

</div>

<div id="content">
  <div id="header"></div>

<h3>Galleria fotografica:</h3>
<p class="testo">In questa sezione del sito potete trovare l galleria delle immagini di Andrea Montepaone, fotografie tratte da vari eventi musicali e legate all'attività artistica di Andrea.</p>

        <div id="gal">
        <p class="galleria_light">
        <a href="img/fotografie/1.jpg" rel="lightbox[roadtrip]" title="Andrea Montepaone"><img class=         "orizzontali" src="img/fotografie/1.jpg" alt="foto Andrea Montepaone" /></a>

        <a href="img/fotografie/2.jpg" rel="lightbox[roadtrip]" title="Andrea Montepaone"><img class=         "orizzontali" src="img/fotografie/2.jpg" alt="foto Andrea Montepaone" /></a>
        </p>
        
        <p class="galleria_light">
        <a href="img/fotografie/3.jpg" rel="lightbox[roadtrip]" title="Andrea Montepaone"><img class=         "orizzontali" src="img/fotografie/3.jpg" alt="foto Andrea Montepaone" /></a>

        <a href="img/fotografie/4.jpg" rel="lightbox[roadtrip]" title="Andrea Montepaone"><img class=         "orizzontali" src="img/fotografie/4.jpg" alt="foto Andrea Montepaone in studio" /></a>
        </p>
        
        <p class="galleria_light">
        <a href="img/fotografie/5.jpg" rel="lightbox[roadtrip]" title="Andrea Montepaone"><img class=         "orizzontali" src="img/fotografie/5.jpg" alt="foto Andrea Montepaone" /></a>

        <a href="img/fotografie/6.jpg" rel="lightbox[roadtrip]" title="Andrea Montepaone"><img class=         "orizzontali" src="img/fotografie/6.jpg" alt="foto Andrea Montepaone" /></a>
        </p>
        </div>

</div>
</body>
</html>

CSS:

Codice:

/* andreas07 - an open source xhtml/css website layout by Andreas Viklund - http://andreasviklund.com . Free to use for any purpose as long as the proper credits are given for the original design work.

Version: 1.1, November 28, 2005 */

/**************** Page and tag styles ****************/

body
{margin:0; padding:0; color:#303030; background:#fafafa url(img/bodybg.gif) top left repeat-y; font:76% Verdana,Tahoma,sans-serif;}

ul
{list-style:circle; margin:15px 0 20px 0; font-size:0.9em;}

li
{margin:0 0 8px 25px;}

a
{color:#d85d5d; font-weight:bold; text-decoration:none;}

a:hover
{color:#505050; text-decoration:underline;}

img
{float:left; margin:0 15px 15px 0; padding:1px; background:#ffffff; border:1px solid #d0d0d0;}

a img
{border-color:#d85d5d;}

a img:hover
{background:#d85d5d; border-color:#d85d5d;}

/**************** Sidebar area styles ****************/

#sidebar
{position:absolute; top:0; left:0; width:220px; height:100%; overflow:auto; background:#e0e0e0 url(img/sidebarbg.gif) top right repeat-y; text-align:right;}

body > #sidebar
{position:fixed;}

#sidebar h1
{margin:20px 18px 0 5px; color:#d85d5d; font-size:1.6em; letter-spacing:-2px; text-align:right;}

#sidebar h2, #sidebar h3
{margin:0 20px 18px 5px; color:#808080; font-size:1.1em; font-weight:bold; letter-spacing:-1px; text-align:right;}

#sidebar h3
{margin:20px 18px 4px 5px; color:#606060;}

#sidebar  p
{margin:0 20px 18px 5px; color:#606060; font-size:0.8em;}

#sidebar a
{color:#808080}

/**************** Navigation menu styles ****************/

#menu a
{display:block; width:202px; padding:5px 18px 5px 0; color:#606060; background:#e0e0e0 url(img/sidebarbg.gif) top right repeat-y; font-size:1.8em; font-weight:normal; text-decoration:none; letter-spacing:-2px;}

#menu a:hover 
{color:#303030; background:#f0f0f0 url(img/sidebarbg.gif) top right repeat-y;}

#menu a.active
{padding:5px 18px 5px 0; background:#fafafa; border-top:2px solid #c0c0c0; border-bottom:2px solid #c0c0c0;}

#menu a.active:hover
{color:#505050; background:#fafafa;}

/**************** Content area styles ****************/

#content
{width:520px; margin:0 0 0 240px; padding:20px 0; background:#fafafa;}

#header{
   margin: 0 auto;
   width: 512px;
   height: 200px;
   background-image:url(img/piano.jpg);
   border:3px solid #d0d0d0;
  
}

#content p{
    margin: 0 0 20px 0; 
	line-height: 1.5em;
	text-align: justify;
}

#content h1
{margin:0; color:#d85d5d; font-size:4em; letter-spacing:-5px; text-align:center;}

#content h2
{margin:0; color:#808080; font-weight:normal; font-size:2.5em; letter-spacing:-2px; text-align:center;}

#content h3
{clear:both; margin:30px 0 10px 0; color:#d85d5d; font-weight:normal; font-size: 2em; letter-spacing:-2px;}


/****************** Stile LightBox **********************************/

#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(lightbox/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(lightbox/images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(lightbox/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;	}	
		
#overlay{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
	background-color: #000;
	}

/************************ Stile della galleria delle immagini ************************/
p.galleria_light{
    line-height: 0px;
}

div#gal{
margin: 0 auto;
padding: 0;
text-align: center;
}
    

img.orizzontali{
     width: 200px;
	 height: 150px;
}

img.verticali{
     width: 129px;
	 height: 177px;
}

Grazie
Andrea

Strumenti
Mostra una versione stampabile Invia questa pagina per email