Bildergalerie

Mit der Bildergalerie kann der Redakteur mehrere Bilder effektvoll in einer Seite darstellen. Für den Administrator steht eine umfangreiche Sammlung an Darstellungsvarianten zum Download bereit, so dass dieser dem Redakteur die gewünschte Auswahl zur Verfügung stellen kann. Diese Varianten unterscheiden sich bezüglich der Darstellung der Bilder und Vorschaubilder. Automatischer Bildwechsel, konfigurierbare Überblendeffekte und automatische Skalierung sind abhängig von der Layout-Variante anpassbar. Die Navigation kann über Vorschaubilder, Navigationselemente oder Nummerierungen geschehen. Pro Seite lassen sich beliebig viele Bildergalerien einbauen. Die zu verwendenden Bilder können einzeln ausgewählt oder direkt über Verzeichnisse eingelesen werden. Über eine zusätzliche Albumfunktion lassen sich Seiten, welche Bildergalerien enthalten auflisten und auswählen. Neu angelegte Galerien erscheinen so automatisch im entsprechenden Album.

Beispiele / CSS-Only-Varianten

Vorschau- und Detailbilder

Bei der Darstellung wird zwischen Vorschaubilder und Datailbilder unterschieden. Über CSS lässt sich definieren, ob und wie diese jeweils anzuzeigen sind. Meist handelt es sich um eine Kombination der beiden Bildarten, so dass beim Anklicken eines Vorschaubildes das Detailbild ausgewählt wird. Die Fancybox Galerie z.B. zeigt das Detailbild erst beim Klick auf das Vorschaubild an. Andere Galerien wechseln die Detailbilder über Blätternavigationen, ohne Vorschaubilder. Jede Kombination von Detail- und Vorschaubildern ist also möglich.

Bildgrößen

Die Vorschaubilder werden Serverseitig über die Weblication CMS Framework-Funktion zur Erstellung von Thumbnails skaliert. Durch den internen Cache-Mechanismus müssen diese nicht bei jedem neuen Aufruf generiert werden, wodurch die Performance erhöht wird. Mit Hilfe des Weblication CSS-Rendering, werden die Bilder physikalisch auf die im CSS definierte Größe angepasst. Bei relativen Angaben errechnet die Bildergalerie die Größe der Bilder, ob Vorschaubild oder Detailbild anhand der umgebenen Container und der notwendigen Abständen, die im CSS definiert wurden.

Seitenverhältnis

Das Seitenverhältnis kann optional definiert werden. In diesem Fall werden die Bilder auf das gewünschte Seitenverhältnis zugeschnitten. Diese Option ist dann nützlich, wenn nicht alle Bilder die gleichen Seitenverhältnisse haben, sie in der Galerie aber einheitlich dargestellt werden sollen, ohne dass die Darstellung abhängig vom Seitenverhältnis springt.

Responsive Webdesign

Alle im Weblic Bildergalerie ausgelieferten Varianten sind für Responsive Webdesign optimiert. Sowohl die großen Detailbilder als auch die Vorschaubilder werden für die verfügbare Breite optimiert dargestellt. Während die Detailbilder meist skalieren sollen, werden Vorschaubilder oft umbrochen oder verschoben, da diese nicht immer noch kleiner skaliert werden sollen. Ändern Sie doch einfach mal die Breite Ihres Browsers und beobachten, wie sich die Galerien der Größe des Browser-Fensters anpassen.

Bildwechsel

Der Bildwechsel kann ja nach Konfiguration der Bildergalerie entweder manuell oder automatisch erfolgen. Beim Automatischen Wechsel der Bilder kann die Zeit in Sekunden eingestellt werden. Der Intervall für den Automatischen Wechsel beginnt neu, sobald der Benutzer das Bild manuell Wechselt. Je nach Gestaltung der Galerie kann der Wechsel durch Anklicken der Detailbilder, der Vorschaubilder, einer Blätternavigation oder Vor- und Zurückschaltflächen geschehen.

Überblendeffekte

Bei Wechsel der Bilder kann auf verschiedene Effekte zum Überblenden zurückgegriffen werden. Dies können z.B. weiche Übergänge in Form von Fadern sein. Daneben gibt es auch unterschiedliche Bewegungseffekte. Neben der Art des Überblendens, kann auch dessen Dauer eingestellt werden. Je nach Vorlieben lasse sich die Bildergalerien bzw. die Bildstrecken so angenehmer betrachten und die Bildwechsel besser wahrnehmen. Die Effekte können entweder pro Element vom Redakteur oder zentral im CSS definiert werden, wodurch ein einheitlicheres Bild gewahrt wird. 

Animationen

Zusätzlich zu den Überblendeffekten gibt es auch die Möglichkeit Bilder animieren zu lassen. Ist ein Bild größer als der Anzeigebereich, kann es z.B. darin bewegt werden. Durch diesen Effekt lassen sich emotional ansprechende Galerien anbieten. 

Bildergalerien einbinden

Die Weblication Bidergalerie basiert auf den Standard-Listenfunktionen, so dass Sie beliebige Bilder über die integrierte Dateiauswahl nutzen können. Meist wird bei Galerien auf ganze Verzeichnisse zugegriffen, wodurch die Auswahl mit Hilfe der Suggest-Funktion oft in Sekunden erfolgen kann. Für die Galerien können Bilder einzeln oder kombiniert mit Verzeichnissen sowie rekursiven Verzeichnisbäumen ausgewählt werden. So lassen sich neben sehr umfangreichen Bildergalerien, die auf mehrere Seiten verteilt dargestellt werden auch kleine Bildstrecken mit wenigen Bildern einfach und schnell in eine Seite einbinden. Pro Seite können beliebig viele Galerien an beliebiger Stelle mit dem gewohnten Weblication Drag & Drop Editor eingebunden werden. Die verwendeten Layoutvarianten können pro Galerie ausgewählt werden und lassen sich pro Seite beliebig kombinieren. So kann z.B. im mittleren Hauptbereich eine andere Variante als im schmalen Seitenbereich gewählt werden. 

 

Versionshistorie

002.000.652.000 17.10.2014 15:59
Neue CSS-Only Variante "Vorschaubilder ohne Vergrößerungsfunktion" verfügbar.
002.000.632.000 08.09.2014 17:16
Über -w-animation-direction:ltr lässt sich die Richtung durchlaufender Galerien umkehren.
002.000.625.000 27.08.2014 12:38
Sowohl die Großbilder als auch die Vorschaubilder können über -w-add-objectdata durch beliebige Objektdaten ergänzt werden.
002.000.619.000 26.08.2014 23:56
Neben Bildern können auch beliebige Dokument bzw. deren Vorschaubilder über Bildergalerien dargestellt werden.
002.000.565.000 17.04.2014 10:19
Neue CSS-Only-Variante 34 verfügbar, um Bilder horizontal zu scrollen und zusätzlich als Vollbild darzustellen.
002.000.538.000 24.03.2014 17:09
Die Auflistung von Galerien lässt sich durchblättern.
002.000.474.000 14.01.2014 21:13
Über die zusätzliche Klasse listEntriesPreviewPerRowX kann die Darstellung von Vorschaubildern abhängig von der pro Zeile anzuzeigenden Anzahl formatiert werden.
002.000.448.000 28.11.2013 20:51
Die Dateigröße lässt sich für Bilddownloads anzeigen.
002.000.436.000 22.11.2013 18:36
Neue CSS-Only-Varianten mit horizontal durchlaufender Animation werden unterstützt.
002.000.287.000 15.05.2013 21:26
Neue CSS-Only Variante verfügbar, um Bilder über einen Zoom-Effekt zu animieren.
002.000.278.000 13.05.2013 08:36
Neue CSS-Only Varianten verfügbar, um Bildergalerien im Vollbildmodus darzustellen.
002.000.214.000 20.03.2013 16:34
Die Fancybox-Galerie wurde um die CSS-Definition für A-Tags erweitert, um die Linkdarstellung im Safari ohne Unterstriche zu ermöglichen.
002.000.199.000 11.03.2013 23:07
HD-Bilder werden unterstützt.
002.000.157.000 13.02.2013 22:30
Neue Darstellungsvariante Karussell ergänzt.
002.000.127.000 03.01.2013 23:53
Über -w-animation:collage lassen sich CSS3-Collagen umsetzen.
002.000.106.000 02.12.2012 20:15
CSS-Layout-Varianten werden unterstützt.
001.000.196.000 02.10.2012 16:40
Bei der Bildergalerie mit Diavorschau wird die Bildbreite der Vorschaubilder gerundet, um einen weißen Strich am rechten Bildrand zu verhindern.
001.000.194.000 20.09.2012 14:51
Das Seitenverhältnis 2:1 wurde der Auswahl hinzugefügt.
001.000.177.000 13.07.2012 17:01
Das Seitenverhältnis muss nicht mehr unbedingt ausgewählt werden.
001.000.169.000 03.07.2012 17:11
Die Breiten und Umbrüche wurden für Responsive Webdesign angepasst.
001.000.159.000 07.05.2012 11:48
Beim Einsatz des aktuellen Listen-Weblics lassen sich Bildergalerien ausrichten und in der Breite anpassen.
001.000.158.000 03.05.2012 09:08
Bei der Darstellung als Fancybox kann die maximale Größe der Detailbilder festgelegt werden.
001.000.147.000 22.03.2012 16:13
Die Fancybox-Galerie berücksichtigt auch Umbrüche im Titel.
001.000.142.000 16.03.2012 12:23
Bei der Fader-Galerie kann eine eingestellt werden, ob sich die Bildbreite bei festgelegter Höhe im Verhältnis anpassen soll.
001.000.136.000 15.03.2012 21:38
Bei der Fader-Galerie kann eine individuelle Höhe eingestellt werden. Außerdem lassen sich drei unterschiedliche Bildmodi auswählen.
001.000.134.000 09.03.2012 14:28
Der Listenfilter nach Dateien, die Bildergalerien enthalten, berücksichtigt auch verschachtelte Bildergalerien.
001.000.126.000 01.03.2012 08:10
Die Geschwindigkeit des Überblendeffektes und die Anzahl der sichtbaren Vorschaubilder der Slide-Galerie lassen sich einstellen.
001.000.118.000 10.02.2012 15:42
Pro Galerie kann ein Seitenverhältnis der anzuzeigenden Vorschaubilder angegeben werden.
001.000.113.000 06.02.2012 07:43
Der Überblendeffekt beim automatischen Bildwechsel wurde optimiert.
001.000.097.000 20.01.2012 20:25
Bildergalerien lassen sich anteasern.
001.000.088.000 20.12.2011 09:30
Falls sprachabhängige Titel in Bildern hinterlegt sind, werden diese abhängig von der Projektsprache angezeigt.
001.000.074.000 04.11.2011 13:39
Beim Klick auf ein Bild wird der automatische Bildwechsel initialisiert, um ein Überschneiden der Ereignisse zu verhindern.
001.000.071.000 25.10.2011 17:07
Bei der Bildergalerie Fancybox kann angegeben werden, wie viele Vorschaubilder angezeigt werden sollen, während man alle durchklicken kann.
001.000.070.000 25.10.2011 14:52
Bilder werden bereits im Template auf Basis der Qualitätseinstellungen des Projektes generiert, so dass beim Betrachten der Galerie deutlich weniger Serverlast verursacht wird.
001.000.069.000 24.10.2011 14:42
Automatische Bildwechselfunktionen sind standardmäßig mit einem Timeout von 128 versehen.
001.000.067.000 18.10.2011 14:06
Falls über die Darstellung Fader ein zufälliges Einzelbild angezeigt werden soll, erscheint keine Klickmöglichkeit zum Wechseln.
001.000.064.000 12.10.2011 16:27
Das Weblic enthält ein Strukturelement, um mehrere Galerien als Album darzustellen.
001.000.038.000 29.07.2011 16:20
Neues Zeilen-Template, um mehrere Bildergalerien über einer Liste als Album mit Vorschaubildern anzuzeigen.
001.000.028.000 05.07.2011 16:11
Beim Einfügen einer Bildergalerie wird automatisch ein Bildverzeichnis angelegt.
001.000.023.000 09.06.2011 07:33
Bei der Fancybox-Darstellung kann das Vergrößerungssymbol angezeigt werden.
001.000.018.000 26.05.2011 20:28
Das Weblic basiert nun auf dem Standard-Listenelement, so dass auch Einzelbilder und Filter ausgewählt werden können.
001.000.017.000 05.05.2011 15:34
Bei der blätterbaren Einzelbilddarstellung kann die Breite definiert werden.
001.000.015.000 03.05.2011 10:31
Umbruch ergänzt, um Darstellung bei unterschiedlich langen Beschreibungstexten zu optimieren.
001.000.007.000 16.03.2011 13:27
Darstellungsart Diashow verfügbar.
001.000.004.000 15.03.2011 16:40
Neue Darstellungsart verfügbar.
001.000.003.000 15.03.2011 11:59
Bildrahmen können ein-/ausgeblendet werden.
001.000.001.000 14.03.2011 10:15
Die Anzahl der anzuzeigenden Bilder pro Zeile kann ausgewählt werden.