Archief - Javascript : onmiddelijk juiste foto tonen bij laden pagina

Cyberkid · 15 jul 2005

even de situatie schetsen wat ik wil bereiken.
-Er is een pagina met alle thumbs van de foto's op
-Foto's zijn clickable
-1ste foto verwijst naar een pagina met de foto in't groot op en boven aan 2 knoppen: Vorige en Volgende

Dus even dat js posten voor volgende en vorige (werkt perfect):

Code:

<script language="JavaScript">
if(document.images) { 
		currentslide=1; 
		maxslides=9; 								//aantal foto's
		foto = new Array(maxslides+1); 
		for(var n=1;n<=maxslides;n++) { 
			foto[n]=new Image(800,600); 			//afbeelding
			foto[n].src=n +'.jpg'; 		//padnaam
		} 
	} 
	function vorige() { 
		if(document.images) { 
			currentslide--; 
			if(currentslide<1) currentslide=1; 
			document.images['foto'].src=foto[currentslide].src; 
		} 
	} 
	function volgende() { 
		if(document.images) { 
			currentslide++; 
			if(currentslide>maxslides) currentslide=maxslides; 
			document.images['foto'].src=foto[currentslide].src; 
		} 
	} 
</script>

maar nu als ge dus in uw index waar alle thumbs staan op foto 2 klikt krijgt ge op die "fotoalbum" foto 1 te zien aangezien in mijne for n=1 en niet gelijk aan 2 dus hoe kan'k dus make da als ge op foto 2 klikt em ook begint met foto2 ?

servi · 15 jul 2005

moderator noot :
je topic bevat geen prefix, een verkeerd prefix of heeft een onduidelijke titel.
Gelieve een duidelijke titel met een bijhorend correct prefix te gebruiken.
Voor meer informatie over prefixen kan je terecht op regels en prefixen !!!.
Je topic is aangepast en je hebt een een waarschuwing gekregen, gelieve in het vervolg er op te letten.

Dit kan je door gebruik te maken van document.location.href en daar dan de variabelen uit te extraheren.

bijvoorbeeld :
foto.html?fotonr=2

via document.location.href kan je dan te weten komen in je javascript dat je moet beginnen tonen vanaf foto 2

Cyberkid · 15 jul 2005

m'n fout zit ergens anders denk'k

Code:

<script language="JavaScript">
if(document.images) { 
		currentslide=1; 
		maxslides=9; 								//aantal foto's
		foto = new Array(maxslides+1); 
		for(var n=1;n<=maxslides;n++) { 
			foto[n]=new Image(800,600); 			//afbeelding
			foto[n].src=n +'.jpg'; 		//padnaam
		} 
	} 
	function vorige() { 
		if(document.images) { 
			currentslide--; 
			if(currentslide<1) currentslide=1; 
			document.images['foto'].src=foto[currentslide].src; 
		} 
	} 
	function volgende() { 
		if(document.images) { 
			currentslide++; 
			if(currentslide>maxslides) currentslide=maxslides; 
			document.images['foto'].src=foto[currentslide].src; 
		} 
	} 
</script>
</head>
<body>
<span id="bar">Optocht Stad Lokeren</span><p>
<form name="f">
<table border="0" cellspacing="5" width="800">
	<tr>
		<td><input type="button" value="Vorige" onClick="vorige()"></td>
		<td><a href="index.html">Index</a></td>
		<td><input type="button" value="Volgende" onClick="volgende()"></td>
	</tr>
	<tr>
		<td colspan="3"><img src="1.jpg" name="foto">
</table>

zoals ge hier bove zit verwijs'k dus gewoon als 1ste foto gewoon 1.jpg
dus als'k dan op de vorige pagina zet

Code:

<a href="foto.html?nr=2"><img src="thumbs/2.jpg"></a>

zou'k dan dus denkel die img src moete aanpassen nie ?

Cyberkid · 15 jul 2005

laat maar

met : window.location.search
bekom ik nu als eventuele variable ?nr=2
hoe kan ik hier uit die 2 halen ? die ? is noodzakelijk omdat anders de link niet werkt

Lashknife · 15 jul 2005

google "split javascript string"

Cyberkid · 15 jul 2005

ok bedankt

maar nu zit'k nog altijd met een probleem om mijn start foto juist te krijgen:

Code:

<html>
<head>
<title>KLJ Doorslaar</title>
<link href="../../includes/style.css" rel="stylesheet" type="text/css">
<script language="javascript">
	function start()
		{
		var tnr=window.location.search
		var array=tnr.split("=");
		var nr=array[1]
		//document.images['foto'].src=nr +'.jpg'
		}
</script>
<script language="JavaScript">	
if(document.images) {
		currentslide=nr; 
		maxslides=9; 								//aantal foto's
		foto = new Array(maxslides+1); 
		for(var n=1;n<=maxslides;n++) { 
			foto[n]=new Image(800,600); 			//afbeelding
			foto[n].src=n +'.jpg'; 		//padnaam
		} 
	} 
	function vorige() { 
		if(document.images) { 
			currentslide--; 
			if(currentslide<1) currentslide=1; 
			document.images['foto'].src=foto[currentslide].src; 
		} 
	} 
	function volgende() { 
		if(document.images) { 
			currentslide++; 
			if(currentslide>maxslides) currentslide=maxslides; 
			document.images['foto'].src=foto[currentslide].src; 
		} 
	} 
</script>
</head>
<body onLoad="start()">
<span id="bar">Optocht Stad Lokeren</span><p>
<form name="f">
<table border="0" cellspacing="5" width="800">
	<tr>
		<td><input type="button" value="Vorige" onClick="vorige()"></td>
		<td><input type="button" value="Index" onClick="javascript:window.close()"></td>
		<td><input type="button" value="Volgende" onClick="volgende()"></td>
	</tr>
	<tr>
		<td colspan="3"><img src="1.jpg" name="foto">
</table>
</form>
</body>
</html>

als'k die // wegdoet is m'n startfoto juist (degene waar op geklikt is) maar dan werkt mijn volgende en vorige functie niet meer :confused:

Lashknife · 15 jul 2005

zet alles eens in 1 script blok
btw <script type="text/javascript">, niet language="javascript"

Cyberkid · 16 jul 2005

Code:

<html>
<head>
<title>KLJ Doorslaar</title>
<link href="../../includes/style.css" rel="stylesheet" type="text/css">
<script type="text/javascript">	
function start()
		{
		var tnr=window.location.search
		var array=tnr.split("=");
		var nr=array[1]
		document.images['foto'].src=nr +'.jpg'
		}
if(document.images) {
		currentslide=nr; 
		maxslides=9; 								//aantal foto's
		foto = new Array(maxslides+1); 
		for(var n=1;n<=maxslides;n++) { 
			foto[n]=new Image(800,600); 			//afbeelding
			foto[n].src=n +'.jpg'; 		//padnaam
		} 
	} 
	function vorige() { 
		if(document.images) { 
			currentslide--; 
			if(currentslide<1) currentslide=1; 
			document.images['foto'].src=foto[currentslide].src; 
		} 
	} 
	function volgende() { 
		if(document.images) { 
			currentslide++; 
			if(currentslide>maxslides) currentslide=maxslides; 
			document.images['foto'].src=foto[currentslide].src; 
		} 
	} 
</script>
</head>
<body onLoad="start()">
<span id="bar">Optocht Stad Lokeren</span><p>
<form name="f">
<table border="0" cellspacing="5" width="800">
	<tr>
		<td><input type="button" value="Vorige" onClick="vorige()"></td>
		<td><input type="button" value="Index" onClick="javascript:window.close()"></td>
		<td><input type="button" value="Volgende" onClick="volgende()"></td>
	</tr>
	<tr>
		<td colspan="3"><img src="1.jpg" name="foto">
</table>
</form>
</body>
</html>

nu werkt m'n vorige en volgende functie nogaltijd niet

Lashknife · 17 jul 2005

uw fout zit onder andere in het feit dat ge variabelen binnen functies aanmaakt. Zo'n vars zijn niet gekend buiten de functie, maw ook niet in de vorige en volgende functies

Hoe dan ook, kheb me effe laten gaan. Bekijk mijn code en leer ervan

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Author" content="Lashknife" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<title></title>
<script type="text/javascript">
<!--
var currentImage = 1;
var imgPath = "img/";
var imgList = new Array();
var numberofimages = 9;

function preload() {
	for (var i = 1; i <= numberofimages; i++) {
		imgList[i] = new Image();
		imgList[i].src = imgPath + i + ".jpg";
	}
} 

function between (val,x,y) {
	return (val < x || val > y)?false:true;
}

function updateImage() {
	var urlquery = window.location.search;
	if (urlquery.length > 0) {
		urlquery = urlquery.substr(urlquery.indexOf("?")+1);
		var parameterlist = urlquery.split("=");
		if (parameterlist.length != 2) {
			//alert("url manipulation detected!");
		} else if (parameterlist[0] != "img") {
			//alert("url manipulation detected!");
		} else if (isNaN(parseInt(parameterlist[1]))) {
			//alert("url manipulation detected!");
		} else {
			// valid parameterlist
			currentImage = parseInt(parameterlist[1]);
			if (!between(currentImage,1,numberofimages)) {
				currentImage = 1;
				//alert("url manipulation detected!");
			} else {
				with (document.images["foto"]) {
					src = imgPath + currentImage + ".jpg";
					alt = "Image " + currentImage;
				}
			}
		}
	}
}

function show(what) { // "what" can be a number or a value that is allowed in the switch
	if (!isNaN(parseInt(what))) {
		if (between(what,1,numberofimages)) {
			currentImage = what;
		} else {
			currentImage = 1;
		}
	} else {
		switch (what) {
			case "first" : currentImage = 1; break;
			case "last" : currentImage = numberofimages; break;
			case "previous" : currentImage -= currentImage==1?0:1; break;
			case "next" : currentImage += currentImage==numberofimages?0:1; break;
			default: currentImage = 1; break;
		}
	}
	with (document.images["foto"]) {
		src = imgPath + currentImage + ".jpg";
		alt = "Image " + currentImage;
	}	
}

function createThumbnails() {
	var thumbnailbox = document.getElementById("thumbnails");
	var newImg;
	for (var i = 1; i <= numberofimages; i++) {
		if (i != 1) {
			thumbnailbox.appendChild(document.createTextNode(" "));
		}
		newImg = document.createElement("IMG");
		with (newImg) {
			src = imgPath + i + ".jpg";
			alt = "Thumbnail for image " + i;
			with (style) {
				width = "64px";
				height = "48px";
				cursor = "pointer";
			}
			onclick = new Function ("show("+i+")");
		}
		thumbnailbox.appendChild(newImg);
	}
}

function init() {
	preload();
	updateImage();
	createThumbnails();
}
//-->
</script>
<style type="text/css">
<!--
body {
	margin: 0px;
}
form {
	margin: 0px;
}
img {
	border-style: none;
}
//-->
</style>
</head>

<body onload="init()">
<div><input type="button" value="Previous" onclick="show('previous')" /> <input type="button" value="Close" onclick="window.close()" /> <input type="button" value="next" onclick="show('next')" /></div>
<div><img src="1.jpg" name="foto" alt="Image 1" style="width:320px; height:240px" /></div>
<div id="thumbnails"></div>
<!--
<div><a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0!"  style="border:0;height:31px;width:88px;" /></a> <a href="http://jigsaw.w3.org/css-validator/check/referer"><img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" /></a></div>
-->
</body>
</html>

Archief - Javascript : onmiddelijk juiste foto tonen bij laden pagina

Cyberkid

Legacy Member

servi

Legacy Member

Cyberkid

Legacy Member

Cyberkid

Legacy Member

Lashknife

Legacy Member

Cyberkid

Legacy Member

Lashknife

Legacy Member

Cyberkid

Legacy Member

Lashknife

Legacy Member