Zoom für Bilder auf Seiten

[Nina2020]

Hallo, 

ich habe für meine Kunden eine Seite, auf der erläutert wird, wie Sie die Größe Ihres Produkts feststellen. Dort findet sich auch eine Größentabelle in Form eines Bildes. Ich hätte gern, dass Sie vergrößert sehen können, wenn sie draufklicken (oder zumindest zoomen können). Ich habe schon gelesen, dass es Apps für die Produktbilder gibt, aber bisher nichts zu Bildern auf Seiten gefunden. CSS mäßig kam ich da bisher auch nicht weiter. Ich bin für jeden Tipp dankbar!

LG
Nina

[r8r]

Hallo @Nina2020 – gibt's den aktuellen Stand der Seite zu begutachten? Das würd es leichter machen, Dir punktgenau zu antworten.

Liebe Grüße,

Mario

[Gabe]

Hey Nina! @Nina2020 

Super, ein Bilder Zoom Feature auf deinen Inhaltsseiten ist eine gute Idee und auch gut für die Barrierefreiheiten!

Hast du vielleicht eine Beispiel Page die ich anschauen kann? Du möchtest also, dass wenn man mit der Maus über ein Bild geht, der Mauszeiger zu einem Lupensymbol wird, und man dann tiefer in das Bild hineinzoomen kann, ist das richtig?

Ganz so einfach wird das nicht sein und du kannst entweder einen HTML in den HTML-Editor deiner Page einbauen oder man kann z. B. eine CSS code in die theme.scss ganz unten einfügen wie das folgende -> Aber dies bitte zuerst in einer Theme Kopie vorher testen und der Code ist auch Themenabhängig (ich bin nicht eingeweiht in welches Theme du verwendest Nina):

.rte img {
transition: transform .2s; /* Animation */
}

.rte img:hover {
transform: scale(1.5);
}

Dann habe ich hier eine tolle Anleitung von W3Schools wie du das im HTML-Editor deiner Page machen kannst: https://www.w3schools.com/howto/howto_js_image_zoom.asp

Ansonsten haben unsere Experten Mario @r8r oder Jonathan @Finer vielleicht auch Vorschläge?

Lass wissen, wenn du weitere Fragen hast zum obigen Thema oder generell zu deinem Shop und Business und gerne können wir das hier weiter besprechen!

[Nina2020]

Lieben Dank, 

ich nutze derzeit das Craft Theme. Anbei, wie es im Moment aussieht:

[Finer · Accepted solution]

@Nina2020 Du kannst hier auf einen Zoom verzichten, wenn Du stattdessen das "Size Chart" Feature des Themes verwendest.

Das würde folgendermaßen funktionieren:

• Unter Vertriebskanal > Onlineshop > Seiten erstellt Du eine Seite mit dem Titel "Grössentabelle".
• Auf dieser Seite baust Du mithilfe des Texteditors eine Tabelle, welche die gleiche Information enthält, welche im aktuellen Bild hinterlegt ist.
• Im Theme-Editor gehst Du dann auf die Produktseite und fügst im Produkt-Abschnitt einen weiteren Block hinzu (Size Chart).
• Wenn Du dann auf das Element gehst, kannst Du (wahrscheinlich rechts) eine Seite auswählen, welche den Inhalt der Größentabelle enthält.

Wenn Nutzer auf der Seite sind und dann auf Größentabelle klicken, öffnet sich ein Fenster mit den entsprechenden Informationen (Tabelle).

Vielleicht ist das auch eine valide Option für Dich.

[Gabe]

[Nina2020]

Vielen Dank. Ich habe das erstmal so gelöst. 

Lieben Dank!