Thumbnail to image window

[anoniem]

Sup. Ik werk op meerdere sites met thumbnails waarmee in een pop-up een grotere versie wordt getoond. Het lijkt me natuurlijk veel makkelijker voor de bezoeker als in deze pop-up naar een volgende (of vorige) foto kan worden gegaan -- ipv het afsluiten van de pop-up en opnieuw een andere thumbnail aanklikken. Bijvoorbeeld iets als [url=http://cookiecrook.com/AIR/2003/train/xmp/popup/popup.htm]dit[/url], alleen moet hier voor elke image een aparte pagina gemaakt worden voor in de pop-up. [url=http://www.speedoptions.com/features/cars.php?SpeedOptions=20c9f3cc6a780b42ceb5645b02ee20c9]Deze[/url] is daarom misschien al wat beter. Ik heb dus een aantal thumbnails, bij het klikken op een willekeurige van deze thumbs moet een pop-up worden geopend met daarin een pagina met grote versie van de foto, en links naar [i:ca19dd7769]vorige[/i:ca19dd7769] en [i:ca19dd7769]volgende[/i:ca19dd7769] (wat dus maar net afhangt van welke foto gekozen is). Ik wil niet worden afgerekend op een script-request, maar ik hoop dat iemand me een stuk op weg kan helpen -- bv aan de hand van de eerste link die ik gaf. Ik ben geen expert in javascript at all. Thanx in advance!

[anoniem]

Heb je geen beschikking over ASP/PHP oid? Met javascript wil het ook wel hoor, als je die beschikking niet hebt. Heb zelf ook wel eens zoiets gemaakt voor een pagina op een server waar ik geen serverside talen kon gebruiken. [code:1:a7b0e11592]<script type="text/javascript"> <!-- var plaatje = ""; if (location.search) { var string = "" + location.search; plaatje = string.substring(1,string.length); } else plaatje = "kies"; var max = 3; //--> </script>[/code:1:a7b0e11592] Hij vraagt uit de URL het nummer van de foto op (dit is ook de bestandsnaam, dit is volgens mij het makkelijkst werkbaar, dus foto 1 2 3 etc..) op deze manier: www.website.nl/foto.html?2 Indien die 'querystring' (2) leeg is, geeft de pagina automatisch een melding naar keuze weer, of het gehele overzicht. Verder gewoon een beetje pielen met de verschillende variabelen en er een beetje mee rekenen (+1 en -1) bijvoorbeeld voor volgende en vorige). Foto's en andere tekst met variabelen kun je zo weer neerzetten: [code:1:a7b0e11592]document.write('<img src="'+plaatje+'.jpg" alt="Foto '+plaatje+'"><br>');[/code:1:a7b0e11592]

[anoniem]

Thanx, redmar. Ik krijg het gevoel dat ik me er echt eens in zou moet gaan verdiepen... het probleem is dat ik vrij snel iets nodig heb en er niet heel veel tijd aan op kan gaan. Is het gebruik van PHP dan wellicht beter? Ik zal iig zelf even op zoek gaan, alle hulp is welkom!

[anoniem]

Met PHP wordt eea aan de kant van de server verwerkt en is de bezoeker dus niet afhankelijk van JavaScript ondersteuning. Ik denk dat de code op zich ook wel iets makkelijker is dan met JavaScript.

[anoniem]

Het moet ook wel helemaal zonder extra pagina's kunnen. Ik heb wel eens iets gezien, wat een popup opende, en vervolgens met document.write() de html daarin schreef. En aan die html kun je ook wel een self.close() actie toevoegen aan het plaatje. Kan het jammergenoeg zo gauw niet meer terug vinden. Als je er beslist niet uitkomt, kan ik zelf nog wel even aan het prutsen gaan.

[anoniem]

[quote:4de8d9953f]Het moet ook wel helemaal zonder extra pagina's kunnen.[/quote:4de8d9953f] Klopt, maar dan zit je wel vast aan Javascript voor de opbouw [quote:4de8d9953f]Bijvoorbeeld iets als [url=http://cookiecrook.com/AIR/2003/train/xmp/popup/popup.htm]dit[/url], alleen moet hier voor elke image een aparte pagina gemaakt worden voor in de pop-up.[/quote:4de8d9953f] Daar is gewoon 1 extra pagina (imgview.php) die met php code aan de hand van de querystring (?img=img2.gif) die pagina dynamisch opbouwt. Dus er is maar 1 extra bestand dat dynamisch aan de kant van de server wordt opgebouwd en daarna als gewone html naar de bezoeker wordt gestuurd. Met php kun je dus net als javascript dingen berekenen maar je hebt nog een grotere vrijheid als je er eventueel een database etc aan wilt koppelen om foto's/beschrijvingen uit op te halen.

[anoniem]

Het ideaal is dus een standaard (zelf gemaakte) pagina in de pop-up waarin de betreffende foto wordt geladen, met links naar de 'naastgelegen' foto's. Het probleem is dat ik nooit echt gewerkt heb met javascript, en alleen oppervlakkig met php. Ik kan ook verder weinig vinden waar ik zelf wat mee kan. En wat jullie me vertellen klinkt allemaal goed (thanx), maar het lijkt me dat dit voor mijzelf niet te doen is op korte termijn... ;) Een voorbeeld waarbij ik zo'n 'systeem' zou willen toepassen is [url=http://www.griekeiland.nl/test/skalakalloni.htm]hier[/url] te vinden (nog niet af). Ik sta open voor alle suggesties!

[anoniem]

even snel iets (laten zien dat het niet zo gecompliceerd is als het lijkt): als je (bijv) een php pagina maakt (niet mijn sterkste punt, daarom gewoon ff de opbouw zoals het zou kunnen zonder echte code ofzo :wink:): Adres link: www.domein.nl/popup.php[b:5055e03c93]?foto=4[/b:5055e03c93] (opent popup, mbv JS window.open) Bestand popup.php: [quote:5055e03c93]<img src="<?php $foto ?>.jpg"> <a href="popup.php?foto=<?php $foto-1 ?>">Vorige</a> <a href="popup.php?foto=<?php $foto+1 ?>">Volgende</a> <a href="javascript:window.close();">Venster sluiten</a>[/quote:5055e03c93]

[anoniem]

That simple, huh! :P Oké, ik heb even een [url=http://www.silverflux.nl/phptest/index.php]testpagina[/url] en [url=http://www.silverflux.nl/phptest/popup.php]popup[/url] gemaakt: [b:22beef02ca]Thumb-pagina[/b:22beef02ca] [code:1:22beef02ca] <head> ... <script Language="JavaScript"> function load() { var load = window.open('popup.php','','scrollbars=no,menubar=no,height=200,width=300,resizable=yes,toolbar=no,location=no,status=no'); } </script> </head> <body> ... <a href="javascript:load()"><img src="pics/01.jpg" width="30" height="20"></a> <a href="javascript:load()"><img src="pics/02.jpg" width="30" height="20"></a> <a href="javascript:load()"><img src="pics/03.jpg" width="30" height="20"></a> <a href="javascript:load()"><img src="pics/04.jpg" width="30" height="20"></a> ... </body> [/code:1:22beef02ca] [b:22beef02ca]Popup[/b:22beef02ca] (thanx to redmar) [code:1:22beef02ca] <img src="<?php $foto ?>.jpg"> <a href="popup.php?foto=<?php $foto-1 ?>">Vorige</a> <a href="javascript:window.close();">Venster sluiten</a> <a href="popup.php?foto=<?php $foto+1 ?>">Volgende</a> [/code:1:22beef02ca] Ik denk dat het probleem nu is: het pad en de naam van de foto's. Wat ik nl. heb is [b:22beef02ca]pics/01.jpg[/b:22beef02ca] als thumbnail [b:22beef02ca]pics/fotos/01.jpg[/b:22beef02ca] als grote foto Oftewel, de foto's hebben alleen een nummer als naam: xx.jpg. Hoe is dit in te passen in de codes?

[anoniem]

Ja die "php code" die ik gaf is geen correctie code, want ik suck @ php maargoed :wink: ... kern is iig dat je met die querystring een variabele meegeeft (foto). het nr (in mijn eerdere voorbeeld 4) is de bestandsnaam van de foto. In de URL geeft popup.php?foto=4 dus mogelijkheid tot het opvragen van bijv de foto "4.jpg". (Het is overigens, denk ik, makkelijker om je bestand 4.jpg ipv 04.jpg te noemen omdat de 'leading zero' wegvalt in de variabele. Zoek dus even met www.google.nl naar hoe een php variabele te gebruiken en anders moet iemand die daar wel verstand van heeft maar ff te hulp schieten :D ... ps. Je vergeet in je thumbpagina bij wel het nummer van de foto als querystring mee te geven... denk daar ook even aan, bijv: [code:1:5af03728b3] <a href="javascript:load(1);"> <a href="javascript:load(2);"> <a href="javascript:load(3);"> <a href="javascript:load(4);"> function load(foto) { var load = window.open('popup.php?foto='+foto+,'','scrollbars=no,menubar=no,height=200,width=300,resizable=yes,toolbar=no,location=no,status=no'); } [/code:1:5af03728b3]