Neu Mitlaufende Artikeldetail-Bilder im Nova per CSS?

[der_Martin]

Hallo,

hat jemand zufällig etwas CSS, um den Bereich der Artikeldetail-Bilder im Nova-Template mitscrollen zu lassen?
So ähnlich wie es Amazon auf einer Artikelseite macht... Dort bleiben in der Desktop-Ansicht links die Bilder im Sichtbereich, während man rechts die Attribute mit Bestellinformationen runter scrollt... So lange, bis sie an den 100% breiten Hauptcontent-Block stoßen...

Du hast rechts die Kurzbeschreibung und allerlei anderes wie Versandzeugs, Preis, Bestellbutton usw... Bei mir ist das in jedem Shop immer größer als der Bildbereich.
Amazon und viele andere Marktplätze scheinen das gleiche Problem zu haben, weil man den oberen, sehr prominenten Bereich mit Warenkorb-Button gerne maximal ausnutzt. Nur entsteht dann halt in der Bildspalte immer ein riesiges Loch unter dem Bild, das durch nichts genutzt wird.

Ideal wäre es deshalb, die Gallery könnte in der Desktop-Ansicht mit scrollen, bis sie unten an den Haupt-Content stößt... Also der Gesamte Bildergalerie-Block inkl. der beiden Mountpoints vor und nach den Bilder wären idealerweise und bei Bedarf mitlaufend....

Frage deshalb hier, weil ich glaube, dass das JEDER gut gebrauchen kann...

Vielen Dank im Voraus
Grüße
Martin

 

[css-umsetzung]

gib mal dem Container id="image_wrapper" in image.tpl noch die Klasse "sticky-top"

 

[der_Martin]

gib mal dem Container id="image_wrapper" in image.tpl noch die Klasse "sticky-top"

Supi, das hat gewirkt! Danke!

/templates/NOVA/productdetails/image.tpl .....Zeile2

der image_wrapper legt sich beim scrollen aber über den Navi-Layer des Nova.
Damit kann ich leben. Schöner und aufgerämuter wär's aber vielleicht, er könnte drunter bleiben... (?)

 

[css-umsetzung]

dann gibst du im css #image_wrapper noch ein entsprechende z-index und mit top könntest du es noch ein weniger tiefer ansetzen.

z.b.:

#image_wrapper {
    z-index:1;
    top:50;
}

 

[der_Martin]

dann gibst du im css #image_wrapper noch ein entsprechende z-index und mit top könntest du es noch ein weniger tiefer ansetzen.

z.b.:

#image_wrapper {
    z-index:1;
    top:50;
}

Ich habe das testweise mal schmutzig auf's custom CSS ausgelagert. Passt! Besten Dank!

PS: Ich würde das für keine schlechte Grundkonfiguration des Nova Templates halten.... da oft ein Loch unter den Bildern entsteht.
ich weiß, ich übertreibe die rechte Spalte immer und beschränke mich nicht gerade auf 2 Sätze Kurzbeschreibung. Aber ich glaube, viele haben ein Problem, dass der rechte Bereich voll mit wichtigem Zeug ist. Runter zu scrollen in den breiten Content um das wichtige zu finden und dann wieder rauf zu scrollen um den Bestellbutton zu suchen ist nämlich auch etwas suboptimal. Auch wenn wir das gelernt haben und Amazon das auch nicht anders macht... aber auch der Bestellbutton sollte idealerweise immer im Sichtfeld bleiben. Doch das ist ne andere Geschichte.....

Danke noch mal...

 

[der_Martin]

PS: was mir leider erst jetzt aufgefallen ist: den #image-wrapper auf z-index 1 zu setzen, verursacht beim Pop-up in der mobilen Version einen schweren Fehler: Der abgedimmte, dunkle Layer legt sich beim Pop-Up der Bilder über die Bilder bzw. den Image-Wrapper und den Schließen-Button. Damit wird die Seite unbedienbar, sobald man auf ein Bild klickt....

Ich hab nun mal den #jtl-nav-wrapper auf einen sehr hohen z-index gesetzt, sodass sich das Sticky-Bild unter die Navi schiebt. Ist in der Desktop-Ansicht zwar auch nicht optimal beim aufpoppen, aber zumindest nicht so gravierend...