Foldergallery

Die Foldergallery ist darauf vorbereitet, theoretisch jedes beliebige Lightbox-Derivat nutzen zu können. Für jQuery existieren eine Reihe sehr guter Lightbox-Plugins; also lag es nahe, die Foldergallery und jQueryAdmin zu integrieren. (Natürlich funktioniert die Foldergallery auch separat.)

Die Nutzung ist ganz einfach:

  • jQueryAdmin >= v2.0 von AMASP herunterladen und installieren
  • Foldergallery >= 1.02 von AMASP herunterladen und installieren
  • Eine neue Seite für die Galerie erstellen (Seite hinzufügen, Art "Foldergallery")
  • Die neue Seite bearbeiten und unter [Allgemeine Einstellungen] die gewünschte Lightbox auswählen; die von jQueryAdmin zur Verfügung gestellten Lightboxen sind mit einem vorangstellten "jQueryAdmin:" eindeutig zu indentifizieren

Vorausgesetzt, daß es Bilder in der Galerie gibt (siehe Anleitung zur Foldergallery), können diese sofort mit der neuen Lightbox angesehen werden.

Plugin für die Nutzung mit der Foldergallery vorbereiten

Hierzu muß der entsprechende HTML-Quelltext in einer .htt-Datei hinterlegt werden. Normalerweise heißen diese Dateien view_<Lightboxname>.htt und liegen im Verzeichnis modules/foldergallery/templates. Ab Version 1.02 berücksichtigt die Foldergallery aber auch Templates unterhalb von modules/jqueryadmin/plugins/<Pluginname>.

Um eine Lightbox zur Nutzung mit der Foldergallery anzupassen, ist folgendermaßen vorzugehen:

  • Das Plugin zur Nutzung mit jQueryAdmin aufbereiten, wie unter Plugins einbinden beschrieben.
  • Eine Datei foldergallery_template.htt im Plugin-Verzeichnis anlegen.

Diese Datei hat ungefähr folgenden Inhalt (aus Slimbox2):

<div class="gallery">
  <div class="gallerytitel">
    <span class="view_title">{VIEW_TITLE}&nbsp;{CATEGORIES_TITLE}</span>&nbsp;<span class="categories_title">{CAT_DESCRIPTION}&nbsp;</span>
  </div>
</div>
<div class="pagenav" style="text-align: left">{CATBREAD}</div>
<div class="foldergallery-wrapper">
<ul class="categories">
<!-- BEGIN categories -->
<!-- BEGIN show_categories -->
        <li>
                <a href="{CAT_LINK}"><img src="{THUMB_LINK}" alt=""/><br />{CAT_CAPTION}</a>
        </li>
<!-- END show_categories -->
<!-- END categories -->
</ul>

<!-- BEGIN hr -->
<hr class="clear" />
<!-- END hr -->

<ul class="photostyle" id="lightbox">
<!-- BEGIN images -->
<!-- BEGIN thumbnails -->
        <li>
                <a href="{ORIGINAL}" title="{CAPTION}" rel="lightbox"><img src="{THUMB}" alt="{CAPTION}"/></a>
        </li>
<!-- END thumbnails -->
<!-- END images -->
</ul>

<br style="clear:both" />
<!-- BEGIN pagenav -->
<div class="fgpagenav">{PAGE}:&nbsp;{PAGE_NAV}</div>
<!-- END pagenav -->
</div>
 

Interessant ist hauptsächlich der Teil zwischen <!-- BEGIN thumbnails --> und <!-- END thumbnails -->:

<li>
  <a href="{ORIGINAL}" title="{CAPTION}" rel="lightbox"><img src="{THUMB}" alt="{CAPTION}"/></a>
</li>

Dieser muß durch den passenden Quellcode für die jeweiligen Lightbox ersetzt werden. Wie dieser auszusehen hat, sollte auf der Homepage des Plugins zu finden sein. Im Falle der Slimbox2 ist der Teil rel="lightbox" entscheidend; für PrettyPhoto müßte dieser etwa in rel="prettyPhoto" geändert werden.

Sobald die Datei foldergallery_template.htt vorhanden ist, bietet die Foldergallery die entsprechende Lightbox unter [Allgemeine Einstellungen] zur Auswahl an.