Silverstripe: lightbox

silverstripe
12.06.2014

Die Lightbox gehört mittlerweile zum Repertoir eines jeden Contentmanagementsystems das etwas auf sich hält. So gibt es auch für silverstripe einige Module, die eine Lightboxintegration versprechen.

Allerdings sind das in der Regel Galeriemodule, mit denen es nicht möglich ist, den Lightboxeffekt auf Bilder in beliebigen Seitentypen zu integrieren. Oder die Module werden nicht in gleicher Geschwindigkeit wie silverstipe selbst entwickelt, so dass sie nach einem Systemupdate nicht mehr zu gebrauchen sind.

Hier möchte ich eine Variante vorstellen, die es dem mit HTML vertrauten Silverstripeadministratoren erlaubt, den Effekt auf beliebige Bilder anzuwenden.

Zum Einsatz kommen jquery und die Lightboximplementation fancybox.
Hier eine Anleitung in 5 Schritten:
1. Fancybox herunterladen und in die Silverstripeinstallation integrieren

Download: fancybox.net

Den Quelltext in das vorgesehene Verzeichnis kopieren:

/mysite/javascript/jquery/plugins/fancybox

2. BlogEntry_Controller

Die JavaScript uns css Dateien müssen über den Controller geladen werden. Also muss die init()-Methode (im Beispiel in der Datei BlogEntry.php) entsprechend erweitert werden:

public function init() {
  parent::init();
//jquery laden
  Requirements::javascript('http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js');
//fancybox script und css laden
  Requirements::javascript('mysite/javascript/jquery/plugins/fancybox/jquery.fancybox-1.3.4.pack.js');
  Requirements::css('mysite/javascript/jquery/plugins/fancybox/jquery.fancybox-1.3.4.css');
//eigenes JavaScript laden
  Requirements::javascript('mysite/javascript/custom.js');
}

3. Eine eigene JavaScrip Datei erstellen
Ein JavaScript, das die Funktionalität der fancybos steuert muss erstellt und in das dafür vorgesehenen Verzeichnis kopiert werden:

/mysite/javascript/custom.js:
(function($) {
  $(document).ready(function() {
// fancybox setup
    $('.lightbox').fancybox({
      transitionIn : 'elastic',
      transitionOut : 'elastic',
      overlayShow : false
    });
  });
})(jQuery);

4. fancybox auf ein Bild anwenden

Im Editor ein Thumbnail aus dem asset-Verzeichnis einfügen und mit einem Link auf eine größere Version des Bildes versehen. Dann muss der HTML-Editor geöffnet werden und die lightbox-Klasse in den link-Tag eingefügt werden:

<a href="link/zum/bild" class="lightbox">

5. Veröffentlichen

Die Seite speichern und veröffentlichen. Wenn alles richtig läuft, funktioniert jetzt die Lightbox.

comments powered by Disqus

Silverstripe

Silverstripe: lightbox

silverstripe

Die Lightbox gehört mittlerweile zum Repertoir eines jeden Contentmanagementsystems das etwas auf sich hält. So gibt es auch für silverstripe einige Module, die eine Lightboxintegration versprechen.

Allerdings sind das in der Regel Galeriemodule, mit denen es nicht möglich ist, den Lightboxeffekt auf Bilder in beliebigen Seitentypen zu integrieren. Oder die Module werden nicht in gleicher Geschwindigkeit wie silverstipe selbst entwickelt, so dass sie nach einem Systemupdate nicht mehr zu gebrauchen sind.

A ? B C D E F G H I J K L M N O P Q R S T U V W Z