Fade (js) in gallery met foto's?

Door Martinique op 23-02-2009 21:23

1.100 views

Hallo allemaal,

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.

Niek Weevers

24-02-2009 23:18

Cycle is niet echt moeilijk. Zet je foto's in een ul li en kijk ff goed in de broncode van de cycle site.
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.

Martinique

25-02-2009 08:44

Cycle is inderdaad niet heel moeilijk, als ik dan echter een nieuwe foto toevoeg moet ik ook weer in het script gaan schrijven. Dat wil ik eigenlijk voorkomen. Dus dat ie gewoon map uitleest en laat zien (met een overgangetje...)

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?

Niek Weevers

25-02-2009 20:47

Zorg eerst gewoon dat je alle foto's uit de map leest.
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.

Martinique

26-02-2009 10:30

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...?

Mitchell

26-02-2009 10:48

Gebruik een foreach en plaats om iedere img 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..)

Martinique

02-03-2009 09:44

Inmiddels is het me gelukt. Het script zet de fotolocaties nu in een lijst..!
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

Reageren

Inloggen om te reageren