Zelf lightbox maken

[Eduard98]

Is het mogelijk om zelf in JavaScript een lightbox te maken?
Of is dit een gigantisch werk? En heb je misschien ook nog javascript libraries nodig?
Of is javascript misschien helemaal niet zo geschikt hiervoor?

 

[That Guy]

Nou, mad props als je het kan doen zonder Javascript... want dat is (volgens mij lichtelijk) onmogelijk.


Anyway, ja, dit is wel iets wat je kan doen. Het komt hier op neer:

1. op elke link met een bepaalde class/id/iets gooi je een event listener
2. bij een event bouw je een stukje HTML, iets van een div met daarin een image en evt. een span voor text. En natuurlijk de sluit knop
3. append de HTML in de document en stijl deze zodat het absolute middenin je scherm staat
4. klaar!

om x-browser probleempjes op te lossen kan je een jsLib gebruiken maar het is natuurlijk veel cooler om het helemaal zelf te bouwen. En goed te doen verder.



:thumb:

 

[Naarling]

Nou, mad props als je het kan doen zonder Javascript... want dat is (volgens mij lichtelijk) onmogelijk.

Dat was onmogelijk...
http://sixrevisions.com/css/semantic-css3-lightboxes/

 

[That Guy]

Ah, daar was ik al bang voor, een of andere CSS3 selector


Het heeft wel een aantal nadelen though. Je bent oa. verplicht te werken met hashes, en de 'close' button zal dus naar een lege hash moeten wijzen, wat de pagina naar boven scrollt.