Slide Show

**Nei** · 01-07-2010, 14:53

Ciao ragazzi, sto creando una slide show personalizzata. Di seguito vi posto il codice che funziona parzialmente in ie mentre in ff e opera non da alcun problema!

SWITCH.JS

codice:

nimg = 3;
lndom=34;

function showimg(img){
	dimimg=new Image();
	dimimg.src=img;
	dimimg.onload=function(){
		ww=dimimg.width;
		hh=dimimg.height;
		
		document.getElementById('SLIDE').src=img;
		document.getElementById('SLIDESHOW').style.width=ww;
		document.getElementById('SLIDESHOW').style.height=hh;
		document.getElementById('SLIDESHOW').style.marginLeft=-(ww/2);
		if(document.getElementById('SLIDESHOW').style.display=='')
			document.getElementById('SLIDESHOW').style.display = 'inline';	
	}
}

function shownextimg(){
	path=document.getElementById('SLIDE').src;
	img=parseFloat(path.substring(lndom, lndom+1));
	if(img < nimg) img+=1;
	else img=1;
	showimg('./images/'+img+'.jpg');
}

SlideShow.html

codice:

<html>
	<head>
		<title>Slide Show</title>
		<link rel="stylesheet" type="text/css" href="style.css">
		<script type="text/javascript" src="./switch.js"></script>
	</head>
	<body>
		<div id="SLIDESHOW">
			<img id="SLIDE" onclick="shownextimg();">
		</div>	
		<div id="TB" align="center">
			[img]./tb/1.png[/img]
			[img]./tb/2.png[/img]
			[img]./tb/3.png[/img]
		</div>
	</body>
</html>

E la parte del css che interessa

codice:

#SLIDESHOW{
	position: absolute;
	left: 50%;
	display: none;
}

#TB{
	position: absolute;
	bottom: 0px;
	width: 350px;
	height: 90px;
	left: 50%;
	margin-left: -170px;
	border: solid 1px;	
	overflow: hidden;
}

Con ie all'esecuzione della funzione shownextimg tutto corretto fintanto che img non diventa uguale a nimg. A questo punto img viene sostituito correttamento con il valore 1 (prima immagine) ma alla chiamata della funzione showimg si ferma dopo la seconda istruzione.
Qualcuno sa dirmi perchè?

**Xinod** · 01-07-2010, 15:07

sposta dimimg.src=img; dopo dimimg.onload=function(){...}

**Nei** · 02-07-2010, 08:36

Grazie della risposta Xinod, sostituendo il codice in questo modo:

codice:

function showimg(img){
	dimimg=new Image();
	alert('a');
	dimimg.onload=function(){
		alert('b');
		dimimg.src=img;
		alert('c');	
		ww=dimimg.width;
		hh=dimimg.height;
//codice successivo

arrivo all'alert('a'), ma non vado avanti, sembrerebbe fermarsi su dimimg.onload, questo anche con ff e opera. Qualche altra idea?
Grazie mille!
Simone

**Xinod** · 02-07-2010, 12:29

rileggi quello che ho scritto
dimimg.src=img; dopo la chiusura della funzione onload

**Nei** · 05-07-2010, 08:42

Perfetto! Grazie mille Xinod!
Alla prossima!
Simone

Discussione: Slide Show

Strumenti discussione

Ricerca discussione

Visualizza

Slide Show

Permessi di invio