Neu CSS Galerie

[css-umsetzung]

In den meisten Templates, wird die Produkt Galerie kompl. vernachlässigt, insbesondere mobile Kunden werden hier nicht richtig abgeholt.
Aber auch wenn es darum geht, Produktbilder hochauflösend anzuzeigen, schwächeln die vorhandenen Galerien.

Nun gibt es die CSS Galerie, die gerade Onlineshops, bei denen die bestmögliche Darstellung der Produktbilder erforderlich ist dadurch unterstützt,
dass diese in der Zoom Funktion, die Originalgröße der Hochgeladenen Bilder anzeigt, um Details noch besser sichtbar zu machen.

Die Galerie hat eine komplette Mobile Unterstützung, die Bilder können auch über das Mausrad sowie über die Tastatur gesteuert werden.
Hier könnt Ihr euch die Funktionen der Galerie gerne anschauen:
https://shorturl.at/kibrG

Folgende Funktionen sind bereits enthalten:

• Kompatibel zu allen gängigen Templates (vor Eingestellte Selektoren)
• Thumbnails der Produktbilder auch bei kleineren Auflösungen (mobile) vorhanden
• Wahlweise können für den Zoom, die sonst nicht erreichbaren, originalen, über die WAWI hochgeladenen Bilder mit Ihren Größen angezeigt werden, was speziell bei hochwertigen Bildern mehr Sinn ergibt.
• Die Artikelseite kann optional, über einen Share Button, auf Instagram und Pinterest geteilt werden.
• Die Produktbilder können optional gedreht und seitenverkehrt angezeigt werden.
• Die Produktbilder können dem Kunden optional zum Download angeboten werden.
• Einfache Zoom Funktion über Desktop und Handy.
• Gepflegte Alt Texte werden unter dem jeweiligen Produktbild angezeigt.
• Farben können individuell angepasst werden.
• Die Galerie funktioniert in allen gängigen Browsern.
• Viele verschiedene Slide-Varianten.

Das Plugin kann gerne zum Testen, in meinem Shop heruntergeladen werden und ist auch bald im Extension Store verfügbar:
https://css-umsetzung.de/shop/CSS-Galerie-Premium

 

[misterGST]

Hallo css-umsetzung,

ich finde dieses Plugin extrem interessant für meinen Klamotten- Shop und habe es soeben im NOVA-Template getestet. Zwei bis drei Dinge halten mich aber (noch) davon ab, es zu kaufen:

1. Ich klicke auf das Artikelbild und erhalte die vergrößerte Ansicht auf schwarzem Hintergrund. Um die Originalgröße zu sehen, muss ich nun die Lupe (oben rechts) suchen und finden, darauf klicken und kann mich nun über die Details der Klamotte freuen. Besser und intuitiver wäre es, wenn ich ERNEUT auf das große Bild klicken könnte, um es zu vergrößern. So bin ich es als Kunde bei fast allen großen Fashion-Shops gewöhnt - siehe Zalando, OTTO, ABOUT-YOU usw.
2. In der vergrößerten Ansicht auf schwarzem Hintergrund sind die weiteren Bilder unter dem Hauptbild horizontal als Filmstreifen zu sehen. Besser für Bilder im Hochformat (siehe Klamotten-Shops) wäre die Auflistung der Bilder vertikal links neben dem Hauptbild. So könnte (nach dem ersten klick in der Artikel-Detai-Ansicht) die erste Vergrößerung schon bildschirmfüllend erfolgen. Siehe Zalando ...
3. Nicht kaufentscheidend - aber wichtig für die Stimmung beim shoppen: Der pechschwarze Hintergrund macht mich depressiv. Schöner wäre ein hellgrauer Ton mit schwarzen Icons. Siehe Zalando ...

Falls diese Änderungen kommen sollten, schicke ich dir jetzt schon einen Scheck

Herzliche Grüße
Georg

 

[css-umsetzung]

Hallo Gerog,

Zu 1) ein Doppelklick startet auch die Zoom Funktion, aber du hast recht, ich werde den Cursor am besten, nicht als Hand sondern als Lupe anzeigen wenn man über dem Bild ist.
Ich prüfe auch, ob ich das auf einen Klick, anstelle des doppelklicks ändern kann.

Zu 2) ja da gebe ich dir recht, habe ich jetzt in der ersten Version als Plugin noch nicht integriert, in einer früheren Variante, als ich das noch im Template fest verankert hatte, habe ich das schon berücksichtigt wie du hier sehen kannst
https://www.luzissimo-leuchten.de/Moderne-Haengeleuchte-mit-dreiteiligem-Schim-in-vielen-Farben

Ich kann aber nicht gleich das ganze Feuer verschießen Ich muss ja erst einmal schauen, dass die Grundfunktionen gegeben sind und ob überhaupt bedarf besteht.
Mein Gutscheinplugin hat damals auch relativ klein begonnen und ist mittlerweile zu einem sehr mächtigem Spielzeug mutiert

zu 3)
Schwarz ist eine sehr edle Farbe
wenn du bei Luzissimo schaust, siehst du das der Hintergrund das kleinste Problem ist.
Ich habe im Plugin die Möglichkeit geben über CSS und auch JS dinge zu individualisieren die noch nicht über die Konfig geregelt sind.
Es ist also möglich, die jeweiligen Farben in der Galerie zu ändern, aber wenn ich einen weißen Hintergrund mache, muss darauf geachtet werden, das die Texte usw. eben in einer dunkleren Farbe vorhanden sind.

Ich kann dich da gerne unterstützen, wenn du da ein bestimmtes Farbschema haben möchtest.

Das hier würde bei dir vermutlich gut passen

.lg-outer .lg-thumb-outer,
.lg-backdrop {
  background-color: #9E9E9E !important;
}

.lg-show-in .lg-toolbar, .lg-show-in .lg-prev, .lg-show-in .lg-next, .lg-show-in .lg-pager-outer {
  opacity: 1;
  background-color: #000 !important;
}

.lg-zoomed .lg-prev,
.lg-zoomed .lg-next {
    display:none !important;
}

 

[css-umsetzung]

Das Plugin wurde jetzt gerade auch im Extension Store freigegeben
https://www.jtl-software.de/extension-store/produktgalerie-premium-jtl-shop-5

 

[css-umsetzung]

Es gab für das Plugin Aufgrund einzelner Wünsche ein Feature Update in der Version 1.1.0

Alle Farben der Galerie sind jetzt frei definierbar, die Thumbnails der Galerie können im Landscape Modus auf der linken Seite angezeigt werden

####[1.1.0] / 07.09.2025
* Erweiterung der Farbgestaltung, jedes Element kann individuell über einen Farbwähler konfiguriert werden.
* Hinzufügen der Möglichkeit, die Alt Texte der Produktbilder im Slider der Detailseite anzuzeigen
* Optionale Anzeige der Thumbnails, im Landscape Modus, auf der linken Seite
* Oneclick startet die Zoom Funktion (Optional)

Ansicht der Konfigurationsmöglichkeiten: