DevKick Galleria in RapidWeaver Alben

Wie integriert man DevKicks Galleria (kleines aber seeeehr feines jQuery Modul) am besten mit RapidWeaver Alben?

Als Erstes besorgen wir uns die nötigen Dateien, und legen diese in der benutzten Vorlage ab.
Dazu öffnen wir den Vorlagenordner (Rechtsklick, "im Finder öffnen...") und kopieren dann die benötigten Javascript und CSS Dateien in den Ordner "css". Mann kann auch einen neuen Ordner dafür anlegen, dieser muss dann aber in der Theme.plist eingepflegt werden - so ist es einfacher.

Der Ansatz:
Da ich die Thumbs gerne in der Sidebar hätte, behelfen wir uns zunächst mit ein wenig PHP Code in der Sidebar:

<?php
    $d = opendir ( "files" );

    print ( "<ul class="\"gallery\"">" );
    while ( $f = readdir($d) )
    if ( preg_match ( "#-full.jpg$#", $f ) )
        print ( "<li><img src="files/$f" /></li>" );
    print ( "</ul>" );
?>

Die Idee dabei:
RapidWeaver legt die Originale zu den Bildern im Unterverzeichnis "files" mit dem Suffix "-full" ab.
Das Script erstellt eine Liste mit Refferenzen zu diesen Bildern, genau wie Galleria sie benötigt.
Wer die Thumbnails lieber im Content Bereich der Seite hat, fügt den Code einfach unter "Seiteninformationen->Seite->Beschreibung" ein.

Als nächstes müssen die Javascripte eingebunden werden, und Galleria initialisiert werden:

<script type="text/javascript" src="%pathto(css/jquery-1.3.2.min.js)%"></script>
<script type="text/javascript" src="%pathto(css/jquery.galleria.js)%"></script>
<script type="text/javascript">
    jQuery(function($) {
        $('ul.gallery').galleria({
            insert: '#picture'
        });
    })
</script>

...Galleria wurde mit der Option "insert:picture" initialisiert. Der Grund dafür ist, dass Galleria normalerweise das gewählte Original über der Liste einblendet. Da wir das Original allerdings nicht in der Sidebar haben wollen, sondern im Content Bereich, müssen wir ein anderes Ziel angeben.

Damit das funktioniert, müssen wir nun noch ein

<div id="picture"></div>

unter "Seiteninformationen->Seite->Beschreibung" einbauen (nicht nötig falls die Thumbnails bereits hier eingebaut wurden).

Zu guter letzt müssen wir jetzt nur noch die von RapidWeaver generierten Thumbs verschwinden lassen, das passiert ganz einfach mit einem gezielten

.thumbnail-wrap {
    display:none;
}

in galleria.css an. Das hat den Vorteil, dass die Albenthumbs nur ausgeblendet werden, wenn das CSS von Galleria geladen wird - das erlaubt es die Standardalben parallel weiter zu nutzen.

Was jetzt noch fehlt sind jQuery Effekte und CSS Anpassungen, die seien jedem selbst überlassen!

Anmerkung:
Auf dieser Homepage nutze ich inzwischen eine auf MooTools basierende Slideshow: http://www.electricprism.com/aeron/slideshow/ - das Konzept ist allerdings das Selbe.