BASE Classic: Bildergalerie

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. 

002.001.128.000 16.08.2016

Bei der mehrspaltigen Bildergalerie führt schnelles Klicken auf die Vor- bzw. Zurückpfeile nicht mehr zum Überscrollen.

002.001.115.000 20.07.2016

Über .listPictureGallery_var2 .listEntriesPreview .listEntry {...w-showlightboxtitle:no;... lässt sich verhindern, dass der Bildtitel in der Lightbox angezeigt wird.

002.001.070.000 23.05.2016

Ist beim Einsatz von Smart-Listen keine Hauptverzeichnis für Bildergalerien definiert, wird das Verzeichnis /IHRASSETSVERZEICHNIS/img/galleries genutzt.

002.000.992.000 18.01.2016

Bei der Vollbilddarstellung, wie z.B. in Variante 31 kann nun der Modus und selbst das aufzurufende Skript optional angegeben werden. Zum Beispiel: -w-add-events:onclick=expandGalleryToFullSize;-w-add-data:modefullsize=embedTop,maxwidthfullsize=1024,scriptfullsize=/myGalleryFullSize.php;

002.000.878.000 04.08.2015

Über .listPictureGallery_varXY .listEntries .listEntry {-w-pause-onmouseover:yes;} lässt sich festlegen, dass der Bildwechsel beim Mouseover pausiert wird.

002.000.652.000 17.10.2014

Neue CSS-Only Variante "Vorschaubilder ohne Vergrößerungsfunktion" verfügbar.

002.000.632.000 08.09.2014

Über -w-animation-direction:ltr lässt sich die Richtung durchlaufender Galerien umkehren.

002.000.625.000 27.08.2014

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

Neben Bildern können auch beliebige Dokument bzw. deren Vorschaubilder über Bildergalerien dargestellt werden.

002.000.565.000 17.04.2014

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

Die Auflistung von Galerien lässt sich durchblättern.

002.000.474.000 14.01.2014

Ü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

Die Dateigröße lässt sich für Bilddownloads anzeigen.

002.000.436.000 22.11.2013

Neue CSS-Only-Varianten mit horizontal durchlaufender Animation werden unterstützt.

002.000.287.000 15.05.2013

Neue CSS-Only Variante verfügbar, um Bilder über einen Zoom-Effekt zu animieren.

002.000.278.000 13.05.2013

Neue CSS-Only Varianten verfügbar, um Bildergalerien im Vollbildmodus darzustellen.

002.000.214.000 20.03.2013

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

HD-Bilder werden unterstützt.

002.000.157.000 13.02.2013

Neue Darstellungsvariante Karussell ergänzt.

002.000.127.000 03.01.2013

Über -w-animation:collage lassen sich CSS3-Collagen umsetzen.

002.000.106.000 02.12.2012

CSS-Layout-Varianten werden unterstützt.

001.000.196.000 02.10.2012

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

Das Seitenverhältnis 2:1 wurde der Auswahl hinzugefügt.

001.000.177.000 13.07.2012

Das Seitenverhältnis muss nicht mehr unbedingt ausgewählt werden.

001.000.169.000 03.07.2012

Die Breiten und Umbrüche wurden für Responsive Webdesign angepasst.

001.000.159.000 07.05.2012

Beim Einsatz des aktuellen Listen-Weblics lassen sich Bildergalerien ausrichten und in der Breite anpassen.

001.000.158.000 03.05.2012

Bei der Darstellung als Fancybox kann die maximale Größe der Detailbilder festgelegt werden.

001.000.147.000 22.03.2012

Die Fancybox-Galerie berücksichtigt auch Umbrüche im Titel.

001.000.142.000 16.03.2012

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

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

Der Listenfilter nach Dateien, die Bildergalerien enthalten, berücksichtigt auch verschachtelte Bildergalerien.

001.000.126.000 01.03.2012

Die Geschwindigkeit des Überblendeffektes und die Anzahl der sichtbaren Vorschaubilder der Slide-Galerie lassen sich einstellen.

001.000.118.000 10.02.2012

Pro Galerie kann ein Seitenverhältnis der anzuzeigenden Vorschaubilder angegeben werden.

001.000.113.000 06.02.2012

Der Überblendeffekt beim automatischen Bildwechsel wurde optimiert.

001.000.097.000 20.01.2012

Bildergalerien lassen sich anteasern.

001.000.088.000 20.12.2011

Falls sprachabhängige Titel in Bildern hinterlegt sind, werden diese abhängig von der Projektsprache angezeigt.

001.000.074.000 04.11.2011

Beim Klick auf ein Bild wird der automatische Bildwechsel initialisiert, um ein Überschneiden der Ereignisse zu verhindern.

001.000.071.000 25.10.2011

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

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

Automatische Bildwechselfunktionen sind standardmäßig mit einem Timeout von 128 versehen.

001.000.067.000 18.10.2011

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

Das Weblic enthält ein Strukturelement, um mehrere Galerien als Album darzustellen.

001.000.038.000 29.07.2011

Neues Zeilen-Template, um mehrere Bildergalerien über einer Liste als Album mit Vorschaubildern anzuzeigen.

001.000.028.000 05.07.2011

Beim Einfügen einer Bildergalerie wird automatisch ein Bildverzeichnis angelegt.

001.000.023.000 09.06.2011

Bei der Fancybox-Darstellung kann das Vergrößerungssymbol angezeigt werden.

001.000.018.000 26.05.2011

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

Bei der blätterbaren Einzelbilddarstellung kann die Breite definiert werden.

001.000.015.000 03.05.2011

Umbruch ergänzt, um Darstellung bei unterschiedlich langen Beschreibungstexten zu optimieren.

001.000.007.000 16.03.2011

Darstellungsart Diashow verfügbar.

001.000.004.000 15.03.2011

Neue Darstellungsart verfügbar.

001.000.003.000 15.03.2011

Bildrahmen können ein-/ausgeblendet werden.

001.000.001.000 14.03.2011

Die Anzahl der anzuzeigenden Bilder pro Zeile kann ausgewählt werden.