Startseite // Ausgabe von Links über Fancybox definieren

Ausgabe von Links über Fancybox definieren

26. Jan 2012, 23:08 Uhr

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 Links innerhalb eines Weblication® CMS Projektes erläutert.

Diese Funktionalität ist im aktuellen BASE Projekt bereits integriert und kann individuell angepasst werden. In älteren Projekten können Sie solche Funktionen bei Bedarf auch nachrüsten und sich an diesem Artikel orientieren. Die erforderlichen Skripte sind auszugsweise angeführt.

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 /IhrGlobalesProjekt/wGlobal/layout/templates/misc/includes.global.php


<?php

...
  <!-- HTML-Header -->
  <xsl:template name="htmlHeader">
  ...
    <xsl:if test="$wViewMode = ''">                                                                                
      <xsl:value-of select="php:functionString('wPageCur::registerJs', '/IhrGlobalesProjekt/wGlobal/layout/scripts/items/jquery.js')"/>             
      <xsl:value-of select="php:functionString('wPageCur::registerJs', '/IhrGlobalesProjekt/wGlobal/layout/scripts/items/jquery.fancybox.js')"/> 
      <xsl:value-of select="php:functionString('wPageCur::registerCss', '/IhrGlobalesProjekt/wGlobal/layout/styles/items/jquery.fancybox.css')"/>     
    </xsl:if>  
    <xsl:value-of select="php:functionString('wPageCur::registerJs', '/IhrGlobalesProjekt/wGlobal/layout/scripts/design.js')"/>
  ...
  </xsl: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") definiert, wie die Fancybox geöffnet werden soll (jQuery("a.box"). fancybox("type": ...).
Über die darauffolgende Zeile wird der Ansichtsmodus gesetzt (setViewmode). Standardmässig wird hier der viewmode=blank gesetzt, welcher über die System pre.php weiter verarbeitet wird.

Die Darstellung der Fancybox können Sie durch Anpassen der Parameter anpassen.

Beispiel: Auszug aus /IhrGlobalesProjekt/wGlobal/layout/scripts/design.js

// ...
////////////////////////////////////////////////////////////////
//
// Initialisieren der Seite
//
////////////////////////////////////////////////////////////////

jQuery(document).ready(function(){
  if(typeof wInitBrowseEdit == 'function'){
    wInitBrowseEdit();
  }
  if(typeof wEditor == 'undefined'){                                                                                                                                                                                                                                      
    jQuery("a.box").fancybox({"type": "iframe", "width": 640, "height": '80%', "titlePosition": "inside", "transitionIn" : "none", "transitionOut" : "none", "hideOnContentClick": true, "zoomOpacity": true, "zoomSpeedChange": 200, "zoomSpeedIn": 400, "zoomSpeedOut": 400, "overlayShow": false, "overlayOpacity": 1});
    jQuery("a.box").setViewmode('blank'); 
    // ...      
  }
});
// ...

Schritt 3: Attribute für 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.

Beispiel: Auszug aus /IhrGlobalesProjekt/wGlobal/layout/editor/link/standard.wTageditor.php

<?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 in fancybox" value="fancy" editable="1" classToSetIfSelect="box"/>    
    ...
  </attribute>
...
  <attribute name="class" values="" editable="1" sheetRegister="common">
    ...
    <item de:name="Fancybox" en:name="Fancybox" value="box" 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 die 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:
/IhrglobalesProjekt/wGlobal/layout/templates/blank.wDocument.php

Schritt 4: Ausgabetemplate

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!