Weblication Tipps

Vor einiger Zeit hatte ich einen Beitrag geschrieben, der beschreibt wie man die Lightbox in Weblication integriert. Damals war die Lightbox noch auf das Javascript Framework Prototype mit den Effekten von Scriptacolous basiert und das Lightbox Script wurde zusätzlich dazu angepasst, sodass eine Kompatibilität zu neuen Versionen schwierig ist.

In letzter Zeit benutze ich anstatt prototype viel eher das Javascript Framework jQuery, da es einfacher zu handhaben ist und zudem schneller und kleiner ist. jQuery eignet sich auch hervorragend um die Lightbox Funktionalität auch in Weblication einzusetzen und zwar ebenfalls basierend auf der openPopup Variante aus der 4.x Version von Weblication.

Die Redakteure können dabei einfach die Bilder wie gewohnt mit openPopup verlinken und unsere jQuery Funktion macht anschließend den Rest. Natürlich kann man auch jeder andere jQuery Erweiterung wie die Thickbox, Fancybox oder andere benutzen. In dem folgenden Beispiel wird das Lightbox Plugin (9.8kb) verwendet.

Zunächst bindet man in den Kopf der Website jQuery sowie das jQuery Plugin ein:

<script src="js/jquery.js" type="text/javascript"><!--mce:0--></script>
<script src="js/jquery.lightbox-0.4.js" type="text/javascript"><!--mce:1--></script>

Die CSS-Angaben für die Lightbox dabei auch nicht vergessen. Anschließend benötigt man noch eine weitere Javascript Datei in welche wir allgemeine Funktionen aufrufen, zum Beispiel eine functions.js.

In diese functions.js kommt folgender Code:

jQuery().ready(function(){
  enableLightbox();
});
 
function enableLightbox() {
	$("a[href^='javascript:openPopup']").each(function() {
 	this.href = this.href.replace("javascript:openPopup('", "").replace("');", "");
	$(this).lightBox({
		overlayBgColor: '#000',
		overlayOpacity: 0.75,
		imageLoading: '/projekt/wLayout/design/img/lightbox/loading.gif',
		imageBtnClose: '/projekt/wLayout/design/img/lightbox/schliessen.gif',
		imageBtnPrev: '/projekt/wLayout/design/img/lightbox/zurueck.gif',
		imageBtnNext: '/projekt/wLayout/design/img/lightbox/weiter.gif',
		containerResizeSpeed: 250,
		txtImage: 'Illustration',
		txtOf: 'von'
	});
	});
}

Was macht diese Funktion?

Es wird die komplette Seite nach Links durchsucht, welche im href-Teil ein openPopup geschrieben haben. Anschließend wird dieses openPopup entfernt (samt Klammern und Anführungszeichen) und die Lightbox Funktionalität daran gehängt. Fährt man nun mit der Maus über den Link im Frontend sieht man zwar nicht mehr dass es sich im Popup, bzw. in der Lightbox öffnet, die Funktionalität ist jedoch gegeben.

Dieser Eintrag wurde am on Dienstag, 17. November, 2009 um 07:53 Uhr veröffentlicht und ist abgelegt unter Snippet, Weblication Mods.
Du kannst Antworten oder Reaktionen auf den Beitrag mithilfe des RSS 2.0-Feeds verfolgen. Du kannst eine Antwort schreiben, oder einen Trackback von Deiner Seite erstellen.
Verwendete Tags: jQuery, lightbox, openPopup.