skip to content

Aktuell auf WebsiteBaker.at

Responsive Bildergalerien

Bildchen schauen am Handy

Bei der "neuen" ResponsiveFG werden 2 Templates + Scripte mitgeliefert, die mir besonders für responsive Templates geeignet erscheinen.

Die Foldergallery ist ein recht üppiges Modul – das liegt vor allem an den vielen mitgelieferten Gallery-Scripten. Manche davon sind überaus mächtig und darum auch sehr beliebt; etwa "Highslider" oder "Colorbox".

Auf Smartphones machen aber die wenigsten davon gut Figur. Oft ist die Zoom-Ansicht kleiner als der Thumbnail – und das bei ordentlich Ladezeit. Manche davon machen überhaupt aus dem responsiven Design ein normales 980Pixel Design.

Das Standard-Template in der "responsiveFG"

Demo | Smartphone

Es ist mir leider nicht gelungen, dass auch beim Resizen der Seiten umgeschaltet wird. Das ist zwar kein großes Problem; sowas sehen ohnehin nur Tester. Aber trotz dem: Leider bin ich nicht so der große Javascript-Guru. Für Tipps bin ich dankbar.

Download (BETA):
responsiveFG-0.31.zip

Hier werden 2 Scripte verwendet; umgeschaltet wird beim Laden anhand der (virtuellen) Fensterbreite. Am Desktop wird die zurecht sehr viel genutzte Fancybox verwendet, am Smartphone hingegen eine ältere Version von "Photoswipe". 

Älter deswegen, weil neuere Versionen voraussetzen, dass die Bildgröße angegeben wird, was unverhältnismäßig viel Aufwand darstellt. Photoswipe ist deutlich für iPhone optimiert, da funktioniert das Script auch sehr gut. Unter Android muss man Abstriche machen, so kann man etwa nicht in das Bild zoomen (wie bei vielen solchen Scripten). Und manches ältere Gerät kann überfordert sein.

Die Fancybox (ebenfalls eine ältere Version) lässt hingegen auf großen Bildschirmen + Tastatur kaum Wünsche offen. Gut, stabil, unkompliziert.

Habe ich schon erwähnt, dass die responsiveFG zwingend jQuery voraussetzt? Sollte ohnehin klar sein.

Das Template MixedWidth

Demo | Smartphone

Youtube-Videos einbinden: Man lädt ein Bild hoch, mit dem Dateinamen "youtube-[youtube-ID].jpg". Also zb: youtube-8KsVtD01cgw.jpg

Für gemischte Bildbreiten gibt es ebenfalls Fertiglösungen, ich wollte mich aber mal selbst daran versuchen, vor allem auch, weil ich auch Videos einbinden wollte. Natürlich ebenfalls responsive.

Das Script ist recht einfach gehalten und sicher verbesserungswürdig: jeder ist herzlichst eingeladen, seine JS- und OOP-Künste auszuspielen.

Eine 2. Sache habe ich in diesem Gallery-Template umgesetzt: Viele wollen die Kategorien nicht als Ordner dargestellt, sondern als (Text)Liste. Das ist an sich unabhängig von MixedWidth, es liegt nur an der Class captionlist, die im Haupt-CSS definiert ist und somit leicht auf andere Templates übertragen werden kann:
<ul class="categories captionlist">

Eigene Bild-Größen für Handys?

Beim Upload werden Bilder immer auf maximal 1400 x 1900 reduziert. Das reicht für den Desktop allemal und überfordert auch Handys nicht.

Das ist eine immer wieder gestellte Frage, und sie ist nicht so einfach zu beantworten. Für die Dauer des Ladevorganges sind viele Faktoren verantwortlich, nicht nur die reine Dateigröße. Bei halbwegs stabiler Verbindung ist kaum ein Unterschied zu merken, bei „wackeliger“ Verbindung wird auch eine kleinere Version nur zäh geladen.

Und: WO die Grenzen ziehen? Eine Version für Tablets, eine für Handys? Der technische Overhead kann schnell sehr ausufern.

Nicht vergessen darf man, dass Smartphone-Bildschirme enorme Auflösungen haben, und manch einer sehr beleidigt ist, wenn ein Bild trotzdem pixelig ist.

Weitere Templates

Highslider und Colorbox habe ich noch angepasst und dazugegeben; auch wenn diese Scripte am Handy eine Katastrophe sind. Einfach, weil sie sehr gängig sind. Fancybox ist ohnehin "Standard". Andere Scripte können mit wenigen Änderungen von der Foldergallery übernommen werden. Das wird aber meistens wenig Sinn machen – die responsiveFG ist eben für – naja! - ausgelegt und die alten Scripte bringen es da nicht.


Back

Up
K