Vorschaubild - bei Klick Galerie öffnen
von Marco Simbürger
Manchmal möchte man nicht die ganze Galerie anzeigen, sondern diese nur mit einem einzelnen Bild andeuten. Wie man dann die Galerie mit einem Klick auf das Bild öffnet, erkläre ich im folgenden Beispiel.
Zuerst muss das j_colorbox-Template im Seitenlayout eingebunden werden: Themes > Seitenlayouts > dein Layout > jQuery-Templates > j_colorbox auswählen. Speichern.
Als nächstes auf der gewünschten Seite zwei Inhaltselemente erstellen. Ein Bild (oder Text mit Bild) und eine Galerie. Dem Bild gebe ich die Klasse "start-gallery", der Galerie "hidden-gallery". Bei Galerie noch das Häkchen bei "Großansicht/Neues Fenster" setzen.
Der HTML Code sollte dann so aussehen:
<div class="ce_text start-gallery block">
<div class="ce_gallery hidden-gallery block">Anschliessend etwas CSS. Dem Bild geben wir den Cursor "Pointer". Man soll ja merken, dass man darauf klicken kann. Die Galerie sollte unsichtbar sein. Wir verbergen diese darum mit display:none;
.start-gallery { cursor: pointer; }
.hidden-gallery { display: none; }Und zum Schluss noch die jQuery-Fuktion, damit das ganze auch funktioniert. Beim Klick auf das Bild mit der Klasse "start-gallery" suche ich die Galerie mit der Klasse "hidden-gallery" und suche innerhalb dieser Galerie den ersten Link und simuliere einen Klick drauf, damit die Galerie geöffnet wird.
$('.start-gallery').click(function(event) {
$(this).siblings('.hidden-gallery').find('li:first a').click();
});Fertig ist diese kleine, praktische Funktion :-)
Kommentare
Einen Kommentar schreiben