geen foto album, maar...

[wojo00]

Hallo iedereen,

Ik ben met een site bezig en ik zou het volgende graag willen hebben.
Ik wil op een pagina een scherm in het midden, met hier een foto erin. Deze foto is onderdeel van een serie foto's, het gaat om een ingescande folder met informatie. Nu heb ik alle kantjes van deze folder als .jpg op mn compie en wil deze op mn website plaatsen. Ik vind het niet mooi als die hele folder daar in losse plaatjes op mn site staat. Ik wil het presenteren als bladzijdes.
Dus wat ik wil is het eerste kantje van de folder in het midden van de pagina en als men dan op de foto of op een next/previous button drukt, dat dan de volgende/vorrige foto opkomt. Is dit mogelijk zonder de hele pagina steeds weer te laden, maar dat alleen de foto's veranderen?
Heb al wat rond gezocht maar kon alleen een java code vinden die automatisch de foto's opbrengt, aangezien niet iedereen even snel leest is dit voor mijn folder niet zo;n goed plan.
Als iemand mij kan helpen zou dat super tof zijn!
Alvast bedankt

 

[Japie82]

Hoi,

Hier is idd wel een scriptje voor te schrijven:

<script language="JavaScript">
	<!--
	if (document.images) { // Preloaded images
		plaatje1 = new Image();
		plaatje1.src = "plaatje1.jpg";
		plaatje2 = new Image();
		plaatje2.src = "plaatje2.jpg";
		plaatje3 = new Image();
		plaatje3.src = "plaatje3.jpg";
	}
	var nextNumb = 2; //nummer van tweede afbeelding, voor eerste keer klikken
	function nextImg() {
		if (document.images) {
			if (nextNumb == 3) { //als laatste plaatje bereikt is plaatje weergeven en vooraan beginnen
				document["plaatje"].src = eval("plaatje3.src");
				nextNumb = 1; // nummer van eerste afbeelding
			} else { 
				document["plaatje"].src = eval("plaatje" + nextNumb + ".src");
				nextNumb++;
			}
		}
	}
	var prevNumb = 3; // voor eerste keer, nummer van laatste afbeelding
	function prevImg() {
		if (document.images) {
			if (prevNumb == 1) { // als eerste plaatje bereikt is: plaatje weergeven en achteraan beginnen
				document["plaatje"].src = eval("plaatje1.src");
				prevNumb = 3; // nummer van laatste afbeelding
			} else { 
				document["plaatje"].src = eval("plaatje" + prevNumb + ".src");
				prevNumb--;
			}
		}
	}
	// -->
</script>

<img src="plaatje1.jpg" name="plaatje" border="0" alt=""><br>
<input type="button" value=" Previous " onClick="prevImg();">
<input type="button" value=" Next " onClick="nextImg();">

Succes

 

[wojo00]

Helemaal te gek! Had al op google gezocht, maar kon het niet echt vinden.. wist ook niet zo goed wat ik als zoek term moest gebruiken hiervoor.
Script ziet er mooi uit, zou zoiets niet zelf kunnen verzinnen. Iedergeval, ik ga het gelijk testen, BEDANKT!
:thumb:


Het lukt niet

Enig idee wat ik verkeerd doe? Ben nogal nieuw met dit.
Ik heb er het volgende van gemaakt, en de eerste foto komt, maar zodra ik op next/previous druk, komt er dat lelijke rode kruisje.

<script language="Javascript">
<!--
if (document.images) { // Preloaded images
plaatje1 = new Image();
plaatje1.src = "folder\1.jpg";
plaatje2 = new Image();
plaatje2.src = "folder\2.jpg";
plaatje3 = new Image();
plaatje3.src = "folder\3.jpg";
plaatje4 = new Image();
plaatje4.src = "folder\4.jpg";
plaatje5 = new Image();
plaatje5.src = "folder\5.jpg";
plaatje6 = new Image();
plaatje6.src = "folder\6.jpg";



}
var nextNumb = 2; //nummer van tweede afbeelding, voor eerste keer klikken
function nextImg() {
if (document.images) {
if (nextNumb == 6) { //als laatste plaatje bereikt is plaatje weergeven en vooraan beginnen
document["plaatje"].src = eval("plaatje6.src");
nextNumb = 1; // nummer van eerste afbeelding
} else {
document["plaatje"].src = eval("plaatje" + nextNumb + ".src");
nextNumb++;
}
}
}
var prevNumb = 6; // voor eerste keer, nummer van laatste afbeelding
function prevImg() {
if (document.images) {
if (prevNumb == 1) { // als eerste plaatje bereikt is: plaatje weergeven en achteraan beginnen
document["plaatje"].src = eval("plaatje1.src");
prevNumb = 6; // nummer van laatste afbeelding
} else {
document["plaatje"].src = eval("plaatje" + prevNumb + ".src");
prevNumb--;
}
}
}
// -->
</script>

<img src="folder\1.jpg" name="plaatje" border="0" alt=""><br>
<input type="button" value=" Previous " onClick="prevImg();">
<input type="button" value=" Next " onClick="nextImg();">

 

[Japie82]

Dat komt waarschijnlijk door de naam van de plaatjes..

Als folder\1.jpg de naam van het bestand is moet je die
\ er even uit halen.

Is 1.jpg de naam van het bestand en staat deze in map folder, dan moet je de \ veranderen in een /

Succes

 

[wojo00]

de dir. was /folder en naam 1.jpg
Het probleem was dus de \

Stom zeg van mij

i.i.g. bedankt.. heel erg bedankt ben er echt super blij mee

 

[wojo00]

Hmmm, blijkt dat de buttons het niet zo goed doen.. soms druk ik op next en gebeurt er niets, soms wordt er ook een foto overgeslagen. Zit er nog een fout in het script?

<p align="center">
<script language="Javascript">
<!--
if (document.images) { // Preloaded images
plaatje1 = new Image();
plaatje1.src = "folder/1.jpg";
plaatje2 = new Image();
plaatje2.src = "folder/2.jpg";
plaatje3 = new Image();
plaatje3.src = "folder/3.jpg";
plaatje4 = new Image();
plaatje4.src = "folder/4.jpg";
plaatje5 = new Image();
plaatje5.src = "folder/5.jpg";
plaatje6 = new Image();
plaatje6.src = "folder/6.jpg";



}
var nextNumb = 2; //nummer van tweede afbeelding, voor eerste keer klikken
function nextImg() {
if (document.images) {
if (nextNumb == 6) { //als laatste plaatje bereikt is plaatje weergeven en vooraan beginnen
document["plaatje"].src = eval("plaatje6.src");
nextNumb = 1; // nummer van eerste afbeelding
} else {
document["plaatje"].src = eval("plaatje" + nextNumb + ".src");
nextNumb++;
}
}
}
var prevNumb = 6; // voor eerste keer, nummer van laatste afbeelding
function prevImg() {
if (document.images) {
if (prevNumb == 1) { // als eerste plaatje bereikt is: plaatje weergeven en achteraan beginnen
document["plaatje"].src = eval("plaatje1.src");
prevNumb = 6; // nummer van laatste afbeelding
} else {
document["plaatje"].src = eval("plaatje" + prevNumb + ".src");
prevNumb--;
}
}
}
// -->
</script>

<img src="folder/1.jpg" name="plaatje" border="0" alt=""><br>
<input type="button" value=" Previous " onClick="prevImg();">
<input type="button" value=" Next " onClick="nextImg();">



<p align="center">


Sorry voor mn doorgaande vragen

 

[Japie82]

Ik zie zo geen fout en als je alleen plaatjes toegevoegd hebt en de getalletjes veranderd moet het werken.

Ligt het niet aan de snelheid van het laden? Gun je ze de tijd om op het scherm te komen?

 

[wojo00]

volgens mij is het niet de laad tijd, soms laat ie de hele serie in 1 keer goed zien, maar soms ook helemaal niet. Dan schiet ie van plaatje 1 naar plaatje 3. Of als ik bij plaatje 6 previous klik, schiet ie naar plaatje 2.
Vreemd

 

[maestro12]

Heb je de site al on-line staan zodat wij er even kunnen kijken?

 

[wojo00]

Volgens mij is het toch de laadtijd.

Foto's zijn een beetje groot, anders was de tekst helemaal niet te lezen.

De pagina staat online, maar is nog niet af.. werd opgehouden door andere dingen. Als je een kijkje wil nemen.. http://www.ontdekislam.nl/papiamentu.php

 

[Japie82]

Werkt inderdaad prima.

Maar als je eerst even wacht, want de afbeeldingen worden in een preload geladen. Dus als alles geladen is en dan pas gaat klikken werkt het goed.

:thumb: