Logo

BASE Classic Weblics®

BASE Classic: 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 ab CMS 10.x

Variante 0: Großansicht mit Diavorschau horizontal

Bildergalerie Variante 0

Variante 1: Großansicht mit Positionsanzeige und Blätterfunktion

Bildergalerie Variante 1

Variante 2: Vorschaubilder mit Fancybox

Bildergalerie Variante 2

Variante 3: Großansicht mit Vor- und Zurückfunktion

Bildergalerie Variante 3

Variante 4: Automatischer Wechsel ohne Blätterfunktion

Bildergalerie Variante 4

Variante 5: Großansicht mit Miniaturvorschau

Bildergalerie Variante 5

Variante 6: Großansicht mit Vor- und Zurückfunktion und Seite/Seiten Anzeige

Bildergalerie Variante 6

Variante 7: Großansicht mit Diavorschau vertikal und Blätterfunktion

Bildergalerie Variante 7

Variante 8: Großansicht mit minimaler Blätterfunktion oben rechts

Bildergalerie Variante 8

Variante 9: Großansicht mit Bewegungseffekt

Bildergalerie Variante 9

Variante 10: Collage

Bildergalerie Variante 10

Variante 11: Karussell

Bildergalerie Variante 11

Variante 12: Vorschaubilder zum horizontal Scrollen

Bildergalerie Variante 12

Variante 13: Großansicht mit Vor- und Zurückfunktion und Titel mit Beschreibung darunter

Bildergalerie Variante 13

Variante 14: Großansicht mit überblendender Vor- und Zurückfunktion

Bildergalerie Variante 14

Variante 15: Großansicht mit Fancybox

Bildergalerie Variante 15

Variante 22: 4 Vorschaubilder mit Fancybox

Bildergalerie Variante 22

Variante 23: Großansicht mit Zoom-Effekt

Bildergalerie Variante 23

Variante 24: Großansicht, abgerundet mit Zoom-Effekt

Bildergalerie Variante 24

Variante 31: Großansicht mit Miniaturvorschau und Vollbilddarstellung

Bildergalerie Variante 31

Variante 32: 4 Vorschaubilder mit Vollbildansicht

Bildergalerie Variante 32

Variante 34: Vorschaubilder zum horizontal Scrollen mit Vollbildansicht

Bildergalerie Variante 34

Variante 41: Horizontal durchlaufend

Bildergalerie Variante 41

Variante 42: Horizontal durchlaufend mit Fancybox

Bildergalerie Variante 42

Variante 43: Horizontal durchlaufend mit Link auf Bild / Seite

Bildergalerie Variante 43

Variante 51: Vorschaubilder ohne Vergrößerungsfunktion

Bildergalerie Variante 51

Variante 52: Vorschaubilder mit Titel und Fancybox

Bildergalerie Variante 52

Variante 53: Vorschaubilder mit Titel, Fancybox und Download

Bildergalerie Variante 53

Variante 223: Vorschaubilder mit Fancybox

Bildergalerie Variante 223

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.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.