Foto-gallery in JavaScript: problemi con Internet Explorer
Inviato: 18/12/2011, 13:08
Ciao a tutti!
Devo chiedervi un quesito riguardo una foto-gallery presente nel mio forum.
Per esempio in questa pagina:
http://www.lanciayclubitalia.it/raduni10_19.php
In pratica quando si clicca su una miniatura a sinistra, nel riquadro grande a destra deve o dovrebbe comparire la foto in dimensioni ingrandite ovviamente......questo però succede in FireFox (come mi ha detto chi lo usa) ma NON in Internet Explorer, dove la foto ingrandita appare nella stessa finestra del browser in alto a sinistra con tutto lo sfondo bianco.......in pratica non riconosce quella gallery....
Cerco di spiegare questa foto-gallery....
- Ogni pagina della sezione "Raduni" ha una propria cartella dove inserire le miniature e le immagine ingrandite, i cui nomi vengono elencati nel relativo file .php (in questo esempio raduni10_19.php):
- Per il funzionamento della gallery vengono richiamati nel .php due file in questo modo:
Il contenuto di questi file è il seguente:
* gallery375.css:
* onpage.js:
Come mai non funziona in Internet Explorer come dovrebbe?
Devo chiedervi un quesito riguardo una foto-gallery presente nel mio forum.
Per esempio in questa pagina:
http://www.lanciayclubitalia.it/raduni10_19.php
In pratica quando si clicca su una miniatura a sinistra, nel riquadro grande a destra deve o dovrebbe comparire la foto in dimensioni ingrandite ovviamente......questo però succede in FireFox (come mi ha detto chi lo usa) ma NON in Internet Explorer, dove la foto ingrandita appare nella stessa finestra del browser in alto a sinistra con tutto lo sfondo bianco.......in pratica non riconosce quella gallery....
Cerco di spiegare questa foto-gallery....
- Ogni pagina della sezione "Raduni" ha una propria cartella dove inserire le miniature e le immagine ingrandite, i cui nomi vengono elencati nel relativo file .php (in questo esempio raduni10_19.php):
Codice: Seleziona tutto
<div id="container">
<div id="gallery">
<div id="zoom"><h3 id="titolo">Incontro Sardo 29/07/2010</h3>
<img src="img/raduni/2010/raduno02/raduno1.jpg" id="bigimage" alt="">
<br><b>Per scaricare il materiale [dimensione: circa 12 MB]: </b><a href="img/raduni/2010/raduno19/Cagliari29072010.rar">CLICKA QUI</a>
</div>
<div id="minipics">
<ul>
<li><a href="img/raduni/2010/raduno19/01.JPG"><img src="img/raduni/2010/raduno19/tn_01.JPG" alt="a" title="Incontro Sardo 29/07/2010"></a></li>
<li><a href="img/raduni/2010/raduno19/02.JPG"><img src="img/raduni/2010/raduno19/tn_02.JPG" alt="a" title="Incontro Sardo 29/07/2010"></a></li>
<li><a href="img/raduni/2010/raduno19/03.JPG"><img src="img/raduni/2010/raduno19/tn_03.JPG" alt="a" title="Incontro Sardo 29/07/2010"></a></li>
<li><a href="img/raduni/2010/raduno19/04.JPG"><img src="img/raduni/2010/raduno19/tn_04.JPG" alt="a" title="Incontro Sardo 29/07/2010"></a></li>
<li><a href="img/raduni/2010/raduno19/05.JPG"><img src="img/raduni/2010/raduno19/tn_05.JPG" alt="a" title="Incontro Sardo 29/07/2010"></a></li>
<li><a href="img/raduni/2010/raduno19/06.JPG"><img src="img/raduni/2010/raduno19/tn_06.JPG" alt="a" title="Incontro Sardo 29/07/2010"></a></li>
<li><a href="img/raduni/2010/raduno19/07.JPG"><img src="img/raduni/2010/raduno19/tn_07.JPG" alt="a" title="Incontro Sardo 29/07/2010"></a></li>
<li><a href="img/raduni/2010/raduno19/08.JPG"><img src="img/raduni/2010/raduno19/tn_08.JPG" alt="a" title="Incontro Sardo 29/07/2010"></a></li>
<li><a href="img/raduni/2010/raduno19/09.JPG"><img src="img/raduni/2010/raduno19/tn_09.JPG" alt="a" title="Incontro Sardo 29/07/2010"></a></li>
<li><a href="img/raduni/2010/raduno19/10.JPG"><img src="img/raduni/2010/raduno19/tn_10.JPG" alt="a" title="Incontro Sardo 29/07/2010"></a></li>
</ul>
<div style="clear:left"> </div>
</div>
</div>
</div>- Per il funzionamento della gallery vengono richiamati nel .php due file in questo modo:
Codice: Seleziona tutto
<link rel="stylesheet" href="gallery375.css">
<script type="text/javascript" src="onpage.js"></script>Il contenuto di questi file è il seguente:
* gallery375.css:
Codice: Seleziona tutto
html{margin:0;padding:0}
body{font: 12px arial,sans-serif;margin:0;padding: 0 0px}
img{border:0}
div#container{width:800px;}
div#header img{float:left}
div#header h2{float:left;margin:24px 0 0 20px;font-size:100%}
div#zoom{float:right;margin:0 0 5px 10px;padding: 5px;border:1px solid #666}
div#zoom h3{margin:0;font-size:100%;color: #999;text-align:center}
div#zoom img{display:block;width:500px;height:375px}
div#minipics{margin:10px}
div#minipics ul{list-style-type: none;margin:0;padding: 0}
div#minipics li{float:left;margin:0 5px 5px 5px;border:1px solid #666;padding: 3px}
* onpage.js:
Codice: Seleziona tutto
window.onload=function(){
if(!document.getElementById || !document.getElementsByTagName) return;
links=document.getElementById("minipics").getElementsByTagName("a");
for(i=0;i<links.length;i++)
links[i].onclick=function(){Show(this);return(false)}
}
function Show(obj){
bigimg=document.getElementById("bigimage");
bigimg.src=obj.getAttribute("href");
smallimg=obj.getElementsByTagName("img")[0];
t=document.getElementById("titolo");
t.removeChild(t.lastChild);
t.appendChild(document.createTextNode(smallimg.title));
}Come mai non funziona in Internet Explorer come dovrebbe?
