Hoi Ramona,
ik vind het volgende script.... (van leejo)
Ojeeo, een scripto van leejo! 
Die munten niet altijd uit in perfectie, zijn soms erg verouderd, en/of werken alleen in Internet Explorer...
En ja hoor, er staat o.a.:
HTML:
<img src="foto1.jpg" name="blok" border=0 style="filter:progid:DXImageTransform.Microsoft.Stretch(stretchStyle='PUSH')">
Dat is een filter dat alleen bij Internet Explorer werkt (het zorgt voor de overgangen tussen de foto's), en niet bij alle andere browsers, zoals Firefox, Chrome, Opera en Safari.
Nu is dit een "plaatjes-wisselaar", en dat is iets heel anders dan je vraag hoe je een goede pop-uppende fotogalerij moet maken! :shocked:
==================
Werkend foto-carrousel
Fotogalerij met vergrotingen
Maar ik was in de tussentijd ook aan het knutselen gegaan vanuit het idee van de pop-ups die je wilde...
Voortbordurend op
jouw oude pagina die ik op internet heb gevonden (niets is veilig daar!
), heb ik het script van die fotogalerij wat bijgewerkt, zodat er bij de grote foto's nu ook onderschriften bij kunnen staan. Ook de css-styles aangepast.
Kijk, hier is het resultaat:
Met het plaatsen van de css in een apart stylesheet, dat in de <head> wordt aangeroepen, met het regeltje:
HTML:
<?php header("Content-type: text/html; charset=utf-8"); ?>
aan het Doctype voorafgaand in de html, en met het veranderen van de uitgang
.htm in
.php lukt dit wel.
Het stylesheet en het script kan je hergebruiken, zodat het heel eenvoudig wordt om ook andere fotopagina's op deze manier te maken.
Het prettige van deze methode is, dat bezoekers eventueel ook javascript uit hebben kunnen staan: het werkt ook zonder script! (dan krijgt men de grote foto op een nieuwe pagina te zien; er wordt bij verteld hoe men kan terugkeren)
Waar je even op moet letten:
- In de html staat vlak voor de </head> ook nog een klein stukje javascript. Dit moet er hier op deze plaats in, zodat alles goed gaat tijdens het inladen van de pagina.
- Het uitwendige javascript wordt er pas helemaal op het eind, vlak voor de </body>, in gezet. Dat is nodig omdat dit script gebruik maakt van de html die er aan voorafgaat.
- In de broncode kan je zien dat het toevoegen van foto's en bijschriften heel makkelijk gaat.
===============
Ook goed om in de gaten te houden:
Er staan nu om de havenklap
spaties in de namen van je mappen en van de images. Dat geeft aanleiding tot forse fouten!
Voor het aanroepen van een map en/of een bestand waar een spatie in wordt gebruikt, moet je in de html namelijk op de plaats van de spatie in de URL steeds %20 zetten. Niet alleen dat je daar helemaal turelurefluut van wordt, je ziet ook nauwelijks meer hoe een bestand heet...
Niet doen dus, die spaties. Je kunt beter streepjes - of onderstreepjes _ gebruiken. Ook
speciale leestekens als een apostrof ' in een naam kan je beter niet gebruiken (dat moeten ook %.. met een getal worden). Tenslotte zou ik ook
hoofdletters vermijden, die geven ook nog al eens aanleiding tot fouten. Een misschien kan je ook wel de submapjes met dezelfde naam als hun hoofdmapjes missen.
Zoals het nu is:
HTML:
<a href="Dreamweaver%20images/dino%20foto%27s/dino%20foto%27s/dinotafel.jpg"><img
src="Dreamweaver%20images/dino%20foto%27s/klein_%20dino_%20tafel.jpg" alt=""><span>
Vaak eindigt een maaltijd op deze manier: Dino krijgt de restjes.</span></a>
<a href="Dreamweaver%20images/dino%20foto%27s/dino%20foto%27s/dinolig2.jpg"><img
src="Dreamweaver%20images/dino%20foto%27s/klein_%20dino_%20lig2.jpg" alt=""><span>
Even uitblazen!</span></a>
kan dan simpel worden:
HTML:
<a href="dreamweaver-images/dino-fotos/dinotafel.jpg"><img
src="dreamweaver-images/dino-fotos/dinotafel-klein.jpg" alt=""><span>
Vaak eindigt een maaltijd op deze manier: Dino krijgt de restjes.</span></a>
<a href="dreamweaver-images/dino-fotos/dinolig2.jpg"><img
src="dreamweaver-images/dino-fotos/dinolig2-klein.jpg" alt=""><span>
Even uitblazen!</span></a>
Zo kan je ze ook mooi alfabetisch onder elkaar in je Verkenner zien, zo is het ook handig om te zien waar je gebleven bent met het maken van kleintjes, is het in de code makkelijk invoegen van de volgende, en hoef je helemaal niet uit te blazen!
Met vriendelijke groet,
CSShunter
____________
PS: Leuke robbedoes, die Dino, en leuke foto's! :thumb:
rogid
