Toon je vergrote foto's zonder een nieuwe pagina te openen
Jeroen Hoekstra |
2008-09-10 |
Hulpmiddelen en software
Je kent vast wel het principe van een thumbnail. Je toont een afbeelding in het klein en als een bezoeker erop klikt komt de afbeelding op ware grootte te voorschijn. Er zijn behoorlijk wat programma's te vinden die dit mogelijk maken. Alleen wordt bij veel programma's de grote afbeelding óf op een nieuwe pagina óf in een popup getoond. Beide zijn meestal echter niet wenselijk.
In dit artikel gaan we het hebben over FancyZoom. Hiermee wordt de grote afbeelding als het ware zwevend boven op de inhoud van een pagina getoond. Dit wordt gedaan met behulp van Javascript en er wordt dus geen nieuwe HTML-pagina of popup voor geopend. FancyZoom kan alleen voor afbeeldingen gebruikt worden. De volgende bestandsformaten worden ondersteund: jpg, gif, png, bmp en tiff. Zo kun je op een eenvoudige en snelle manier een professioneel ogende fotogalerie in elkaar zetten.
Hoe ga je FancyZoom installeren:
De eerste stap is het downloaden van het FancyZoom-pakket. Dat kun je doen vanaf deze locatie: http://www.cabel.name/2008/02/fancyzoom-10.html. Het pakket zit verpakt in een zip-bestand dat je dus eerst moet uitpakken. Je krijgt dan onder andere de map FancyZoom 1.1. Hier gaan we mee verder werken. De inhoud van deze map (dus niet de map zelf) upload je met behulp van je favoriete FTP-programma naar de map waar je ook je website hebt geplaatst. Bij Alphamega is dat de map 'httpdocs'.
Aan de pagina waarop je je foto's gaat plaatsen voeg je onderstaande code toe tussen de < head> en de < /head> tag:
<script src="/sitecoach/js-global/FancyZoom.js"
mce_src="/sitecoach/js-global/FancyZoom.js" type="text/javascript"></script>
<script src="/sitecoach/js-global/FancyZoomHTML.js"
mce_src="/sitecoach/js-global/FancyZoomHTML.js"
type="text/javascript"></script>
* Klik hier voor meer uitleg over hoe je deze code op je website kunt plaatsen
Aan de < body> tag voeg je de volgende code toe:
onload="setupZoom()"
je < body> tag ziet er dan als volgt uit:
<body
onload="setupZoom()">
Het kan natuurlijk voorkomen dat er zich nog meer elementen binnen de tag bevinden. Je voegt er dan gewoon de bovenstaande onload-functie aan toe.
De laatste stap is dan het daadwerkelijk toevoegen van je foto op de betreffende pagina. De code ziet er als volgt uit:
<a href="foto-groot.jpg"><img
src="foto-thumbnail.jpg" /></a>
Zoals je ziet maak je van je kleine foto (thumbnail) een link zodat bezoekers er op kunnen klikken om de grote foto te kunnen bekijken. De foto wordt vervolgens met een leuk fade-in effect getoond bovenop de inhoud van je pagina. Klik je op de grote foto, dan verdwijnt de foto met een fade-out effect.
Probeer het maar eens uit. Succes!
Meer informatie en voorbeelden kun je vinden op de website zelf:
http://www.cabel.name/2008/02/fancyzoom-10.html
