Lightbox: Individuelle Inhalte in Lightbox anzeigen (data-lightboxtype=inline)

Veröffentlichungsdatum: 03. März 2023
Änderungsdatum: 08. August 2023
Projektgrundlage: BASE

Über den Lightbox-Type "inline" können Sie die Lightbox mit individuellen Informationen füllen.

In folgendem Beispiel soll der Hinweiscontainer der aktuellen Seite über einen Link innerhalb einer Lightbox geöffnet werden. Dazu setzen Sie für das a-Tag das data-Element lightboxtype auf "inline". Via Javascript ermitteln Sie dann den zugehörigen HTML-String und geben diesen beim Laden an die Lightbox weiter.

Schritt 1: Definieren eines Links mit dem Attribut data-lightboxtype="inner"

Hier wird das HTML-Quelltextelement verwendet um den Link zu schreiben. Natürlich können Sie das data-Attribut auch in Verbindung mit CSS-Only über eine Variante setzen.

Beispiel: Auszug aus dem Element "HTML einbinden"

<a href="#anchor_1253637c_Hinweis" data-lightboxtype="inline" target="box">Hinweis anzeigen</a>
Hinweis anzeigen

Schritt 2: JS-Quelltextelement und Lightbox setzen

Über ein Javscript-Quelltextelement können Sie für die Seite definieren, wie sich die Lightbox verhalten soll.

Beispiel: Manipulieren des Link-Targets über ein JS-Quelltextelement

if(typeof wEditor == 'undefined'){
  document.addEventListener('DOMContentLoaded', function waitUntilContentLoaded(){
    if(!window.jQuery){
      return setTimeout(waitUntilContentLoaded, 100);
    }

    /*Auslesen der Hinweisbox*/
    var selector = 'div'+jQuery('a[data-lightboxtype=inline]').attr('href');
    var options  = {
                      'type': 'inline',                                         /*Inhalte werden nicht als ajax geladen*/
                      'allowTouchStart' : true,                                 /*touchend-Events werden ausgeführt (mobile Anzeige)*/
                      'class' : 'myCss',                                        /*CSS-Klasse hinzufügen*/
                      'content': jQuery(selector).closest('.elementBox').html() /*HTML-String der eingefügt werden soll*/
                    };
    jQuery('a[data-lightboxtype=inline]').wLightbox(options);


  }, false);
}

Hinweis: Funktion für gesamtes Projekt festlegen

Möchten Sie diese Funktion innerhalb des gesamten Projekts anbieten, so ist es ratsam die Syntax innerhalb der design.js innerhalb der Funktion addLinkTargets zu platzieren.

Beispiel: Auszug aus der design.js, Anpassung des Linktargets

addLinkTargets = function(root){
  
  root = root || document.body;

  if(!jQuery('html').hasClass('isInLightbox')){  
    var link = jQuery(root).find('a[data-lightboxtype=inline]');    
    var selector = 'div'+link.attr('href');
    link.wLightbox({content : jQuery(selector).html()});
   ..
  }
..
};