Nutzbar ab: Version Veröffentlichungsdatum: 25. Februar 2016 Änderungsdatum: 05. Mai 2023 css css-only weblics bildergalerie galerie CSS-Only Varianten von Weblics® können Sie über CSS individuell anpassen Mit den Weblics® stehen Ihnen
Bereich mit einer weißen Farbe aufgefüllt. Diese Hintergrundfarbe können Sie individuell festlegen. Am Beispiel der Bildergalerie "Standard" (Variante 0, Großansicht mit Diavorschau) demonstrieren wir Ihnen, wie Sie diese Galerievariante anpassen
skaliert werden, ist es zudem möglich, stattdessen auch die Originalbilder aufzulisten. In der CSS Variante der Bildergalerie definierte Originlgrößen //Zeit das Bild in Originalgröße -w-option-picture-sizeMode: original; //Zeigt das Bild
Nutzbar ab: Version Veröffentlichungsdatum: 27. Oktober 2015 Änderungsdatum: 04. November 2021 weblication liste bildergalerie jquery plugin isotope mauerwerk kategorienfilter kategorien-filter Unterschiedliche Möglichkeiten, um Bildergalerien
ohne Größenanpassung in einer Bildergalerie anzeigen Veröffentlichungsdatum: 10. Januar 2018 Änderungsdatum: 08. August 2023 Projektgrundlage: BASE Über die
nicht automatisch zum Artikel Bildergalerien manuell sortieren
beim Einsatz von Blätterlisten Veröffentlichungsdatum: 21. Oktober 2015 Änderungsdatum: 19. Januar 2022 liste bildergalerie pagination blätterliste cache Listen mit Pagination (Seitennummerierung) sollten ab einer gewissen Anzahl mit Bedacht
können Sie auf Platzhalter zurückgreifen. Auf diese Weise können Sie eine Weblication® CMS Liste (z.B. Bildergalerie) gleich mit den entsprechenden Pfaden zum Bildverzeichnis setzen. Beispiel: Dateivorlage für eine neue Bildergalerie
Beschreibung Einsatzgebiet FÜR BANNER: [slideHorizontal|slideFromRight| fadeIn|overlapFromRight|overlapFromTop] FÜR BILDERGALERIE: [collage|carouselhorizontal|ticker| scrollhorizontal|slideFromRight| slidevertical|overlapFromRight|
Laufrichtung durchlaufender Galerien gallery.wFilelist.php Beispiele / Anwendungsfälle Beispiel 1: Definiert für die Bildergalerie-Variante 43 die Laufrichtung von links nach rechts (ltr) .listPictureGallery_var43 .listEntriesPreview .listEntry { /*
beim Einsatz von JPEG-Bildern einfach über CSS-Only aktivieren. Unterstützt werden neben Bildelementen auch Bildergalerien und Bannerbilder. WebP-Bilder ermöglichen in der Regel eine erheblich reduzierte Dateigröße ohne Qualitätsverluste.
Ausdrücken ersetzen/löschen Beispiel 8: Mit regulären Ausdrücken mehrere wd:object Tags ausfindig machen Beispiel 9: Bildergalerie 1.x auf Weblic-Version 2.x anpassen Beispiel 10: Fehlerhafte Dokumentenerweiterung anpassen Beispiel 11: Jahreszahlen
einstellbar, ob eine Passwortqualität (als Balken visualisiert) angezeigt werden soll 15 Januar BASE für Version 18: Bildergalerie 1.0.142: Optimierung zur Barrierefreiheit: Die Blätter-Schaltflächen können nun über die Tabulator-Taste erreicht
Veröffentlichungsdatum: 13. Juli 2023 Änderungsdatum: 08. August 2023 Projektgrundlage: BASE Wurde für eine Bildergalerie die Lightbox, über zum Beispiel -w-option-picture-lightbox:1; aktiviert, so gilt für deren Bilder in der Regel* die
Lightbox angezeigt. Dies lässt sich über die CSS-Only Eigenschaft -w-showTitle:no; im Bildelement bzw. auch zu einer Bildergalerie-Variante verhindern. Sie können den Wert entweder fest eintragen oder die entsprechende Option als Untervariante zur
um den Link zur ausgelesenen Datei gallery.wFilelist.php Beispiele / Anwendungsfälle Beispiel 1: Ergänzt in der Bildergalerie-Variante 53 den Download-Link zur ausgelesenen Datei .listPictureGallery_var53 .listEntriesPreview .listEntry { /* ...
die Dateigröße der ausgelesenen Datei gallery.wFilelist.php Beispiele / Anwendungsfälle Beispiel 1: Ergänzt in der Bildergalerie-Variante 53 die Dateigröße zur ausgelesenen Datei .listPictureGallery_var53 .listEntriesPreview .listEntry { /* ...
soll gallery.wFilelist.php Beispiele / Anwendungsfälle Beispiel 1: Definiert, daß die Beschreibung zu einem Bild der Bildergalerie-Variante 2 hinzugefügt wird .listPictureGallery_var2 .listEntriesPreview .listEntry { /* ... */ ; -w-adddescription:
genutzt werden soll gallery.wFilelist.php Beispiele / Anwendungsfälle Beispiel 1: Aktiviert zur Bildergalerie-Variante 2 die Nutzung der Fancybox .listPictureGallery_var2 .listEntriesPreview .listEntry { /* ... */ ;
Bildtitel in der Lightbox angezeigt wird gallery.wFilelist.php Beispiele / Anwendungsfälle Beispiel 1: Deaktiviert zur Bildergalerie-Variante 2 die Ausgabe des Bildtitels in der Lightbox .listPictureGallery_var2 .listEntriesPreview .listEntry { /* ...
angezeigt werden soll gallery.wFilelist.php Beispiele / Anwendungsfälle Beispiel 1: Definiert zur Bildergalerie-Variante 2, daß die Vorschaubilder mit einer Schaltfläche für die Bearbeitung versehen werden
Beispiele / Anwendungsfälle Beispiel 1: Setzt die Hintergrundfarbe für das zu generierende Vorschaubild in Bildergalerie-Variante 999 .listPictureGallery_var999 .listEntries .listEntryImage { /* ... */ ; -w-picture-background-color:
einen Listeneintrag im Vorschaubereich gallery.wFilelist.php Beispiele / Anwendungsfälle Beispiel 1: Deaktiviert zur Bildergalerie-Variante 41 das onclick-Ereignis für einen Listeneintrag im Vorschaubereich .listPictureGallery_var41
Listeneintrages gallery.wFilelist.php Beispiele / Anwendungsfälle Beispiel 1: Setzt das aktuell ausgewählte Bild der Bildergalerie-Variante Karussell (var11) mittig .listPictureGallery_var11 .listEntries { /* ... */ ; -w-entryselected: middle} Zu
Beispiele / Anwendungsfälle Beispiel 1: Aktiviert die Auswahlbox zur Auswahl 'Darstellungsart der Vorschaubilder' zur Bildergalerie-Variante 0 .listPictureGallery_var0 { /* ... */ ; -w-editmaskExtended-picturepreviewmode: yes; /* ... */ }
/ Anwendungsfälle Beispiel 1: Aktiviert die Auswahlbox zur Auswahl 'Seitenverhältnis der Vorschaubilder' zur Bildergalerie-Variante 2 .listPictureGallery_var2 { /* ... */ ; -w-editmaskExtended-picturepreviewaspectratio: yes; /* ... */ }
Beispiele / Anwendungsfälle Beispiel 1: Aktiviert die Auswahlbox zur Auswahl 'Darstellungsart der Großbilder' zur Bildergalerie-Variante 0 .listPictureGallery_var0 { /* ... */ ; -w-editmaskExtended-picturemode: yes; /* ... */ } Listenoptionen
/ Anwendungsfälle Beispiel 1: Deaktiviert die Auswahlbox zur Auswahl 'HD Versionen der Bilder generieren' zur Bildergalerie-Variante 32 .listPictureGallery_var32 { /* ... */ ; -w-editmaskExtended-picturecreatehd: no; /* ... */ } Listenoptionen
Beispiele / Anwendungsfälle Beispiel 1: Aktiviert die Auswahlbox zur Auswahl 'Seitenverhältnis' zur Bildergalerie-Variante 0 .listPictureGallery_var0 { /* ... */ ; -w-editmaskExtended-pictureaspectratio: yes; /* ... */ }
Beispiele / Anwendungsfälle Beispiel 1: Aktiviert die Auswahlbox zur Auswahl 'blätterbare Seiten' zur Bildergalerie-Variante 2 .listPictureGallery_var2 { /* ... */ ; -w-editmaskExtended-limitpages: yes; /* ... */ } Listenoptionen
Beispiele / Anwendungsfälle Beispiel 1: Aktiviert die Auswahlbox zur Auswahl 'Bilder pro Zeile' zur Bildergalerie-Variante 2 .listPictureGallery_var2 { /* ... */ ; -w-editmaskExtended-entriespreviewperrow: yes; /* ... */ }
gallery.wFilelist.php Beispiele / Anwendungsfälle Beispiel 1: Aktiviert die Auswahlbox zur Auswahl 'Zoomfaktor' zur Bildergalerie-Variante 23 .listPictureGallery_var23 { /* ... */ ; -w-editmaskExtended-animationzoom: yes; /* ... */ } Listenoptionen
werden soll gallery.wFilelist.php Beispiele / Anwendungsfälle Beispiel 1: Definiert, daß die Vorschaubilder der Bildergalerie-Variante 32 in HD-Qualität generiert werden sollen .listPictureGallery_var32 .listEntriesPreview .listEntryImage {
mit Punkt getrennt (z.B. 1.8) gallery.wFilelist.php Beispiele / Anwendungsfälle Beispiel 1: Definiert für die Bildergalerie-Variante 23 den Zoomfaktor des Bildes in Großansicht .listPictureGallery_var23 .listEntries .listEntry { /* ... */ ;
der Anpassung: Banner-Variante 40 (Bild, mehrspaltiger Teasesr unten) per Klick Beispiel: Auszug aus der design.css zur Bildergalerie-Variante 0 (Großansicht mit Diavorschau horizontal) /* ... */ .listBannerSlider_var40 .listEntriesPreview .listEntry {
vorheriges Beispiel). Copyright-Angabe in Listen Auch in Listen können Sie zu Vorschaubildern oder zu Bildern einer Bildergalerie einen Copyright-Text setzen. Dies definieren Sie über die entsprechende CSS-Only-Variante, wozu nachfolgend Beispiele
3. Über das Bild-Element und Projekt-Funktionen Projekt-Basis BASE Classic Projekt-Basis BASE (Mobile First) 4. Über Bildergalerien Projekt-Basis BASE Classic Projekt-Basis BASE (Mobile First) 5. Über Listen Projekt-Basis BASE (Mobile First) Hinweise
BASE Die Darstellung der Lightbox beim Öffnen von Detailbildern lässt sich individuell beeinflussen. Am Beispiel der Bildergalerie-Variante 2 (Kachelansicht) zeigen wir Ihnen auf, wie Sie die Darstellung der Lightbox bei Klick auf ein Vorschaubild
Endung) eines Bildes (Umsetzung ohne data-Attribut) /* ... */ /* Anzeige des Dateinamens ohne Endung (z.B. CIMG0815.JPG) - (Bildergalerie Variante 0) */ .listPictureGallery_var0 .listEntries .listEntryTitle { display: block; -w-jquery: var urlPath = jQuery
diverser Weblics® mit eine Standardvariante ausgeliefert, welche in der Regel mit der Variantennummer 0 bezeichnet ist. Bildergalerie CSS-Only-Variante als Standard Wollen Sie bei einem Weblic® , wie z.B. der Bildergalerie, beim Einfügen eines
Anwendungen zur Verfügung, die Sie bei Bedarf individuell anpassen können. Aktuell finden Sie zu Weblics® wie u.a. Bildergalerie Bild Inhaltsbox Inhaltsbereich Akkordeon-Container Inhaltscontainer mit Registerlaschen Liste Mehrspaltiger
wir, alle anderen Weblics® auch auf aktuellsten Stand 2.x zu bringen. Dies gilt vor allem für die Weblics® " Bild ", " Bildergalerie ", " Teaser, Banner, Slider ", " Liste " und " Formular ". Beachten Sie dabei, dass ggf. die Bildergalerie- bzw.
onclick-Event dem Element mit der Klasse listPictureGallery_var31 hinzugefügt, so dass sich die Vollbildansicht der Bildergalerie öffnet, sobald man diese anklickt. zu Beispiel 1: Über das Ereignis aufgerufene Funktion function
möglich jedem Bild eine eindeutige Bildbreiten-Id zuzuweisen. Abhängig von den ausgewählten CSS-Klassen wird in den Bildergalerien in der Regel für alle Bilder eine Bildbreiten-Id ermittelt. Grid-Layouts sind zum Beispiel Listen, bei der
/* ... */ } Weiterführende Links Einsatz von Isotope und Masonry für Bildergalerien Zu beachten: Diese CSS-Only Referenz bezieht sich vorwiegend auf BASE Classic Projekte und Weblics® ! BASE (Mobile
0 .listBannerSlider_var0 { /* ... */ ; -w-editmaskExtended-initdelay: yes; /* ... */ } Listenoptionen Bildergalerie - Animation verzögert starten Zu beachten: Diese CSS-Only Referenz bezieht sich vorwiegend auf BASE Classic Projekte und
99 .listBannerSlider_var99 { /* ... */ ; -w-editmaskExtended-fadetime: yes; /* ... */ } Listenoptionen Bildergalerie - Automatisch wechseln (nach x Sekunden) Zu beachten: Diese CSS-Only Referenz bezieht sich vorwiegend auf BASE Classic
Strukturelemente können aber auch komplexe Funktionen beinhalten (beispielsweise eine Liste oder das Weblic Bildergalerie). Weitere Informationen zu Strukturelementen finden Sie hier: Der Struktureditor und XSL-Stylesheets für
wie Inhaltscontainer mit jQuery-Tab Funktion, konfigurierbare Leerzeilen etc. Komplexere Anwendungen wie eine Bildergalerie etc. Eine vollständige Auflistung aller Weblics finden Sie unter www.weblics.de oder über die Weblics-Verwaltung in
Weblics® 2.x gibt, die diese individuellen Elemente künftig überflüssig machen. Beachten Sie , daß ggf. die Bildergalerie- bzw. Teaser-/Banner-Elemente in den Seiten nochmals erneut eingebunden und gegen die bisherigen Elemente ersetzt werden