5 foto's tonen met een vertraging

Status
Niet open voor verdere reacties.
T

Trace7r

Gebruiker
Lid geworden
18 okt 2007
Berichten
81
Ben hier weer wat aan het prutsen.:rolleyes:
Krijg alle foto's wel te zien maar er zit geen vertraging in.
Dit is de code:
HTML: 
<script type="text/javascript" language="JavaScript">
var iMax = 5  	// dit is het aantal foto's in je folder 
var i = 0		// Teller i
function ToonFoto(){
	if (i < iMax){ 
		i++;
	}
	document.write("<img src='Images/TestFoto/StrBBQ-" + i + ".jpg' alt='foto #" + i + "'>"); 
	setTimeout("ToonFoto()",5000);	
}
ToonFoto();
</script>
Ik zie hier ook aan de kleur dat er een fout is maar snap het niet helemaal.
De eerste 2 worden ondertussen wel weergegeven achter elkaar maar dan stopt het ook.

Dit is te zien op http://users.skynet.be/tomvangael/straatbbq/

Iemand in de buurt die mij kan helpen?

Groeten, trace7r.
 
Hij activeert ze allemaal tegelijk. Als je een timeout doet, wil dat niet zeggen dat het script wordt gepauzeerd. Je kan het beter zo doen:

HTML: 
<script type="text/javascript" language="JavaScript">
var iMax = 5  	// dit is het aantal foto's in je folder 
var i = 0		// Teller i
var FotoInterval = 5000;
var CurTimeOut = 0;
function ToonFoto(){
if (i < iMax){ 
i++;
CurTimeOut += FotoInterval;
}
document.write("<img src='Images/TestFoto/StrBBQ-" + i + ".jpg' alt='foto #" + i + "'>"); 
setTimeout("ToonFoto()",CurTimeOut);	
}
ToonFoto();
</script>
 
Laatst bewerkt:
vOLGENS MIJ mis je nog een stuk script.. want je moet elke foto apart aangeven .. en je images/straatbbq pad afmaken met een .jpg zonder de "" ertussen volgens mij

grtz
 
duurt het niet steeds langer voordat een foto wordt weergegeven op deze manier (na de vorige)? Met CurTimeOut += FotoInterval;

En het lijkt me dat het eindeloos doorgaat aangezien setTimeout onconditioneel geroepen wordt? Maar het kan aan mij liggen.
 
Nog een probleempje

De code die ik nu heb is de volgende:

HTML: 
<script type="text/javascript" language="JavaScript">
var iMax = 5  	// dit is het aantal foto's in je folder 
var i = 0		// Teller i
var FotoInterval = 5000;
var CurTimeOut = 0;

function ToonFoto(){
	if (i < 5){ 
		i++;
		CurTimeOut += FotoInterval;
	}
	document.write("<img src='Images/TestFoto/StrBBQ-" + i + ".jpg' alt='foto #" + i + "'>"); 
	setTimeout("ToonFoto()",CurTimeOut);
	CurTimeOut = 0;	
}
ToonFoto();
</script>

Ik heb er dus "CurTimeOut = 0" tussen gezet om de tijd dus idd terug elke keer op 0 te zetten om alle afbeeldingen na eenzelfde tijd te laten zien, probleem is echter dat ik niet verder geraak dan de 2e afbeelding.
Als je tijdens het tonen van de eerste afbeelding de bronweergave vraagt krijg je voorgaande code, als echter de 2e foto getoond wordt en je vraagt dan de bronweergave dan krijg je volgende code:

HTML: 
<img src='Images/TestFoto/StrBBQ-2.jpg' alt='foto #2'>

Met een fout op de pagina als gevolg, volgens mij moet ik iets anders doen in plaats van het write commando...

In ieder geval al bedankt voor de reacties.

Groeten, Trace7r.
 
Hmm, wat ik zelf heb gezien is dat als je document.write gebruikt nadat de volledige pagina is geladen (nadat de body of html tag is gesloten) dan overschrijft hij de oude pagina. In dat geval bestaat je javascript ook niet meer en kan er dus geen functie geroepen worden.

In plaats van document.write moet je dus zoeits doen. Dit is uit mijn hoofd dus er kan een foutje in zitten.

Code: 
el = document.createElement("img");
el.src = "Images/TestFoto/StrBBQ-"+i+".jpg";
document.body.appendChild(el);
 
Glest bedankt,

Met volgende code worden de foto's één voor één weergegeven, zonder dat de code overschreven wordt:
HTML: 
<script type="text/javascript" language="JavaScript">
var iMax = 5  	// dit is het aantal foto's in je folder 
var i = 0		// Teller i
var FotoInterval = 5000;
var CurTimeOut = 0;

function ToonFoto(){
	if (i < 5){ 
		i++;
		CurTimeOut += FotoInterval;
		el = document.createElement("img");
		el.src = "Images/TestFoto/StrBBQ-"+i+".jpg";
		document.body.appendChild(el);
	}
	//document.container.write("<img src='Images/TestFoto/StrBBQ-" + i + ".jpg' alt='foto #" + i + "'>"); 
	setTimeout("ToonFoto()",CurTimeOut);
	CurTimeOut = 0;	
}
ToonFoto();
</script>

Het tonen van de foto is ook in het IF gedeelte gezet, want de laatste foto kwam in een loop en werd dan constant bijgeplaatst. :)
Enige probleempje is dat ze weer onder elkaar komen, dus moet ik de pagina telkens terug leeg maken, dat moet ik eerst terug een keertje uitzoeken.

Groeten, Trace7r.
 
Laatst bewerkt:
als je maar één foto wilt laten zien tegelijkertijd kun je ook gewoon de src van één img element vervangen. Dat is een stuk netter dan steeds een nieuwe maken en de oude verwijderen.

oh, en er wordt nu inderdaad geen foto meer getoond na de laatste, maar de functie blijft wel elke 5 seconden geroepen worden. En aangezien curTimeout steeds gereset wordt kan die net zo goed weggelaten worden.


/edit: Ik heb de i++ onderaan de functie gezet. Anders wordt je eerste foto overgeslagen. Als je eerste foto nummer 1 heeft, verander var i = 0 dan in var i = 1
Code: 
var iMax = 5  	// dit is het aantal foto's in je folder 
var i = 0		// Teller i
var FotoInterval = 5000;


function ToonFoto(){
	if (i < iMax){ 
		el = document.createElement("img");
		el.src = "Images/TestFoto/StrBBQ-"+i+".jpg";
		document.body.appendChild(el);
		//document.container.write("<img src='Images/TestFoto/StrBBQ-" + i + ".jpg' alt='foto #" + i + "'>"); 
		i++;
		setTimeout("ToonFoto()",FotoInterval);
	}
}
ToonFoto()


Als je maar één foto tegelijkertijd wilt laten zien moet je het even zeggen ;)
 
Laatst bewerkt:
Glest,

Daarom heb ik juist i=0 gezet, zodoende dat ik van foto1 kan vertrekken, dit klopt wel hoor, het is inderdaad de code nog om elke foto appart te laten zien op eenzelfde plaats, heb dit al geprobeerd in een DIV of zo te zetten maar dat is me tot hiertoe nog niet gelukt.

Groeten, Trace7r.
 
Dan zou ik één plaatje neerzetten met alvast img1 erin geladen en de id "image". Het tweede img element is om het plaatje alvast te laden tijdens de 5 seconden voordat het weergegeven moet worden.

Ook moest i < iMax vervangen worden door i <= iMax aangezien i pas verhoogd wordt nadat het plaatje ververst wordt (door mijn aanpassing tenminste)

Code: 
var iMax = 5;  	// dit is het aantal foto's in je folder 
var i = [b]2[/b];		// Teller i
var FotoInterval = 5000;
var img = document.getElementById("image");
var preLoad = document.getElementById("preLoad");

function ToonFoto()
{
  if (i [b]<[/b]= iMax)
  { 
    [b]img.src = "Images/TestFoto/StrBBQ-"+i+".jpg";
    i++;
    if (i <= iMax)
      preLoad.src = "Images/TestFoto/StrBBQ-"+i+".jpg";[/b]
    setTimeout("ToonFoto()",FotoInterval);
  }
}
ToonFoto();

met de html:
HTML: 
<img id="image" src="Images/TestFoto/StrBBQ-1.jpg">
<img id="preLoad" src="Images/TestFoto/StrBBQ-1.jpg" style="display: none;">
 
Laatst bewerkt:
Opgelost ?!?!?!?!?!?!?

Glest, nogmaals bedankt :thumb:, na nog wat foefelaré, trukaré :cool: ben ik tot volgende code gekomen en werkt perfect, de afwerking zal ik nog wel eens bijschaven maar nu vooral eerst alle foto's een opeenvolgende nummering geven en dan kunnen we ons gezellig BBQ feestje aan iedereen tonen. ;)

HTML: 
<body>
<div align="center"><img src="Images/TestFoto/StrBBQ-1.jpg" name="image" height="420" id="image">
<img src="Images/TestFoto/StrBBQ-1.jpg" name="preLoad" height="420" id="preLoad" style="display:none"></div>
<script type="text/javascript" language="JavaScript">
var iMax = 10
var i = 1
var FotoInterval = 2000;
var img = document.getElementById("image");
var preLoad = document.getElementById("preLoad");
function ToonFoto(){
	if (i < iMax){ 
		img.src = "Images/TestFoto/StrBBQ-"+i+".jpg";
		i++;
    	if (i <= iMax)
      		preLoad.src = "Images/TestFoto/StrBBQ-"+i+".jpg";
	}
	setTimeout("ToonFoto()",FotoInterval);
}
ToonFoto();
  </script>
</body>

Groeten, Trace7r en nogmaals bedankt aan iedereen.
 
hey fijn dat het werkt :)

één dingetje wel, setTimeout("ToonFoto()",FotoInterval); moet binnen de if (i < iMax), anders blijft de functie elke 2 seconden geroepen worden, zonder dat er iets gebeurt.

En je moet of je max 1 hoger maken dan de laatste foto, of er moet staan i <= iMax, anders wordt de laatste foto over geslagen

HTML: 
<body>
<div align="center"><img src="Images/TestFoto/StrBBQ-1.jpg" name="image" height="420" id="image">
<img src="Images/TestFoto/StrBBQ-1.jpg" name="preLoad" height="420" id="preLoad" style="display:none"></div>

<script type="text/javascript" language="JavaScript">
var iMax = 10
var i = 1
var FotoInterval = 2000;
var img = document.getElementById("image");
var preLoad = document.getElementById("preLoad");
function ToonFoto()
{
  if (i <= iMax)
  { 
    img.src = "Images/TestFoto/StrBBQ-"+i+".jpg";
    i++;
    if (i <= iMax)
      preLoad.src = "Images/TestFoto/StrBBQ-"+i+".jpg";
    setTimeout("ToonFoto()",FotoInterval);
  }
}
ToonFoto();
  </script>
</body>
 
Laatst bewerkt:
Alles aangepast en werkt allemaal OK. :thumb:

Maar nog een vraagje, nu weet ik hoe je verschillende foto's kan tonen achter elkaar, hoe doe je dat met tekst, heb geprobeerd een 2e DIV onder die met de foto te zetten en daar een tekst in te zetten zoals, Foto 1 van 139, maar ik krijg mijn variabelen i en iMax niet naar daar geschreven.
Dacht eerst aan document.ToonTekst.write=(Foto 'i' van 'iMax') maar dat blijkt niet te werken.
ToonTekst is de id van de DIV.

Groeten, Trace7r.
 
Opgelost ?!?!?!?!?!?!?

Ok mensen, allemaal bedankt.

De laatst toegevoegde code om de tekst in een DIV te schrijven ziet er als volgt uit:

De functie om de tekst in een bepaalde DIV te zetten:
HTML: 
function WriteDiv(text, id){ 
		x = document.all?document.all[id]:document.getElementById(id); 
		x.innerHTML = text; 
	}
Extra code om elke loop de juiste fotonr te tonen:
HTML: 
                     WriteDiv("Foto " + i + " van " + iMax,"ToonTekst");

Dit werkt dus allemaal:thumb:, ik heb geen uitgebreide tests gedaan in verschillende browsers; maar aangezien de meeste gebruikers IE gebruiken (volgens mijn bescheiden mening) neem ik aan dat alles goed zal werken.
Indien ik nog vragen heb zal ik een ander onderwerp openen en kan ik deze dus met een gerust hart afsluiten.;)

Groeten, Trace7r. :cool:
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan