Links / Querverweise über Lightbox

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.

Schritt 1: Zentrale Javascript- und CSS-Dateien einbinden

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.

Beispiel: Auszug aus /[IHR-LAYOUT-PROJEKT]/wGlobal/layout/templates/misc/includes.global.php

...
  <!-- 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>
...

Schritt 2: Zentrale Javascript-Datei design.js

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.

Beispiel: Auszug aus /[IHR-LAYOUT-PROJEKT]/wGlobal/layout/scripts/design.js

// ...
////////////////////////////////////////////////////////////////
//
// 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{
      // ...
    }
    // ...
  }
});
// ...

Individuelle Breiten- und Höhenangaben der Lightbox

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.

Beispiel: Auszug aus /[IHR-LAYOUT-PROJEKT]/wGlobal/layout/styles/design.css

/* ... */

/*  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%;}

/* ... */

Schritt 3: Attribute für die Linkbearbeitung definieren

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>

Schritt 4: Ausgabetemplate

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

Hinweise

  • Die oben angeführten Quelltextbeispiele basieren auf dem Stand, zu dem dieser Artikel verfasst wurde. Entnehmen Sie die Definitionen bzw. Funktionen bitte immer dem aktuellsten BASE Projekt bzw. Weblic®.
  • Achten Sie darauf, dass weitere jQuery- oder andere Javascript-Skripte in der Seite die Funktionalität der Fancybox nicht beeinträchtigt!
  • Es erfolgt keine Gewährleistung für den Einsatz der externen Skripte der Fancybox!