einfache jquery Gallery für typo3

Mit diesem einfachem jquery javascript code, erhält man eine Image-Gallery ohne eine zusätzliche Extension in typo3.

Einfach diesen Code im <head> des Template einfügen. jQuery („query-1.4.2.min.js“) muss im template Verzeichnis abgelegt sein.

<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<style type="text/css">
   ul#gallery_nav { margin-bottom:5px; }
   .csc-textpic-image, ul#gallery_nav li { cursor:pointer; }
   ul#gallery_nav li { margin:0 1em 0.5em 0;float:left; }
   ul#gallery_nav li.act { font-weight:bold; }
   .csc-textpic-imagerow { display:none; }
</style>
<script type="text/javascript">
function add_click(index, Element) {
    if (index < 9) text_index = '0' + (index + 1);
    else text_index = index + 1;
    elem = $('<li>' + text_index + '</li>').click(function() { 
        $(".csc-textpic-imagerow").hide();
        $('#gallery_nav li').removeClass('act');
        $('#gallery_nav li').eq(index).addClass('act');
        $(".csc-textpic-imagerow").eq(index).show();
        $(".csc-textpic-imagerow").eq(index).click(function() {
            max = $("#gallery_nav li").size();
            if (index == max-1 ) jump = 0;
            else jump = index+1;
            $("#gallery_nav li").eq(jump).click();
        });
    });
    elem.appendTo('#gallery_nav');
}

$(document).ready(function() {
    $(".csc-textpic-imagerow").first().before('<ul id="gallery_nav"></ul>');
    $('#gallery_nav li').first().addClass('act');
    $(".csc-textpic-imagerow").each(add_click);
    $("#gallery_nav li").first().click();
});
</script>

Sobald nun als Content Type „Images only“ hinzugefügt wird, werden die Bilder als klickbare Gallery angezeigt mit einem Zahlenindex.

Autor: Yves Serrano, Taywa am 19. Oktober 2010
Letzte Änderung: 19. Oktober 2010
Themen: JavaScript / TYPO3
Stichworte: jQuery / TYPO3

Dieser Script funktioniert nicht. Den Java-Code von der von dir genannten Bibliothek habe ich auch ins Verzeichnis gelegt. Habe verschiedene Wege versucht, diesen Script zum Laufen zu bringen. Aber das geht nicht. Hast du mir einen Vorschlag bzw. Ideen, was ich falsch gemacht haben könnte.

Kommentar by Joshua Schär — 3. August 2011 @ 10:01

Habe es hier eingesetzt. http://www.kiliankessler.ch/ schau mal dort, ist nicht 100% das gleiche aber funktioniert sicher. Wenn Du es auf einer Testseite hast kann ich es mir kurz dort anschauen. Um einen Fehler zu finden musst Du mir schon genauer sagen was nicht geht. Ohne Error Meldung oder Livecode kann ich nicht viel weiterhelfen.

Kommentar by Yves Serrano — 3. August 2011 @ 23:46

Wow!

Seit Tagen suche ich nach einer solch einfachen Lösung, die auch für die beschränktesten Redakteure bedienbar ist. Ganz große Klasse, vielen Dank! Bei mit hat die Installation auf Anhieb geklappt!

Gruß aus ffo,
Matthias

Kommentar by Matthias — 29. August 2011 @ 12:13

Hallo!

Wir haben im Laufe des letzten Jahres an einer Gallery-Extension für TYPO3 gebaut, welche z.B. eine Darstellung mit allen möglichen jQuery Plugins erlaubt. Eine Übersicht der Möglichkeiten dieser Extension findet ihr unter http://www.yag-gallery.de/examples/

Derzeit arbeiten wir an einer Integration in „normale Content Datensätze“, d.h. die Darstellung der Bilder in TYPO3 würde dann automatisch von unserer Gallery übernommen.

Für die Darstellung von Foto-Galerien mit TYPO3 ist die Extension vermutlich einen Versuch wert!

Viele Grüße

Mimi

Kommentar by Mimi — 29. November 2011 @ 18:34

Netzkompetenz