Foto's tonen (soort Slide show)

justinos · 23 dec 2005

Hoi,

Ik zoek een script waarbij je foto's kan tonen op een pagina, en dan gewoon in rijtjes naast elkaar. Maar wanneer je dan op een foto klikt, er dan een pop up opent waarin de foto in groter formaat komt te staan, en je via die pop-up naar volgende en vorige foto kan gaan en zo ook alles kan bekijken.

ik zoek dus precies wat HIER te vinden is.

Het is eigenlijk erg simpel te maken door de volgende en vorige gewoon naar een volgende pagina te laten linken, waar dan het volgende plaatje staat.. maar het moet ook makkelijker kunnen neem ik aan, dat alleen het plaatje veranderd.

alvast bedankt,
justin

puppie · 23 dec 2005

irfanview kan dat ook.
is gratis en ook nederlands/

irfanview.

JeroenE · 30 dec 2005

Dit is heel eenvoudig op te lossen met een javascriptje.
Ik heb er hier wel eentje staan.
Reageer even als dit al opgelost is of niet.

Greetz : Jer

en.

justinos · 30 dec 2005

Hoi JeroenE,

Het is inderdaad nog steeds niet opgelost. Het zou dus heel fijn als je me op weg kan helpen!

groetjes

JeroenE · 31 dec 2005

Hoe moet die gallery eruit zien?
De thumbnails waar je op klikt om die foto groot te zien in een popup, moeten die ook volledig onder elkaar staan? of liever mooi vier rijen van vier foto's (voor 16 foto's) of 5 van 5 voor 20 foto's....
Er zijn zoveel mogelijkheden.
Moet het echt met een popup zijn, of moet de foto in hetzelfde venster te zien zijn in een ander deel van de pagina.....
Alles kan.

Greetz : Jer

en.

justinos · 31 dec 2005

5 rijen van 5 foto's naast elkaar die in een pop up openen, als dat zou kunnen?
Zou dan helemaal top zijn :thumb:

Ik hoor het nog wel

puppie · 31 dec 2005

Ik ben ook zeer beneiuwd hoe dat er uit gaat zien.......

JeroenE · 31 dec 2005

Hier is een voorbeeld.
Alle voorstellen en tips zijn welkom.

Vragen ook natuurlijk.

Greetz : Jer

en.

puppie · 31 dec 2005

JeroenE zei:
Hier is een voorbeeld.
Alle voorstellen en tips zijn welkom.

Greetz : Jeren.

Voor mij zou dat perfect zijn maar ik ben topic starter niet.
maar als ik het zou mogen gebruiken graag....laat dan even weten van hoe en wat.

JeroenE · 31 dec 2005

Iedereen mag dit vrij gebruiken.

Volgende code kopieer je en sla je op als "kiesmaareennaam.htm" :

PHP:

<html>
<head>
<title>Foto's</title>
<script language="javascript" src="kiesmaareennaam.js"></script>
</head>
<body>
<script language="javascript">
<!--
// zorg dat al je thumbnails dezelfde naam hebben met uitzondering van het laatste cijfer en dat ze in de
// juiste volgorde genummerd zijn als volgt : "jouwthumbnail0.jpg" "jouwthumbnail1.jpg" "jouwthumbnail2.jpg" ....
// begin wel met nummer 0, anders werkt het script niet meer correct
// het zelfde geldt voor de foto's in groot formaat
document.write("<center>");
for (var i = 0; i < 25; i++) {

// de 25 verander je in het aantal thumbnails dat je zelf hebt
// wat gelijk is aan het aantal grote foto's

document.write("<img src='jouwmap/jouwthumbnail" + i + ".gif' onClick='popUpWin(" + i + ",640,480);' vspace='5' hspace='5'>");

// jouwmap wordt de map waarin de thumbs (thumbnails) staan
// jouwthumbnail wordt de naam van de thumb
if (i % 5 == 4) document.writeln("<br>");
};
document.write("</center>");
-->
</script>
</body>
</html>

De volgende code kopieer je en sla je op als "kiesmaareennaam.js" :

PHP:

function changeImg(sign) {
	var pic = document.fotoForm.fotoNum.value-1;
	if (sign == "-") {
		if (pic > 0) {
			pic--;
		} else {
			pic=24; // verander de 24 in het aantal foto's dat je hebt min 1
		};
	} else {
		if (pic < 24) { // ook deze 24 veranderen
			pic++;
		} else {
			pic=0;
		};
	};
	document.display.src = "jouwmap/jouwfoto" + pic + ".gif";
	document.fotoForm.fotoNum.value = pic+1;
};
function popUpWin(num,w,h) {
	var l = (screen.width - w) / 2;
	var t = (screen.height - h) / 2;
	var htmlCode = "<html><head><title>Foto&acute;s</title><script language='javascript' src='kiesmaareennaam.js'>" +
	"</script></head>" + // Foto&acute;s kan je veranderen in de titel die je zelf wilt
	"<body><table width='100%' height='100%'>" +
	"<tr valign='middle'><td align='center' height='15%'>" +
	"<a href='javascript:window.close();' style='text-decoration:none'>Sluit dit venster</a>" +
	"</td></tr><tr valign='middle'><td align='center'>" +
	"<img name='display' src='jouwmap/jouwfoto" + num + ".gif'>" +
	"</td></tr><tr valign='middle'><td align='center' height='15%'><form name='fotoForm'><a href='javascript:changeImg(\"-\");' style='text-decoration:none'>vorige</a>&nbsp;" +
	"<input name='fotoNum' value='" + eval(num+1) + "' style='width:15px;border:0px;text-align:right'> van 25&nbsp;&nbsp;" + // de 25 verander je in het aantal foto's dat je hebt
	"<a href='javascript:changeImg(\"+\");' style='text-decoration:none'>volgende</a></form></td></tr>" +
	"</table></body>" +
	"</html>";
	popupProps = "width="+w+",height="+h+",left="+l+",top="+t+",scrollbars="+scroll;
	newWindow = window.open('','fotoPopup',popupProps);
	newWindow.document.writeln(htmlCode);
};

Alles wat achter // staat mag je verwijderen, inclusief de // en de spatie voor de //
Of kopieer gewoon de bijlagen.

Greetz : Jer

en.

JeroenE · 31 dec 2005

Aanvulling op mijn vorig bericht :

Voor het veranderen van het aantal foto's op een rij, vb 4 op 4 ipv 5 op 5,, verander je het volgende :

PHP:

if (i % 5 == 4) document.writeln("<br>");

in

PHP:

if (i % 4 == 3) document.writeln("<br>");

Van de bijlagen haal je gewoon de ".txt" weg en antwoord ja als je melding krijgt of je wel zeker bent de extentie te veranderen.

Greetz : Jer

en.

justinos · 1 jan 2006

Ben meteen aan de slag gegaan vandaag en het werkt helemaal perfect :thumb:
Blij dat het gelukt is, erg bedankt voor je hulp!

Ik zal nog wat reageren als het online te vinden is

JeroenE · 1 jan 2006

Blij dat ik kon helpen. :thumb:

Greetz : Jer

en.

justinos · 16 jan 2006

Ik heb gemerkt dat het niet mogelijk is om 2 van zulke scripts op dezelfde pagina te plaatsen, wanneer je dan op een plaatje klikt om de popup te laten openen dan openen in beide scripts hetzelfde pop up, terwijl het toch echt goed staat in het script. Waarschijnlijk worden dan de 2 scripts door elkaar verward? Is dit op te lossen, en zo ja hoe?

Is het ook mogelijk om te zorgen dat er een handje verschijnt wanneer je je muis over 1 van de plaatjes haalt? Zodat ze zien dat ze er op kunnen klikken? Dit is niet persé nodig, maar zou toch wel handig zijn

Verder is het script perfect! Alleen dus nog even zorgen dat 2 scripts op 1 pagina werken..

justinos · 18 jan 2006

Misschien dat iemand anders het weet hoe je de scripts van elkaar kan onderscheiden wanneer je 2 dezelfde scripts op 1 pagina zet? Misschien door iedere script een andere naam ofzo te geven?

Zoals ik net al zei, ik heb 2 van de scripts die JeroenE genoemd heeft op 1 pagina staan, wanneer ik nu op een fototje klik van het eerste script, dan openen de foto's van het 2e script. Het wordt dus door elkaar gehaald

Kan iemand mij hier mee helpen?

JeroenE · 20 jan 2006

Sorry voor het late reageren, maar ik heb enkele dagen tijd tekort gehad.

Ik kom straks even terug met een passende oplossing voor beide vragen.

Greetz : Jer

en.

justinos · 20 jan 2006

2 scripts op 1 pagina is niet super dringend meer, ik heb het inmiddels wat omgebouwd.
Het handje wanneer je met me juis over de plaatjes heen gaat zou in ieder geval wel leuk zijn als dat zou lukken :thumb:

JeroenE · 20 jan 2006

Hier ben ik alweer.

Kan je even de website doorgeven waar die twee scriptjes op dezelfde pagina staan, of die pagina hier als bijlage zetten? Dan kan ik eens kijken wat er mogelijk is. Zo begrijp ik ook beter wat je juist bedoelt. Ik denk dat je dat kunt oplossen door in het tweede script de naam van de functie (function) te veranderen, en hetzelfde te doen met de afbeeldingen die de tweede functie moeten gebruiken.

Voor dat handje kan je met een style werken.

In de head van je document komt het volgende :

PHP:

<style>
<!--
image.hand { cursor: hand;}
-->
</style>

En je image-tag in de body ziet er dan als volgt uit:

PHP:

<img src........ class="hand".......>

Greetz : Jer

en.

justinos · 20 jan 2006

perfect jeroen :thumb:

Wat betreft je vraag, ik heb juist het systeem een beetje omgegooid van de foto's zodat er geen 2 scripts meer op 1 pagina hoeven te staan, ik kreeg het namelijk niet voor elkaar.
Omdat er in april weer veel foto's bij gaan komen zou het alsnog heel mooi zijn als het dan wel gaat lukken.

Zie de bijlage om het bestandje te bekijken, je kan het ook vinden op http://www.kermis-haarlem.nl/images/testfotos.html

Je ziet er ook wat ik bedoel, als je ene foto aanklikt van het bovenste script dan krijg je een foto van het onderste script. Het bovenste script valt dus volledig weg in het "popup gedeelte".

justinos · 20 jan 2006

Hmm nog even over het handje, ik snap volledig wat je bedoeld met class="handje" plaatsen in de image tag, maar in dit script is het een ander verhaal volgens mij.

HTML:

document.write("<img src='Fotosafbouw/resized 122x81/Afbeelding" + i + ".jpg' onClick='popUpWin(" + i + ",640,460);' vspace='5' hspace='5'>");

Hiertussen kan je class=handje niet plaatsen, dan werken de foto's niet meer

Je hoeft voor mij nu geen moeite te gaan doen als je het niet weet, je hebt voorlopig voor het hele script al gezorgd

Foto's tonen (soort Slide show)

Gebruiker

Supermoderator

Terugkerende gebruiker

Gebruiker

Terugkerende gebruiker

Gebruiker

Supermoderator

Terugkerende gebruiker

Supermoderator

Terugkerende gebruiker

Bijlagen

Terugkerende gebruiker

Gebruiker

Terugkerende gebruiker

Gebruiker

Gebruiker

Terugkerende gebruiker

Gebruiker

Terugkerende gebruiker

Gebruiker

Bijlagen

Gebruiker

Wij waarderen jouw privacy