Artikelen

Lightbox installeren

Gepost door joost op 27 mrt 2010 in de categorie HTML
FF een Lightboxje installeren. Het is een 'piece of cake', maar het maakt je website meteen een stuk sjieker. Er zijn vele varianten van de Lightbox gemaakt. De originele Lightbox kan alleen afbeeldingen openen. Daarom laat ik in dit voorbeeld zien hoe je de variant 'Thickbox' installeert. De Thickbox kan naast afbeeldingen ook iframes en flash-video aan.


Stap 1. Downladen van de files
Om thickbox te installeren heb je vier files nodig, namelijk jquery.js, thickbox.js, thickbox.css, en de loadingAnimation.gif. Sla deze files op op je computer.


Stap 2. Aanpassingen maken aan je HTML
Zorg dat de pagina van waaruit je de Thickbox wil gaan aanroepen een geldige 'Document Type Definition' heeft. Zonder geldige DTD zal Thickbox niet goed werken. Zet daarom de volgende code op de eerste regel van je HTML document.

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

Andere geldige doctypes kun je vinden op w3schools.com. Vervolgens moet je de files die je hebt gedownload gaan inladen. Dit doe je met de onderstaande code, die je plaatst tussen de <HEAD> en de </HEAD> tag van je document. Let op: de volgorde van het inladen is van belang en moet zijn zoals in dit voorbeeld!

  1. <script type="text/javascript" src="/thickbox/jquery.js"></script>
  2. <script type="text/javascript" src="/thickbox/thickbox.js"></script>
  3. <link rel="stylesheet" href="/thickbox/thickbox.css" type="text/css"
    media="screen" />


Stap 3. Aanpassen van de thickbox.js file
In de thickbox.js file staat op één van de eerste regels een link naar 'loadingAnimation.gif'.

  1. var tb_pathToImage = "images/loadingAnimation.gif";

Deze verwijzing is relatief en onjuist en passen we daarom aan. We gebruiken gewoon dezelfde directory als we voor de scripts hebben gebruikt. Dat is makkelijk want dan hebben we alle files bij elkaar. Bovenstaande regel moet je dus vervangen door deze:

  1. var tb_pathToImage = "/thickbox/loadingAnimation.gif";


Stap 3. Uploaden van de files
Nu moet je de files uploaden. Open een FTP programma en maak in de root van je website een mapje aan met de naam 'thickbox'. Upload alle vier de files naar deze directory.


Stap 4. Implementeren maar
Nu komt het leuke deel... Thickbox is 'geinstalleerd'. En kan dus aangeroepen worden. Hieronder een aantal manieren om dat te doen.

Enkele afbeelding
  1. <a href="voorbeeld.jpg" class="thickbox">link</a>

Gallerij met afbeeldingen
  1. <a href="voorbeeld1.jpg" class="thickbox" rel="gallerij_1">link1</a>
  2. <a href="voorbeeld2.jpg" class="thickbox" rel="gallerij_1">link2</a>

Iframe openen
  1. <a href="http://www.voorbeeld.nl?KeepThis=true&TB_iframe=true&height=400&width=600"
    class="thickbox" title="Vul hier een beschrijving in">link</a>

Dit is de basis. Op de website van Thickbox: http://jquery.com/demo/thickbox staat meer informatie, onder andere over INLINE content en AJAX content. Succes!

Before you can implement ThickBox make sure the page that invokes ThickBox has a valid DTD. This is required for ThickBox to look and function correctly.

1. ThickBox requires the jQuery JavaScript library; because of this, you will need to include the jquery.js file in the head element of your web page, followed by the thickbox.js file (NOTE: jquery.js must come first in the source order). Example below:

<script type="text/javascript" src="path-to-file/jquery.js"></script>
<script type="text/javascript" src="path-to-file/thickbox.js"></script>

Once you have included the .js files, open thickbox.js or thickbox-compressed.js and locate the tb_pathToImage variable at the top of the page. Once you have found it, make sure to change the value of tb_pathToImage to the path where the loadingAnimation.gif file is located on your own server.

2. Include the ThickBox CSS file in your web page. As of version 3.1 you will also need to update the path to the macFFBgHack.png in the thickbox.css file. Example options below:

<link rel="stylesheet" href="path-to-file/thickbox.css" type="text/css" media="screen" />





Terug