Archief - Nakijken script dat random images toont

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
B

Bottom

Legacy Member
Na wat zoekwerk heb ik een scriptje kunnen samenstellen dat random images output. Aangezien ik nog niet veel in JS gewerkt heb vroeg ik mij af of ik dit wel op de juiste oplossing is. Kan het op een kortere manier gecodeerd worden? Hoe zouden jullie het aanpakken?

Code: 
var image1 = new Object;
image1.divclass = 'irenegary';
image1.src = 'Images/Pages/gary&irene.jpg';
image1.width = '181';
image1.height = '136';

var image2 = new Object;
image2.divclass = 'irenedonna';
image2.src = 'Images/Pages/donna&irene.jpg';
image2.width = '181';
image2.height = '136';

var image3 = new Object;
image3.divclass = 'houtenbord';
image3.src = 'Images/Pages/M4100053.jpg';
image3.width = '181';
image3.height = '136';

var image4 = new Object;
image4.divclass = 'ijskar';
image4.src = 'Images/Pages/contact.jpg';
image4.width = '180';
image4.height = '135';

var image5 = new Object;
image5.divclass = 'hoed';
image5.src = 'Images/Pages/hoed.jpg';
image5.width = '180';
image5.height = '135';

var image6 = new Object;
image6.divclass = 'rozenGary';
image6.src = 'Images/Pages/rozenGary.jpg';
image6.width = '181';
image6.height = '136';

var MyImages = new Array(image1, image2, image3, image4, image5, image6);

function displayRandomImages(amount)
{
	var Images = MyImages;
	Images.sort(randOrd);
	Images = Images.slice(0, amount);
	for(i=0; i < Images.length; i++)
	{					
		//<div class="irenegary"><img src="Images/Pages/gary&amp;irene.jpg" alt="" width="181" height="136" /></div>
		document.write("<div class=\"" + Images[i].divclass + "\"><img src=\"" + Images[i].src + "\" alt=\"\" width=\"" + Images[i].width + "\" height=\"" + Images[i].height + "\" /></div>");
	}
}

function randOrd(){
	return (Math.round(Math.random())-0.5); 
}
j

j design

Legacy Member
Ik weet ook niet zoveel van JS
Maar dit is hoe ik het zou doen.

Alle afbeeldingen in een array en dan een forlus laten doorlopen zolang de array is.
Uiteindelijk is de informatie van de array het enige dat veranderd.
image[teller].height enzo
d

design1

Legacy Member
Ik weet ook niet zo veel van JScript maar ik vind wel dat het overzichtelijk en er goed uit ziet! Vraagje de onderste functie, is dat de bedoeling om afrondingen te hebben?
Groeten
B

Bottom

Legacy Member
@j design: de bedoeling is om enkele afbeeldingen random te tonen (de afbeeldingen worden trouwens in een array gestoken). In de code hierboven zijn er 6 afbeeldingen. Door het aantal door te geven aan functie displayRandomImages kan je zelf bepalen hoeveel er getoond moeten worden.

@design1:
De functie randord wordt gebruikt om de array van images te sorteren.
Math.random geeft een getal terug tussen 0 en <1 (net geen 1). Door round er rond te plaatsen hebben we dus waarden van 0 en 1 (alles onder 0.5 wordt afgerond tot 0, alles boven 0.5 tot 1)
Daar wordt dan nog eens 0.5 afgetrokken dus de mogelijke waarden zijn -0,5 en 0,5.
De sort functie wordt telkens uitgevoerd op 2 elementen in de array en interpreteert -0,5 als het ene element is kleiner dan het andere (en bij 0,5 het ene is groter dan het andere).
Op die manier krijg je een array die random geordend wordt.
J

Jerre Muesli

Legacy Member
Wel als je enkel de src nodig hebt zou ik het gewoon zo doen:

Code: 
var imgSrcArray=new Array("Images/Pages/hoed.jpg","Images/Pages/contact.jpg","Images/Pages/gary&amp;irene.jpg");

var imgSrc = imgSrcArray[Math.floor(Math.random()*imgSrcArray.length)];

En dan kan je gewoon weetikveel Document.getElementById("fotoDiv").innerHTML="<img src'+imgSrc +'></img>" doen ofzoiets.

Maar als je zoals in je voorbeeld meerdere attributen wil meegeven zou ik het inderdaad zo doen.

Je code is op zich al net genoeg, eigenlijk moet je er niks aan veranderen buiten misschien een randImage object gebruiken en een constructor om het net te houden.

Code: 
function randImage(divclass, src, width, height) {
	this.divclass= divclass;
	this.src= src;
	this.width= width;
	this.height= height;
}

var image1 = new randImage("uw div","uw src","uw width","uw heigth");
var image2 = new randImage("uw div","uw src","uw width","uw heigth");
var image3 = new randImage("uw div","uw src","uw width","uw heigth");
var image4 = new randImage("uw div","uw src","uw width","uw heigth");
d

design1

Legacy Member
@Bottom
Bedankt voor je uitleg voor het random ordenen van de images!
Was zeker leerzaam! :)
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan