Hallo! Ich bin seit einiger Zeit auf der Suche nach einem Code für 360grad-Produktansichten. Habe leider noch nicht´s brauchbares auf codpen.io etc. gefunden. Der Player sollte möglichst einfach sein, und am besten ohne JS auskommen. Hat jemand 360grad Produktansichten im Shop eingebaut. Kann jemand was empfehlen? Danke im Voraus.
Schau mal da: https://www.gambio.de/forum/threads/animiertes-gif-in-artikel-einbinden.39248/ Ohne JS wäre das nur als .gif oder MP4-Datei realisierbar. Meine Beitrag in diesem Thread ist aber mit jquery.angle.js gebaut. Oder ein fertiges Modul für den Gambio-Shop: https://www.packmaster.de/gambio-360-grad-produktfoto-darsteller.html
Das auf Deiner Seite sieht gut aus! Habe mal versucht mit dem owl-carousel was zu bauen, weil ich diesen schon eingebaut habe: Link zur Baustelle Leider geht AutoPlay noch nicht schnell genug und die Dots fehlen. Start/Stop-Button fehlt auch. Problem ist auch, dass die Bilder immer geladen werden. Etwa 500 kB. Gibt´s da eine Möglichkeit, dass die Daten erst nach einem klick auf ein Button geladen werden? Zudem möchte ich die 360grad-Ansicht an prominenter Stelle platzieren, als nomale Produktansicht, und nicht in einem Tab verstauen. So, dass nach einem Klick auf ein Button sich das Ganze über die gewöhnliche Produktansicht legt.
Guck mal bei bspw. hier: https://www.matchashop.de/de/Matcha-Schalen/Matchaschale-Shino.html Mit Foldio und dem dazugehörigen Drehteller 48 Bilder gemacht und zu einem animierten GIF zusammengesetzt und als Bild eingebunden. Fertig.
Sieht gut aus! Danke für den Tipp! Lightbox und Drehteller suche ich auch: Foldio ist sehr interessant.
Eine Möglichkeit: GIF-Animation als Produktbild. 1. Produktbild mit 360º-Piktogramm laden 2. GIF-Animation geleichen Dateinamen zuweisen und .gif in .jpg ändern 3. JPG-Datei im info_images Ordner mit der GIF-Datei überschreiben. Sieht so aus: https://www.bildhauerei-shop.de/skulptur-cosmic-dancer-andrea-kraft.html Leider wird so die Datei gleich geladen, was die Dateigröße beschränkt oder auf die Website-Speed geht. Wäre schön, wenn´s so was ähnliches als Modul gäbe.
Deine Lösung gefällt mir, nur müsste das GIF mehr Sequenzen enhalten. Frage doch mal bei @Ed nach https://www.packmaster.de
Und vor allem erst nach Aufforderung geladen werden. So wären größere Dateien möglich ohne die Speed zu beeinträchtigen. Habe nun bei Packmaster eine Anfrage gestellt.
So etwas geht nur "einfach" mit vielen .gif Bildern animiert oder als Video. Das läuft dann einfach nur im Kreis. Es gibt zwar Lösungen für 3D mit three.js aber der Aufwand wäre bei deinen Skulpturen enorm. Gruß Mike
Aber in deinem 3D-Testhop ist ja schon einiges, wie ich´s haben möchte. Das Thumbnail-Bildchen für 3D sollte an 4. Stelle kommen. Anstelle der 3D-Darstellung müßte nur ein GIF-Player oder am besten JPG-Player der nach Aufforderung oder am Besten auf Klick des Thumbnails die Dateien lädt.
Das wäre kein Problem. Ich kann mit einem kleinen Script jedes Bild ersetzen. Schau mal hier: https://kartonfritze.de/vollpapppkartons-geheftet-nach-mass.html
Wäre es nicht eine Überlegung wert, sowas als kaufbares Modul im Shop anzubieten? Unter über 25.000 Gambio-Shop-Betreiber gibt´s doch sicher noch mehr Interessenten.
Als kaufbares Universal-Modul wird es schwierig werden. Die Anwendungen die hier benötigt werden sind vermutlich jedesmal unterschiedlich. Im Moment ersetze ich per Jquery ein (bestimmbares) Artikelbild bei Klick mit einem Container. Das kann ein DIV oder auch ein CANVAS sein. Dessen Inhalt ist dann entweder fest bestimmt oder mit einem anderen Script veränderbar. Als Dienstleistung ist das für kleines Geld kein Problem. Wenn ich sehe daß die Wünsche in eine bestimmte Richtung gehen kann ich es sicher auch als konfigurierbares Modul bauen.
Habe wegen der großen Gif-Bilder mit Lazy-Loading* experimentiert. Leider ist das bei den Produktbildern nicht ganz so flüssig (Das erste müsste dann ohne Lazy-Loading sein) . Bei großen Bildern in den Beschreibungen merkt man jedoch gar nichts. @FlorianR Das wäre eventuell eine Idee für deine sich drehenden Matchaschalen, damit diese den Pagespeed nicht beeinträchtigen. * Einfach zu implementierendes Lazy-Loading: https://web.dev/codelab-use-lazysizes-to-lazyload-images/
