foto's verversen

spongebob · 7 november 2004

hoi! ik werk geregeld aan de website van onze vzw. Maar ik ken eigenlijk nix van html en de site is het resultaat van "trial and error". Op de frontpagina staat er een foto die ik om de zoveel weken manueel aanpas en ververs.

Nu heb ik ook een fotoboek op de site met meer dan 600 foto's. Kan er me iemand vertellen hoe (welk script enzo) ik best gebruik om de foto op de frontpagina (bv. om de drie seconden) te vervangen door een andere foto uit die fotoboek.

Onze website heet http://www.appelsien.be en de foto die je ziet (botsauto) daarover gaat het. Alvast bedankt voor alle hulp!

8 november 2004

Ik maak soms gebruik van een scriptje voor een slideshow. Je zult zelf wel wat moeten intypen maar het resultaat is best mooi.

[color:"blue"] Als je dit script te moeilijk vind. Wat ik best kan geloven kun je mss is op het net kijken naar andere slideshows. Er zijn er vast wel waar je niet veel werk mee hebt en die simpeler zijn.

[/color]

Het enigste wat je moet doen is je image de naam Slideshow geven

Code:

 <img height="100" src="../gif/foto1.gif" width="150" alt="Foto 1"  [b]name="SlideShow"[/b]  />

Bij body onload de functie starten.

Code:

<body onLoad="runSlideShow()">

Het script in tussen <head> en </head> plaatsen.

Code:

<!-- Script voor de slideshow 'ondernemingslokketten' --><script language="JavaScript" type="text/javascript" ><!--	// Set slideShowSpeed (milliseconds)	var slideShowSpeed = 5000;	// Duration of crossfade (seconds)	var crossFadeDuration = 3;	// Specify the image files	var Pic = new Array();	// to add more images, just continue	// the pattern, adding to the array below	Pic[0] = '../gif/foto0.gif'	Pic[1] = '../gif/foto1.gif'	// do not edit anything below this line	var t;	var j = 0;	var p = Pic.length;	var preLoad = new Array();	for (i = 0; i < p; i++) {	preLoad[i] = new Image();	preLoad[i].src = Pic[i];	}	function runSlideShow() {	if (document.all) {	document.images.SlideShow.style.filter="blendTrans(duration=2)";	document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";	document.images.SlideShow.filters.blendTrans.Apply();	}	document.images.SlideShow.src = preLoad[j].src;	if (document.all) {	document.images.SlideShow.filters.blendTrans.Play();	}	j = j + 1;	if (j > (p - 1)) j = 0;	t = setTimeout('runSlideShow()', slideShowSpeed);	}		function MM_jumpMenu(targ,selObj,restore){ //v3.0  		eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");  	if (restore) selObj.selectedIndex=0;	}	function MM_findObj(n, d) { //v4.01  	var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {    	d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}	if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];	for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);  	if(!x && d.getElementById) x=d.getElementById(n); return x;	}		function MM_jumpMenuGo(selName,targ,restore){ //v3.0	  var selObj = MM_findObj(selName); if (selObj) MM_jumpMenu(targ,selObj,restore);	}	--></script>

Als je nog en derde foto wilt gebruiken zet je deze er gewoon bij.

Pic[1] = '../gif/foto1.gif'

Pic[2] = '../gif/foto2.gif'

waar foto2.gif de naam van de derde foto is.

Ik hoop dat je hier iets aan hebt.

spongebob · 8 november 2004

dit lijkt op wat ik zoek. Ik zal vanavond of morgen eens sleutelen en kijken of ik de boel aan de praat krijg. Maar ik vraag me alleen af of dit niet simpelder kan.

En hoe zorg je ervoor dat je foto's random (door elkaar) worden weergegeven.

8 november 2004

nu staat er hetvolgende

Code:

j = j + 1;	if (j > (p - 1)) j = 0;

Als je wilt dat het random getoond wordt zult je dit dus moeten vervangen door iets dan random getallen binnen een bepaald grenzen genereerd.

ik denk dat de volgende code wel zal werken (p is de het aantal pics en j de pic die getoont zal worden)

Code:

var ran_unrounded=Math.random()*p;j=Math.round(ran_unrounded);

Goldlabel · 9 november 2004

je zou ook de optie knippen en plakken kunnen gebruiken. <img src="/ubbthreads/images/graemlins/grin.gif" alt="" />

spongebob · 9 november 2004

dit is wellicht een grap, want mijn bedoeling is dat dit automatisch gebeurd en niet met knippen en plakken zoals ik dit nu al doe.

Ik heb ondertussen een proefbladzijde online, maar die werkt nog niet helemaal zoals het moet. Immers, zo eenvoudig blijkt het nu ook weer niet te zijn. Het is me ondertussen al half gelukt met een viertal foto-tjes te randomizen. Maar ik blijf steeds met een melding boven mijn foto zitten.

Dit is overigens mijn voorlopige oefenpagina waar ik in kan klooien vooraleer ik het op de echt zichtbare website gooi (spring staat voor het verspringen van de foto's). Bij het refreshen van de website zal je zien dat dit nog niet helemaal optimaal gebeurd en de storende ">undefined" krijg ik er voorlopig ook nog niet uit.

http://www.appelsien.be/appelsien/spring.html

Duwgati · 9 november 2004

Ik heb wat voor je in elkaar getimmerd. Een aangepaste versie van het script dat ik op mijn site gebruik voor de bannerrotatie in het topframe.

De <BODY ONLOAD......> initialiseert het script, dus die moet je handhaven.

Alle foto's moeten even groot zijn als het initiële image (in dit voorbeeld transparant.gif). Anders worden ze geresized tot dat formaat.

Tijdens het initialiseren en laden van het eerste image wordt het initiële image getoond, daarom gebruik ik daar een transparant image voor.

Dit is de code:

Code:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><script language="JavaScript"><!-- Hide from old browsersvar totalImages = i = 3; // aantal foto's in de roulatievar showTime = 5; 		 // tijd dat de foto getoond wordt in sec.//de foto's die je wilt tonenpicture1 = new Image();picture1.src = "foto.jpg";picture2 = new Image();picture2.src = "animatedgif.gif";picture3 = new Image();picture3.src = "http://www.extern.com/images/plaatje.gif";// de links die aan de foto's gekoppeld moeten wordenlinks = new Array;links[1] = "#";							// als je geen link wilt gebruikenlinks[2] = "http://www.extern.com";		// externe linklinks[3] = "localelink.htm";			// link naar pagina op eigen site// de "alt" text bij de foto'sldescription = new Array;ldescription[1] = "Mijn foto";ldescription[2] = "Nog een foto";ldescription[3] = "Blablabla";// hieronder hoef je niets meer te wijzigenfunction randompicture(){	var randomnumber = Math.random();	i = Math.round( (i - 1) * randomnumber) + 1;	document.picture.src = eval("picture" + i + ".src");}function startTime(){	var time= new Date();	hours= time.getHours();	mins= time.getMinutes();	secs= time.getSeconds();	closeTime=hours*3600+mins*60+secs;	closeTime+=showTime;   	Timer();}function Timer(){	var time= new Date();	hours= time.getHours();	mins= time.getMinutes();	secs= time.getSeconds();	curTime=hours*3600+mins*60+secs	if (curTime>=closeTime){		if (i < totalImages){			i++;			document.picture.src = eval("picture" + i + ".src");		}		else{			i = 1;			document.picture.src = eval("picture" + i + ".src");		}		startTime();	}	else{		window.setTimeout("Timer()",1000)	}}function clickLink(){	window.open ( links[i] )}function descript(){	window.status = ldescription[i]}--></script><head><title>Untitled Document</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head><body onLoad="randompicture(); startTime(); "><a href="" onClick="clickLink(); return false;" onMouseOver="descript(); return true;" onMouseOut="window.status=''"><img src="transparant.gif" border=0 name="picture" width="300" height="200"></a></body></html>

spongebob · 11 november 2004

hoi duwgati, ik heb ondertussen zelf ook al een en ander in elkaar geknutseld op basis wat ik vond in de sourcebestanden van andere websites. Ook jouw scriptje heb ik hiervoor kunnen gebruiken. Alvast bedankt voor het meedenken. Ik heb er dan toch ook maar voor geopteerd om de foto's niet om de zoveel seconden te laten rouleren. Het is de bedoeling dat het toch een beetje rustige pagina's blijven. Nu worden de foto's enkel verwisseld wanneer je opnieuw de pagina inlaadt. Dit procede komt dan ook terug bij zowat al de bladzijden van de website. Zo oogt de website http://www.appelsien.be toch ook een beetje dynamischer zonder dat ik er heel veel manuele verrrichtingen moet doen. Bedankt voor al jullie moeite!

spongebob · 7 december 2004

ondertussen zijn we weer een aantal weken verder en stuit ik op een volgend probleem. Het scriptje dat de foto's doet verversen bij iedere hit deed wat het moet doen bij 20 foto's.

Ik wil er 30 foto's in de carrousel stoppen (ipv de voorgaande 20), maar dit lijkt niet te lukken. Ik dacht enkel 10 foto's bij te voegen en het getal 20 (dat telkens terugkwam in het begin en op het eind van het script) te veranderen in 30, maar zo gaat de vlieger blijkbaar niet op.

Ik ken dus helemaal nix van scripts enzo (dus het is hier allemaal wat met de natte vinger), daarom mijn vraag: wat doe ik mis en hoe kan ik het script wijzigen zodat er toch 30 foto's in de carrousel te zien zijn. Nu is het zo dat de eerste 10 foto's niet doorkomen en een vraagtekentje veroorzaken.

Om te zien waarover het gaat:

dit is de oorspronkelijke fotocaroussel: http://www.appelsien.be/appelsien/appelsien.html

dit is de bedoelde fotocaroussel: http://www.appelsien.be/appelsien/testbank.html

Het script is te bekijken via de bronversie.

Duwgati · 7 december 2004

Je hebt er wel een zooitje van gemaakt als ik het even zeggen mag <img src="/ubbthreads/images/graemlins/anoniem.gif" alt="" /> <img src="/ubbthreads/images/graemlins/loldev.gif" alt="" />

Als je in dat originele script kijkt waar je die 20 foto's in hebt staan, dan zie je dit soort codering staan:

ads[1]

ads[2]

...

ads[19]

ads[20]

En je bent niet op het idee gekomen om iets achter die nummering te zoeken <img src="/ubbthreads/images/graemlins/confused.gif" alt="" />

Denk er nog eens rustig over na zou ik zeggen <img src="/ubbthreads/images/graemlins/xyxthumbs.gif" alt="" />

spongebob · 7 december 2004

ach ja, shit zeg. Hoe had ik nu zo stom kunnen zijn. Jaja, duwgati. Dit had ik inderdaad zelf ook kunnen zien. Wat ben ik stom! <img src="/ubbthreads/images/graemlins/angel.gif" alt="" /> bedankt voor je hulp!

Allez, een eventuele seca2-kraak valt dus zeker niet vanuit deze hoek te verwachten <img src="/ubbthreads/images/graemlins/grin.gif" alt="" />

spongebob · 2 juli 2005

we zijn intussen weer een half jaar verder en hier ben ik weer met een vraagje: het rouleren van de foto's gaat perfect en ook het bijzetten van extra foto's werkt als een trein. Nu heb ik nog een vraagje. Hoe zet ik een link achter iedere foto? dit is bv. een verwijzing naar een bepaalde foto die ververst dient te worden;

...

ads[53].width = "337";

ads[53].height = "225";

ads[53].src = "http://activiteiten.appelsien.be/fotos2005kw2/motortocht36.jpg";

ads[53].border = "0";

...

ik heb onderstaande regel met link bijgevoegd, maar daar lijkt de browser niet in te trappen, wat doe ik fout??

..

ads[53].width = "337";

ads[53].height = "225";

ads[53].href="http://activiteiten.appelsien.be/fotos2005kw2/motortocht.html"; (-> deze regel)

ads[53].src = "http://activiteiten.appelsien.be/fotos2005kw2/motortocht36.jpg";

ads[53].border = "0";

...

het moet op een of andere manier wel mogelijk zijn, maar WTF doe ik fout???

Inloggen

foto's verversen

Aanbevolen berichten

Link naar reactie

Delen op andere sites

Gast

Link naar reactie

Delen op andere sites

Link naar reactie

Delen op andere sites

Gast

Link naar reactie

Delen op andere sites

Link naar reactie

Delen op andere sites

Link naar reactie

Delen op andere sites

Link naar reactie

Delen op andere sites

Link naar reactie

Delen op andere sites

Link naar reactie

Delen op andere sites

Link naar reactie

Delen op andere sites

Link naar reactie

Delen op andere sites

Link naar reactie

Delen op andere sites

Maak een account aan of log in om te reageren

Account aanmaken

Inloggen

Wie is er online 0 leden