Tijdens het toepassen van Lightbox heb je misschien wel hetzelfde gedacht als ik: "Het zou tof zijn als je hier ook een andere pagina in zou kunnen laden...". Zou dat niet geweldig zijn? Het is goed toepasbaar voor bijvoorbeeld popups, belangrijke formulieren of help-pagina's. Na wat onderzoek kwam ik er al snel achter dat er gelukkig zoiets bestaat: 'Lightbox gone wild!'

Met 'Lightbox gone wild' plaats je een andere html-pagina 'over' je website, net zoals de originele Lightbox dat doet met afbeeldingen. Dus geen last van pop-up blockers of afleiding van datgene wat je wilt laten zien...

Hoe pas je dat dan toe?

• Download Lightbox Gone Wild hier.
• Pak het zip-bestand uit op een eenvoudig terug te vinden plaats.
• Maak een nieuwe map aan binnen je website map en noem deze ‘scripts'.
• Plaats hierin de .js-bestanden (in de zip-file bevinden deze zich ook in de map ‘scripts').
• Maak vervolgens een nieuwe map aan binnen je website map en noem deze ‘css'.
• Plaats hierin 'lightbox.css' (in de zip-file bevindt deze zich ook in de map ‘css'). Met deze css-file kun je eventueel nog aanpassingen doen naar jouw wensen. Zo kun je bijvoorbeeld de transparantie en de achtergrondkleur van de Lightbox instellen.
• Als je die nog niet hebt maak je nu een pagina aan die geopend moet worden in de Lightbox.
• Open vervolgens de pagina waar de link naar de andere pagina in staat.
• Plak nu in je websitecode, onder < head > , het volgende:

<link rel="stylesheet" href="css/lightbox.css"
media="screen,projection" type="text/css" />
<script type="text/javascript" src="scripts/prototype.js"></script>
<script type="text/javascript"
src="scripts/lightbox.js"></script>

• Ga nu naar de code van de gewenste link en voeg er class="lbOn" aan toe, zoals in het volgende voorbeeld:

<a href="anderepagina.html" class="lbOn">link naar html
pagina</a>

• De pagina zal nu geopend worden 'over' je website, in een Lightbox. :-)

Hoe sluit je de geopende pagina dan?

De pagina die geopend wordt heeft standaard nog geen sluitmogelijkheden, en je wilt natuurlijk niet dat je bezoekers gebruik moeten maken van de ‘Vorige'-toets.
We gaan er dus voor zorgen dat de pagina met 1 klik gesloten kan worden.

Open de betreffende pagina in je html-editor
Plaats op een willekeurige plek in de pagina de volgende code:

<a href="#" class="lbAction" rel="deactivate">Sluit deze
pagina</a>

En kan ik nog een pagina openen vanuit een Lightbox?

Wil je vanuit een pagina in een Lightbox een andere pagina openen die ook in een Lightbox moet staan, gebruik dan de volgende code:

<a href="confirm.html" class="lbAction" rel="insert">Ga naar een
andere lightbox.</a>

Ik wens je veel success met toepassingen bedenken voor Lightbox. Alle soorten html-pagina's kunnen gebruikt worden, dus laat je fantasie maar gaan! :-)