Photo Album – Versie 2.0

Het Steenderen.NET, en daarmee ook die van SiteManager, Photo Album is geupdate naar versie 2.0. Het vorige foto album werkte volledig op ASP (active server pages), de techniek waar voor het over grote deel het SiteManager systeem mee werkt.

Op zich werkt dat hartstikkel mooi, ware het niet dat bij het doorklikken naar de volgende foto, de volledig pagina (dus ook de volledige layout e.d.) opnieuw geladen moest worden. Niet alleen een aanslag op je internet verbinding (nou mag dat tegenwoordig niet echt meer een probleem zijn met alleen nog maar breedband aansluitingen), maar zeker ook een aanslag op de performance van de webserver en de database.

Kortom, dat kon slimmer!

Dus ben ik een dag of wat geleden eens gestart met bekijken op welke wijze dit slimmer kon. Conclusie was eigenlijk al getrokken voordat ik nog maar gestart was met het onderzoekje… namelijk JavaScript. Grote verschil met JavaScript is, is dat je enkel aan de kant van de gebruikter (jij op op peeceetje) programmaatjes kan laten draaien, zonder daarvoor eerst opnieuw de volledige pagina te moeten laden (en daarbij de webserver en de database te gebruiker).

Dus het nieuwe photo album werkt nu door middel JavaScript. Kostte even wat moeilijkheden met het programmeren ervan, maar lukte uiteindelijk toch sneller als gedacht.

Wat is zo ongeveer de truc?

Bij het openen van de photo album pagina, wordt eerst gekeken of er al een album geselecteerd is. Is dit niet het geval, dan wordt een lijst gegenereerd met hierin alle foto albums die beschikbaar zijn (dit werkt nog volledig met ASP). Selecteer je hieruit een album, dan wordt de pagina opnieuw geladen (dus toch nog het nodige werk voor de server & database), maar nu met een foto album.

Bij het openen van een specifiek album, wordt eerst bekeken welke foto’s er allemaal beschikbaar zijn in het album (voorheen werd alleen gekeken welke foto er geladen moest worden). Deze foto’s worden met z’n allen in een mooi drop-down lijstje geplaatst.

Aan de hand van dit lijstje wordt vervolgens bekeken welke foto er geladen moet worden. Bij het doorklikken naar de volgende foto wordt vervolgens alleen de bestaande foto vervangen voor de nieuwe foto, in plaats van dat de volledige pagina opnieuw geladen wordt met de nieuwe foto. Werkt een stuk slimmer dus.

Moeilijkheid lag ‘m voornamelijk in het vooraf bepalen of er vergrotingen van een foto beschikbaar zijn (en dus of er een zoom optie in beeld moet komen). Na wat klooien is ook dit gelukt, en verschijnt nu ook bij het wisselen van de foto de optie om te zoomen wanneer hiervoor een vergroting beschikbaar is.

Mocht je eens willen testen (commentaar/opmerkingen/aanmerkingen/etc.) klik dan even hier.

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Deze site gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.