Fade (js) in gallery met foto's?
HTML, CSS en PHP lukt me aardig maar verder houd het voor mij wel zo'n beetje op. Nu ben ik echter bezig met een ontwerp voor mijn nieuwe website. Lang geleden ben ik begonnen met het 'Automatisch fotoalbum' script (v.1). Ik heb daarop verschillende varianten (in werking en layout) gemaakt.
Nu wil ik echter voor het nieuwe ontwerp een mooie overgang naar de volgende foto. Waarschijnlijk zal dit dan met javascript moeten. Ik heb JQuery Cycle al geprobeerd maar daar kom ik niet echt mee uit. Althans het lukt wel maar dan moet ik elke foto met <img /> in het script plaatsen.
Demo
Is het bijvoorbeeld mogelijk om met php alle foto's op te sommen in een bepaalde map. Het script van Arjan leest namelijk 1 voor 1 de foto's uit en je kunt er tussen navigeren. Als dat zou kunnen zou ik misschien toch Cycle kunnen gebruiken...
Een voorbeeld heb ik hier draaien.
Of zijn er nog totaal andere (misschien zelfs eenvoudigere) oplossingen te bedenken?
Alvast bedankt voor het meedenken.
Gewijzigd op 01/01/1970 01:00:00 door Martinique
Ik denk dat het nog beter is om dit met ajax op te lossen, zodat je de foto's per keer laadt en niet alle foto's in een keer. Dit zal de laadtijd van de pagina behoorlijk verkorten.
Maar misschien is het mogelijk om met dat script van Arjan alle bestanden in een map te 'echo'en zodat Cycle daar weer mee om kan gaan. Of denk ik nu via een omweg en kan het nog makkelijker?
Deze plaats je vervolgens allemaal in een li dmv je script.
En hierna kun je cycle gaan toepassen.
Wanneer er vervolgens een afbeelding is toegevoegd in je map, komt deze er automatisch bij.
Maar dat is het punt juist. Misschien heb ik het onlogisch verwoord... Het script leest al foto's uit de map. Zie voorbeeld. Maar hoe plaats ik deze vervolgens in een li...?
Lijkt mij redelijk basis php..
(De Cycle plugin gebruik ik momenteel trouwens ook op een website die ik aan het maken ben, werkt perfect. Beetje bloat-ig though..)
Zie het voorbeeld...
Ik heb echter nog wel wat vragen; voor het beter functioneren is het noodzakelijk dat de foto's ge preload worden. Wat is de beste manier?
- Via JavaScript
- Via CSS, div display: none
B.v.d