category html

Lightbox 2.0 (foto’s mooier presenteren)

1

Aphichat
Jan 31, 2009

1 Star2 Stars3 Stars4 Stars5 Stars

Tags: , , ,

Tegenwoordig zie je vaak bij het klikken van een klein afbeelding dat er een soort van popup naar voren komt met een donkere achtergrond. Het effect is gemaakt voor het presenteren van afbeeldingen en is een vervanging van popups als je op een foto klikt.

lightbox20

Lightbox is een javascript(ajax) module en wordt veel gebruikt bij online portfolio’s.
Hieronder staat een link naar een mooi voorbeeld bij het gebruik van LightBox.

Voorbeeld Lightbox

Hier kan je Lightbox 2.0 downloaden en je krijgt er 1 html bestand bij en daarin staan de instructies hoe je het kan koppelen.

Wat heb je nodig om zo’n mooie presentatie te maken?

  • HTML pagina
  • Kleine versie van het afbeelding (thumbnail)
  • Grote versie van het afbeelding
  • Lightbox (download)

DL Lightbox 2.0

Instructie vanuit: http://www.lokeshdhakar.com/projects/lightbox2/

Stap 1 – Opstellen

1. Lightbox maak gebruik van javascript dus die moet je koppelen in je html code (zet die tussen <head></head> voor het activeren van javascript. 

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

2. Zet onderstaande css code ook tussen de <head></head>

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

3. Zorg er ook voor dat je de images map in je website map zet en kijk of de link naar je images goed gelinkt wordt in je stylesheet.

Part 2 – Activeren

1. Zet een (rel=”lightbox”) in je thumbnail om lightbox bij deze afbeelding te activeren. Zie voorbeeld hieronder.

<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

2. Je kan de afbeeldingen ook groeperen door [groep] na de code ‘lightbox’ er naast te zetten. 

<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>

Je kan de resultaat gelijk bekijken zonder de bestanden te uploaden.


  1. 12/30/2009
    Heleen

    hartelijk dank, het lukt met de foto’s, eerste poging om met codes te werken dus goede handleiding!

twitter