Galleriffic - Unobtrusive JS Gallerie

howto:web:galleriffic

Webseiten sollen auch Bilder darstellen. Will man eine ganze Bilderreihe einfügen empfiehlt sich eine Gallerie. galleriffic finde ich sehr anspruchsvoll in den Einstellungen (Wechselarten, -zeiten, etc) alles was gerade noch blinkeblinke erträglich ist.

Aber galleriffic nutzt, im Gegensatz zu den meisten anderen JS oder natürlich Flash Gallerien, richtiges html. Das hat neben den ganzen Vorteilen beim lesen für (Such)-Maschinen, Blinden oder User mit eingeschränktem JS den Vorteil, dass man sein Gallerie mit dem meist benutzen CMS erstellen kann und nicht die Gallerie in einem Stück code verstecken muss.

Galleriffic stellt verlinkte Bilder entlang einer ganz normalen html Liste (<li>) dar. Leider muss man sich an die 'classen' Vorgaben von Galleriffic halten. Die ul braucht die class thumbs und der link auf das Hauptbild die class thumb.

Anpassung

Neben den settings von galleriffic

falls man gar keine thumbs will $('div.page ol li a').css({ "display": "none" });

Das css muss man auch gar nicht nutzen sondern kann die html wie gewohnt integrieren, nur ein

#controls div, #thumbs li { display: inline; } /* für flache thumblisten */

a.advance-link { text-decoration: none; } /* verhindert eine unterstreichnung des links hinter dem bild, die man aber nur als kleine strichlein sieht */

cascading

Aber/Leider kann man mit vereinfachten Auszeichnungssprachen (Wikisytntax, Markdown) diese classen nicht setzen. Aber warum auch, das vergrößert nur die Schreibarbeit. Und jQuery, wie css, ist genau cascadierend um die ul und vor allem den link (a) nativ anzusprechen.

Ich habe dazu galleriffic ein wenig umgeschrieben, so dass man nun auch die Variablen listContainerSel und listThumbSel selbst setzen kann, oder diese eben nativ anspreche, wie in der DefaultEinstellung ( listContainerSel: 'h1 + div ol', and listThumbSel: 'a')

Beispiel aus einem Dokuwiki

<h1>some how</h1>

<ol>

<li class="level1"><div class="li"> <a href="http://example.com/pix1.jpg" class="media" title="some" ><img src="http://example.com/thumb1.jpg" class="media" title="what.jpg" /></a></div></li>

Mein script http://bit.umija.org/jquery/jquery.galleriffic.cascading.js und mein Vorschlag

 

Einbau

In eine reine html Seite ganz selbst geschriebene views kann man galleriffic logisch einbauen. Aber auch in den meisten meisten CMS kann man galleriffic ohne große Plugins einbauen.

Dokuwiki

den Steuercode in die /lib/tpl/theme/main.php

listContainerSel: 'h1 + div ol',

listThumbSel: 'a'

Die links auf die Hauptbilder /lib/exe/fetch.php?w=630&media=, das kann man mir einem interwiki (hier im Beispiel 'gal') auch verkürzen. Die Bilder stellt man dann in einer nummerierten Liste dar.

- [[gal>bild1.jpg|{{bild1.jpg?80x53}}]]

- [[gal>bild2.jpg|{{bild2.jpg?80x53}}]]

 





Mediawiki


Google Search