Dynamische Dropdowns mit CSS / Javascript

Auf der Suche nach brauchbaren dropdown Menus in HTML bin ich über eine klasse Schritt-für-Schritt Anleitung gestolpert.
Super: Das Menu basiert auf reinem CSS, funktioniert also auch in Browsern ohne Javascript oder Flash.
Dazu noch ein paar schnuckelige Effekte mit JQuery - perfekt.

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.

Kaffee-Chili

Zutaten:

• 30 ml Öl
• 2 Zwiebeln, gehackt
• 3 Knoblauchzehen, zerdrückt

• 500 g Hackfleisch vom Rind
• 500 g Rindfleisch, fein gewürfeltes Gulaschfleisch
• 1 gr. Dose Tomaten, etwas zerdrückt, mit Flüssigkeit
• 250 ml Bier, dunkles
• 200 ml Kaffee, starken
• 2 kl. Dosen Tomatenmark
• 200 ml Brühe
• 3 EL braunen Zucker mit etwas Chilipulver vermischt
• 1 EL Kakaopulver (Backkakao, ungesüßt)
• ½ TL Oregano
• 1 EL Kreuzkümmel
• Salz und Pfeffer
• 1-3 Chilischote(n), fein gehackt
• 3 Dosen Kidneybohnen, abgegossen
• ½ TL Koriander, gemahlen

Zubereitung:

Öl in einem großen Topf erhitzen, darin Zwiebeln, Knoblauch, Fleischwürfel und Hackfleisch zehn Minuten schön anbräunen. Dann die restlichen Zutaten (bis auf die Bohnen) dazugeben und abschmecken - ruhig erst mit weniger Chilischoten anfangen. Bei kleiner Hitze unter häufigem Rühren etwa eineinhalb Stunden garen. Dann die Bohnen hinzufügen und weitere 30 Minuten köcheln lassen, eventuell etwas weitere Brühe oder Bier hinzufügen.

Dazu nach passen hervorragend Bandnudel oder auch ganz schlicht Brot.

Texmex Salat

Zutaten:

• ein Eisbergsalat
• 500 g Hackfleisch (gemischt oder auch nicht, je nach Geschmack)
• eine Zwiebel
• 3 Tomaten
• 2 Paprika
• eine Dose Mais
• eine Dose Kidneys
• eine Flasche Maggi Texicana Salsa
• 2 Becher Schmand (alternativ: Saure Sahne)
• eine Packung geriebener Käse (zb Gouda)
• eine Packung Tortilla Chips

Zubereitung:
Den Eisbergsalat in mundgerechte Stücke zupfen und in eine grosse Schüssel füllen.
Die Zwiebel in kleine Würfel schneiden und mit etwas Olivenöl zusammen mit dem Hackfleisch in einer Pfanne scharf anbraten.
Die Hackfleisch-Zwiebel Mischung auf den Salat geben.
Die Tomaten in Scheiben schneiden und auf dem Hack verteilen.
Die Paprika in kleine Würfel schneiden und auf den Tomaten verteilen.
Das Ganze mit der Texicana Salsa bedecken.
Die Kidneys und den Mais gut abtropfen lassen und auf der Salsa verteilen.
Das Ganze gleichmässig mit dem Schmand bestreichen und anschliessend den gerieben Käse darüber verteilen.

Den Salat nun im Kühlschrank gut durchziehen lassen - am Besten über Nacht.
Kurz vor dem Servieren (sonst werden sie weich) die Cips ein wenig zerbröseln und auf den Salat geben.

Guten Appetit!