Maak je eigen Lightbox

De Lightbox werd in eerste instantie vooral gebruikt voor het tonen van afbeeldingen op een manier zonder popups, maar tegenwoordig worden ze zo ongeveer overal voor gebruikt. Ook zijn ze er in verschillende soorten, maten en uitvoeringen. Soms kan het echter zijn dat de beschikbare ligtboxen niet voldoen aan de gestelde eisen. Daarom laat ik zien hoe je zelf een lightbox kunt maken.

De CSS

De lightbox draait vooral op de bijbehorende CSS. Die zorgt voor de opmaak en het bijbehorende effect. Ik gebruik 2 div's: 1 voor de achtergrond zodat deze doorschijnend is, en 1 voor de inhoud van de box. De CSS die daarbij hoort ziet er zo uit:

  1. div#lightbox {
  2.         display: none;
  3.         position: fixed;
  4.         top: 0;
  5.         left: 0;
  6.         height: 100%;
  7.         width: 100%;
  8.         background: #000;
  9.         opacity: 0.5;
  10. }
  11. div#content {
  12.         display: none;
  13.         position: absolute;
  14.         border: 3px solid #0000ff;
  15.         background: #fff;
  16.         top: 25%;
  17.         left: 25%;
  18.         height: 50%;
  19.         width: 50%;
  20.         opacity: 1.5;
  21.         padding: 5px;
  22. }

De bijbehorende content ziet er dan als volgt uit:

  1. <div id="lightbox"></div>
  2. <div id="content">Hier komt de content</div>

De Javascript

Nu de HTML en CSS geregeld is moet er nog een stukje javascript aan toegevoegd worden om ervoor te zorgen dat de lightbox naar voren komt wanneer er op een link geklikt wordt, en ook weer gesloten kan worden. De jQuery voor het openen ziet er zo uit:

  1. $( function () {
  2.         $(".lightbox").click( function () {
  3.                 $("div#lightbox").fadeIn();
  4.                 $("div#content").fadeIn();
  5.         });
  6. });

De jQuery voor het sluiten is bijna hetzelfde, met als verschil dat deze op de ligthbox div wordt gehangen. Hierdoor kan er op de zwarte content geklikt worden zodat de lightbox gesloten worden. Dat ziet er zo uit:

  1. $( function () {
  2.         $("div#lightbox").css('cursor', 'pointer').click( function () {
  3.                 $("div#lightbox").fadeOut();
  4.                 $("div#content").fadeOut();
  5.         });
  6. });

Eventueel kun je de lightbox ook laten sluiten wanneer er op ESC is gedrukt. Dan moet deze code worden toegevoegd:

  1. $( function () {
  2.         $(document).keydown( function (e) {
  3.                 if(e.keyCode == '27') {
  4.                         $("div#lightbox").fadeOut();
  5.                         $("div#content").fadeOut();
  6.                 }
  7.         });
  8. });

Extra functies toevoegen

Nu de basis compleet is kan er uitgebreid gaan worden. Zo kan er bijvoorbeeld via AJAX dynamische content opgehaald worden. Daarvoor wordt gebruik gemaakt van de jQuery functie load. Deze functie laadt het opgegeven pad en plaatst de opgehaalde inhoud in het geselecteerde element:

  1. $("#content").load("/");

Bekijk dit voorbeeld

Slechts een gedeelte van de pagina ophalen? Dat kan ook met de load functie. Je kunt een selector meegeven in de functie, bijvoorbeeld enkel een div met het ID menu:

  1. $("#content").load("/ div#menu");
Bekijk dit voorbeeld