|
Forum Flash, Actionscript, PHP e MySQL
|
|
|
|
|
|
| Autore |
Messaggio |
Ciel
nuovo utente
Registrato: 18/07/08 14:29
Messaggi: 1
|
 Oggetto: Problema - Galleria Immagini (Javascript,CSS,XHTML)
Inviato: 18.07.08 | 14:59 |
 |
|
Salve a tutti, spero di aver scelto la sezione giusta per questa richiesta mista css/javascript/xhtml.
Sto cercando di usare una gallery fotografica con javascript, ma mi si è presentato un problema con il caricamento delle immagini: essendo una gallery ci sono parecchie immagini e, non so perchè ed è questo il problema, la gallery prima di cominciare a funzionare (a rispondere agli eventi javascript) deve per forza aver caricato prima tutte le immagini. Risultato: un'attesa infinita per poter visualizzare anche solo un'img da 30k.
Vi mostro i codici:
Javascript
| Codice: | clickMenu = function(gallery)
{
var getImg = document.getElementById(gallery).getElementsByTagName("img");
var getLi = document.getElementById(gallery).getElementsByTagName("li");
for (var i=0; i<getImg.length; i++) {
getImg[i].onclick=function() {
if ((this.className.indexOf('left'))!=-1) {
for (var x=getLi.length-1; x>0; x--) {
if ((getLi[x].className.indexOf('chosen'))!=-1) {
getLi[x].className=getLi[x].className.replace("chosen", "");
x--;
if (x>-1) {
getLi[x].className+=" chosen";
if (x>-1 && x<getLi.length-7){
getLi[x].className=getLi[x].className.replace("hide", "");
if ((getLi[x+7].className.indexOf('hide'))==-1)
{
getLi[x+7].className+=" hide";
}
}
}
}
}
}
if ((this.className.indexOf('right'))!=-1) {
for (var x=0; x<getLi.length-1; x++) {
if ((getLi[x].className.indexOf('chosen'))!=-1) {
getLi[x].className=getLi[x].className.replace("chosen", "");
x++;
if (x<getLi.length) {
getLi[x].className+=" chosen";
if (x>6 && x<getLi.length) {
getLi[x].className=getLi[x].className.replace("hide", "");
if ((getLi[x-7].className.indexOf('hide'))==-1)
{
getLi[x-7].className+=" hide";
}
}
}
}
}
}
}
}
for (var i=0; i<getLi.length; i++) {
getLi[i].onclick=function() {
for (var x=0; x<getLi.length; x++) {
if ((getLi[x].className.indexOf('chosen'))!=-1) {
getLi[x].className=getLi[x].className.replace("chosen", "");
}
}
this.className+=" chosen";
}
}
} |
CSS
| Codice: | #galleryLuglio {width:500px; position:relative; height:60px; padding-top:356px; margin:0;}
#galleryLuglio img.left {width:55px; height:62px; background:#ffdef1; float:left;cursor:pointer;}
#galleryLuglio img.right {width:55px; height:62px; background:#ffdef1; float:left;cursor:pointer;}
#galleryLuglio ul {list-style:none; padding:0; margin:0; float:left; background:#ffdef1; border:2px solid #ffdef1; border-width:5px 2px;}
#galleryLuglio ul li {display:inline; width:50px; height:50px; float:left; margin:0 1px; border:1px solid #fff; cursor:pointer;}
#galleryLuglio ul li.hide {display:none;}
#galleryLuglio ul li.lu1 {background:url(img_gallery_campo/small/luglio_small01.jpg);}
#galleryLuglio ul li.lu2 {background:url(img_gallery_campo/small/luglio_small02.jpg);}
#galleryLuglio ul li.lu3 {background:url(img_gallery_campo/small/luglio_small03.jpg);}
#galleryLuglio ul li.lu4 {background:url(img_gallery_campo/small/luglio_small04.jpg);}
#galleryLuglio ul li.lu5 {background:url(img_gallery_campo/small/luglio_small05.jpg);}
#galleryLuglio ul li.lu6 {background:url(img_gallery_campo/small/luglio_small06.jpg);}
#galleryLuglio ul li.lu7 {background:url(img_gallery_campo/small/luglio_small07.jpg);}
#galleryLuglio ul li.lu8 {background:url(img_gallery_campo/small/luglio_small08.jpg);}
#galleryLuglio ul li.lu9 {background:url(img_gallery_campo/small/luglio_small09.jpg);}
#galleryLuglio ul li.lu10 {background:url(img_gallery_campo/small/luglio_small10.jpg);}
#galleryLuglio ul li.lu11 {background:url(img_gallery_campo/small/luglio_small11.jpg);}
#galleryLuglio ul li.lu12 {background:url(img_gallery_campo/small/luglio_small12.jpg);}
#galleryLuglio ul li.lu13 {background:url(img_gallery_campo/small/luglio_small13.jpg);}
#galleryLuglio ul li.lu14 {background:url(img_gallery_campo/small/luglio_small14.jpg);}
#galleryLuglio ul li.lu15 {background:url(img_gallery_campo/small/luglio_small15.jpg);}
#galleryLuglio ul li img {visibility:hidden; display:block; width:50px; height:50px;}
#galleryLuglio ul li span {display:none; position:absolute; left:61px; top:430px; width:411px;font-family:verdana, arial, sans-serif; color:#fb7cd2; font-size:11px; line-height:15px; text-align:justify;}
#galleryLuglio ul li b {color:#ffdef1;}
#galleryLuglio ul li.chosen {border-color:#fb7cd2; cursor:default;}
#galleryLuglio ul li.chosen div {position:absolute; left:0; top:0; width:490px; height:355px; background:#ffdef1; border:1px solid #fb7cd2; border-width:1px 1px 1px 1px;}
#galleryLuglio ul li.chosen div i {width:490px; height:355px; display:table-cell; vertical-align:middle; text-align:center;}
#galleryLuglio ul li.chosen div i img {visibility:visible; width:auto; height:auto; border:1px solid #28b546; margin:0 auto;}
#galleryLuglio ul li.chosen span {display:block;}
/** GIUGNO **/
#galleryGiugno {width:500px; position:relative; height:60px; padding-top:356px; margin:0;} |
XHTML
| Codice: | ...
<script src="galleria_img_script.js" type="text/javascript"></script> <!-- Il file javascript -->
<link rel="stylesheet" media="all" type="text/css" href="g_ilcampo.css" /> <!-- Il file CSS -->
...
<body onload="clickMenu('galleryLuglio')"> <!-- Chiamo la funzione -->
...
<div id="galleryLuglio"> <!-- Il DIV della galleria -->
<img class="left" src="left.gif" alt="" /> <!-- Immagine della freccia 'indietro' -->
<ul>
<li class="chosen lu1"> <!-- Il primo elemento della galleria -->
<div><i><em></em>
<img class="start" src="img_gallery_campo/luglio01.jpg" title="" alt="" />
</i></div>
<span>...ed ecco a voi le reti!</span>
</li>
<li class="lu2">
<div><i><em></em>
<img src="img_gallery_campo/luglio02.jpg" title="" alt="" />
</i></div>
<span>...ed ecco a voi le reti!</span>
</li>
<li class="lu3">
<div><i><em></em>
<img src="img_gallery_campo/luglio03.jpg" title="" alt="" />
</i></div>
<span>...il parcheggio.</span>
</li>
<li class="lu4">
<div><i><em></em>
<img src="img_gallery_campo/luglio04.jpg" title="" alt="" />
</i></div>
<span>...lo sguinzagliatoio comunale!</span>
</li>
<li class="lu5">
<div><i><em></em>
<img src="img_gallery_campo/luglio05.jpg" title="" alt="" />
</i></div>
<span>...il corridoio.</span>
</li>
<li class="lu6">
<div><i><em></em>
<img src="img_gallery_campo/luglio06.jpg" title="" alt="" />
</i></div>
</li>
<li class="lu7">
<div><i><em></em>
<img src="img_gallery_campo/luglio07.jpg" title="" alt="" />
</i></div>
<span>Il campo di obbedienza.</span>
</li>
<li class="hide lu8"> <!-- Il primo elemento nascosto della galleria -->
<div><i><em></em>
<img src="img_gallery_campo/luglio08.jpg" title="" alt="" />
</i></div>
<span>La casetta è finita!!</span>
</li>
<li class="hide lu9">
<div><i><em></em>
<img src="img_gallery_campo/luglio09.jpg" title="" alt="" />
</i></div>
<span>Bellissima!!!!</span>
</li>
</ul>
<img class="right" src="right.gif" alt=""/> <!-- Immagine della freccia 'avanti' -->
</div>
</body> |
Per capire meglio, qui http://kachan.altervista.org/ilcampo.html c'è il risultato completo.
Grazie dell'attenzione. 
____________________________________________________________
do not touch
ciel |
|
| Torna in cima |
|
|
Sponsor
|
|
 |
|
|
Non puoi inserire nuovi Topic in questo forum
Non puoi rispondere ai Topic in questo forum
Non puoi modificare i tuoi messaggi in questo forum
Non puoi cancellare i tuoi messaggi in questo forum
Non puoi votare nei sondaggi in questo forum
Non puoi allegare files in questo forum
Puoi downloadare gli allegati in questo forum
|
|
