Veröffentlichungsdatum: 02. Januar 2017
Änderungsdatum: 11. Februar 2019
weblication cms link fancybox jquery lightbox wlightbox ziel öffnen
Nutzen Sie die Möglichkeiten der Lightbox / Fancybox, um Links in einem individuell gestalteten Fenster zu öffnen.
Fancybox, Lightbox, jQuery und Co bieten vielfältige Möglichkeiten, um z.B. die Darstellung des Zielfensters eines Links individuell zu gestalten. Nachfolgend wird Ihnen der Einsatz der Fancybox für Querverweise innerhalb eines Weblication® CMS Projektes erläutert.
Diese Funktionalität ist im aktuellen BASE Classic Projekt bereits integriert und kann individuell angepasst werden. In älteren Projekten können Sie solche Funktionen bei Bedarf nachrüsten und sich an diesem Artikel orientieren. Die erforderlichen Skripte sind auszugsweise angeführt.
Beim Einsatz eines BASE (Mobile First) Projektes finden Sie einen Hilfe-Artikel im Mobile First Hilfebereich.
Das BASE Projekt nutzt für zentrale Javascript-Funktionen die Datei design.js des globalen Projektes. Für die Fancybox-Funktionen müssen zudem die hierzu erforderlichen JS- und CSS-Dateien eingebunden sein. Dies erfolgt über die includes.global.php im htmlHeader-Template.
In der BASE werden jeweils die aktuellsten getesteten Skriptdateien mitgeliefert.
... <!-- HTML-Header --> <template name="htmlHeader"> ... <xsl:choose> <xsl:when test="php:functionString('wVariables::getValue', 'lightbox_type', $wGlobalProjectPath) = 'wLightbox'"> <xsl:comment>[if lt IE 9]<![CDATA[><link rel="]]>"color:#0000BB"><xsl:value-of select="$wGlobalProjectPath" /><![CDATA[/wGlobal/layout/styles/items/jquery.fancybox" type="text/css" /><!]]>[endif]</xsl:comment> <xsl:comment>[if lt IE 9]<![CDATA[><script type="text/javascript" src="]]>"color:#0000BB"><xsl:value-of select="$wGlobalProjectPath" /><![CDATA[/wGlobal/layout/scripts/items/jquery.js"></script><!]]>[endif]</xsl:comment> <xsl:comment>[if lt IE 9]<![CDATA[><script type="text/javascript" src="]]>"color:#0000BB"><xsl:value-of select="$wGlobalProjectPath" /><![CDATA[/wGlobal/layout/scripts/items/jquery.fancybox.js"></script><!]]>[endif]</xsl:comment> </xsl:when> <xsl:otherwise> <xsl:value-of select="php:functionString('wPageCur::registerJs', concat($wGlobalProjectPath, '/wGlobal/layout/scripts/items/jquery.fancybox', php:functionString('wVariables::getValue', 'fancybox_version', $wGlobalProjectPath), '.js'))"/> <xsl:value-of select="php:functionString('wPageCur::registerCss', concat($wGlobalProjectPath, '/wGlobal/layout/styles/items/jquery.fancybox', php:functionString('wVariables::getValue', 'fancybox_version', $wGlobalProjectPath), '.css'))"/> </xsl:otherwise> </xsl:choose> <xsl:value-of select="php:functionString('wPageCur::registerJs', concat($wGlobalProjectPath, '/wGlobal/layout/scripts/ui.js'))"/> <xsl:value-of select="php:functionString('wPageCur::registerJs', concat($wGlobalProjectPath, '/wGlobal/layout/scripts/design.js'))"/> ... </template> ...
In der design.js wird innerhalb des Bereiches "Initialisieren der Seite" über jQuery für alle a-Tags mit der Klasse "box" (class="box") - und weitergehenden Klassen - definiert, wie die Fancybox geöffnet werden soll (jQuery("a.box ...).
Danach wir über eine separate Zeile der Ansichtsmodus gesetzt (setViewmode). Standardmässig wird hier der viewmode=blank gesetzt, welcher über die System pre.php weiter verarbeitet wird.
Die BASE nutzt in aktuellen Versionen standardmäßig einen eigene wLightbox-Funktion und bietet alternativ über die Projektkonfiguration einstellbar das Umschalten auf die Fancybox. Der nachfolgende Beispiel-Quelltext beschränkt sich auf die Definition der wLightbox über die design.js. Bei Nutzung der Fancybox nehmen Sie individuelle Anpassungen im else if- bzw. else-Zweig der design.js vor.
Die Darstellung der wLightbox und Fancybox können Sie durch Anpassen der Parameter anpassen. Eine Gewährleistung für individuelle Anpassungen kann nicht gegeben werden und bewegt sich auch nicht innerhalb des kostenlosen CMS-Supportes für Vertriebspartner.
// ... //////////////////////////////////////////////////////////////// // // Initialisieren der Seite // //////////////////////////////////////////////////////////////// jQuery(document).ready(function(){ // ... if(typeof wEditor == 'undefined'){ var widthFancybox = '80%'; var heightFancybox = '80%'; if(jQuery(window).width() <= 480){ widthFancybox = '100%'; } if(typeof(lightboxType) != 'undefined' && lightboxType == 'wLightbox' && !/MSIE\s*(7|8)/.test(navigator.appVersion)){ //jQuery("a.box, a.boxOnly, a[target*='fancy']").wLightbox({"type": "ajax", "class": "default"}); jQuery("a.box, a.boxOnly, a[target='fancy']").wLightbox({"type": "iframe", "class": "default", "width": widthFancybox, "height": heightFancybox}); jQuery("a[target*='boxVideo'], a[target*='boxVideoOnly']").wLightbox({"type": "video", "class": "default", "width": widthFancybox, "height": heightFancybox}); jQuery("a.boxPicture, a.boxPictureOnly, a[target='fancyPicture']").wLightbox({"type": "image", "class": "default", 'scrollIfToHeight' : false, "width": widthFancybox, "height": heightFancybox}); jQuery("a.box, a.boxOnly, a[target='fancy'], a[target='boxVideo'], a[target='boxVideoOnly']").filter(function(i){return !/^http/.test(jQuery(this).attr('href'))}).wSetViewmode('blank'); } else if(jQuery.fancybox && jQuery.fancybox.version && parseInt(String(jQuery.fancybox.version).replace(/(\d+\.\d+)\.\d+/, '$1')) >= 2){ // ... } else{ // ... } // ... } }); // ...
Im Standard öffnet sich die Lightbox mit 80% Breite und 80% Höhe des sichtbaren Bereiches. Sie können diese Werte in der design.js individuell anpassen.
Darüber hinaus erlaubt die aktuellste ui.js (BASE bzw. Weblic®) individuelle Breiten- und Höhenangaben über Data-Attribute, welche über CSS-Only definiert werden können.
/* ... */ /* bei CSS-Only add-data gilt immer der in der design.css zuletzt definierte Wert, d.h. eine Unterscheidung nach Mediaqueries ist nicht möglich. */ a.box {-w-add-data:widthBox=70%,heightBox=80%;} /* ... */
Um Verweise (Links) komfortabel in einer Fancybox öffnen zu lassen, ist die Maske für die Linkbearbeitung mit den erforderlichen Attributen für das Linkziel und die Klasse ausgestattet.
Zum target-Attribut wird die Auswahlmöglichkeit "Link in einer Fancybox öffnen" bereitgestellt. Dieses Attribut ist über classToSetIfSelect="box" so definiert, dass bei Auswahl dieser Option automatisch die Klasse "box" gesetzt wird, die nachfolgend beschrieben ist.
Die Pflege des class-Attributes bietet die Möglichkeit, die Klasse für die Fancybox auszuwählen. Über selectIfMatchHref="gif|jpg|jpeg|png" wird bei Verlinkung eines Bildes mit einer der genannten Dateiendungen die Klasse "box" automatisch vorausgewählt.
<?php $version="1.0"; $encoding="UTF-8"; ?> <?php exit; ?> <wTagEditor xmlns:de="http://weblication.de/5.0/lang/de" xmlns:en="http://weblication.de/5.0/lang/en" xmlns:wsl="http://weblication.de/5.0/wsl" version="1.0"> ... <attribute name="target" valueSelected="" editable="1" sheetRegister="common"> ... <item de:name="Link in einer Fancybox öffnen" en:name="Open pagein fancybox" fr:name="Ouvrir le lien dans un Fancybox" value="fancy" editable="1" classToSetIfSelect="box"/> <item de:name="Bild in einer Fancybox öffnen" en:name="Open picture in fancybox" fr:name="Ouvrir l'image dans un Fancybox" value="fancyPicture" editable="1" classToSetIfSelect="boxPicture"/> ... </attribute> ... <attribute name="class" values="" editable="1" sheetRegister="common"> ... <item de:name="Link in Fancybox" en:name="Fancybox" value="box"/> <item de:name="Bild in Fancybox" en:name="Fancybox" value="boxPicture" selectIfMatchHref="gif|jpg|jpeg|png"/> ... </attribute>
Wird eine Seite innerhalb der Fancybox geöffnet, so möchte man in der Regel den Inhalt nicht als Standarddarstellung (Logo, Navigation, etc.) angezeigt bekommen, sondern ggf. nur den Text.
Aus diesem Grund wird eine interne Seite nicht über das Standard Ausgabetemplate (standard.wDocument.php) geöffnet, sondern über die blank.wDocument.php. Gesteuert wird dies durch Setzen des viewmode innerhalb der design.js, wie weiter oben beschrieben. Der viewmode=blank wird über die zentrale Steuerungsdatei (pre.php) dem Ausgabetemplate blank.wDocument.php zugewiesen.
Möchten Sie die Darstellung INNERHALB der Fancybox ändern, können Sie dies durch Anpassen dieses Ausgabetemplates vornehmen, das standardmässig wie folgt abliegt:
/[IHR-LAYOUT-PROJEKT]/wGlobal/layout/templates/blank.wDocument.php