Lightbox Colorbox (j_colorbox) für Bilder und Inhalte verwenden

von Marco Simbürger

Die Lightbox "Colorbox" (j_colorbox) ist standardmässig für Bilder gedacht. Es kann aber vorkommen, dass man mal Inhalte (z.B. Text bzw. HTML) in der Lightbox darstellen möchte.

Beispiel für Inline HTML

Dazu platzieren wir irgendwo auf der Seite den gewünschten Content und gebe diesem Inhalt eine eindeutige ID. Der Content soll auf der Seite aber nicht angezeigt werden, darum verstecken wir diesen mit display:none;

<div style="display:none;">
	<div id="lightbox_content">
	  <p><strong>Das ist mein Inhalt</strong></p>
	  <p>Der Inhalt der Lightbox.</p>
	</div>
</div>

Nun können wir auf der Seite einen Link setzen, der auf den anzuzeigenden Inhalt verweist:

<a class="colorbox_content cboxElement" data-lightbox="lb1403" href="#lightbox_content">Mein HTML anzeigen</a>

colorbox_content
Die Klasse colorbox_content benötigen wir nachher im Javascript.

cboxElement
cboxElement wird von Colorbox erwartet.

data-lightbox
data-lightbox="lb1403" wird auch von der Colorbox erwartet. Ich schreibe da jeweils einfach einen beliebigen Wert rein. Dieser Wert wird z.B. benötigt, um Bilder in einer Galerie zu gruppieren (diese haben dann alle den gleichen Wert).

href
href zeigt auf unser DIV mit dem anzuzeigenden Inhalt.

Nun erweitern wir noch das JavaScript. Dazu im Contao Backend unter Templates das Template "j_colorbox.html5" erstellen und folgenden Code nach dem ersten Aufruf der Colorbox einfügen:

if($(this).hasClass('colorbox_content')){
	$(this).colorbox({inline:true});
} else {
	$(this).colorbox({inline:false});
}

Wir überprüfen hier die Klasse. Handelt es sich um einen Link, der den Inhalt aufrufen soll, setzen wir inline auf true. Ansonsten auf false (für Bilder). Siehe: http://www.jacklmoore.com/colorbox/#setting-inline

Das ganze sollte dan wie folgt aussehen:

(function($) {
$(document).ready(function() {
  $('a[data-lightbox]').map(function() {
    $(this).colorbox({
      // Put custom options here
      loop: false,
      rel: $(this).attr('data-lightbox'),
      maxWidth: '95%',
      maxHeight: '95%'
    });
    if($(this).hasClass('inline')){
    	$(this).colorbox({inline:true});
  	} else {
		$(this).colorbox({inline:false});
  	}
  });
});
})(jQuery);

Und schon wird unser Inhalt aber auch weiterhin unsere Bildergalerien in der Lightbox angezeigt.

 

Beispiel mit externen Seiten

Natürlich können anstatt Inline HTML auch externe Seiten in der Lightbox angezeigt werden. Diese werden dann in einem iFrame in der Lightbox dargestellt. Dazu geben wir dem Link eine andere Klasse. Was für ein Name man da wählt ist egal. Die Klasse wird anschliessend einfach wieder im JavaScript benötigt.

<a class="colorbox_page_extern cboxElement" data-lightbox="lb1403" href="#lightbox_content">Mein HTML anzeigen</a>

Als nächstes passen wir das Template "j_colorbox.html5" an. Dieses mal empfehle ich die IF-Abfrage gleich vor der Initialisierung zu platzieren. Dadurch hat man die Möglichkeit, die Colorbox für den Aufruf von externen Seiten und für die Bildergalerien separat zu stylen. Das könnte also z.B. so aussehen:

(function($) {
    $(document).ready(function() {
      $('a[data-lightbox]').map(function() {
  		if($(this).hasClass('colorbox_page_extern')){
  			//Optionen für externe Seiten(iFrame in der Lightbox)
  			$(this).colorbox({
  				iframe:true,
  				width: "100%",
  				height: "100%",
  				maxWidth: '900px',
	          	maxHeight: '100%'
  			});
  		} else {
  			//Optionen für die normalen Bildergalerien
	        $(this).colorbox({
	          loop: false,
	          rel: $(this).attr('data-lightbox'),
	          maxWidth: '95%',
	          maxHeight: '95%'
	        });
  		}
      });
    });
})(jQuery);

Zurück

Kommentare

Kommentar von zonky |

Hi,
bei "href" schreibst Du im ersten Block
if($(this).hasClass('colorbox_content')){...
im zweiten
if($(this).hasClass('inline')){

ich nehme an, im zweiten Block sollte die Klasse "colorbox_content" rein

Gruss

Einen Kommentar schreiben

Bitte addieren Sie 4 und 3.