360° Bilder in Online-Shop

hudh · 14. Februar 2014

Hi Leute,

habe schon sehr lange nichts mehr von mir hören lassen, aber nun bräuchte ich mal wieder
eure Hilfe und wäre sehr dankbar, wenn Ihr mir ein paar Tipps geben könntet.

Und zwar bin ich gerade mit einem Freund zusammen dabei einen Online-Shop ins Netz zu stellen
und ob man nun will oder nicht, man holt sich halt auch Inspirationen bei der Konkurrenz. Nun
ist uns der Shop von www.kosmetikspiegel-online.de besonders ins Auge
gefallen, da dieser Shop 360° Bilder anbietet.

Jetzt meine Frage, wie ist das ganze nun technisch realisiert worden? Vor allen Dingen jedoch Produkt kann man 360°
drehen und die Ladezeit scheint gar nicht darunter zu leiden.

Würde mich sehr freuen, wenn ihr mir da einen Tipp geben könntet?!

Grüße

QueFueMejor · 14. Februar 2014

Hab mal das untersucht. Der Code sagt:

Spoiler anzeigen

Code

<a class="artikelbild Magic360 desktop zoom-in" data-magic360-options="filename: 049_{col}.jpg; large-filename: zoom_049_{col}.jpg; columns:35;" href="/layout/360grad/049/zoom_049_001.jpg" style="display: inline-block; visibility: visible; overflow: hidden; position: relative; vertical-align: middle; text-decoration: none; color: rgb(0, 0, 0); background-repeat: no-repeat; background-size: 335px 335px; background-image: url("/layout/360grad/049/049_001.jpg"), url("/layout/360grad/049/049_003.jpg"), url("/layout/360grad/049/049_007.jpg"), url("/layout/360grad/049/049_009.jpg"), url("/layout/360grad/049/049_002.jpg"), url("/layout/360grad/049/049_011.jpg"), url("/layout/360grad/049/049_012.jpg"), url("/layout/360grad/049/049_013.jpg"), url("/layout/360grad/049/049_005.jpg"), url("/layout/360grad/049/049_015.jpg"), url("/layout/360grad/049/049_004.jpg"), url("/layout/360grad/049/049_017.jpg"), url("/layout/360grad/049/049_008.jpg"), url("/layout/360grad/049/049_014.jpg"), url("/layout/360grad/049/049_010.jpg"), url("/layout/360grad/049/049_020.jpg"), url("/layout/360grad/049/049_016.jpg"), url("/layout/360grad/049/049_018.jpg"), url("/layout/360grad/049/049_019.jpg"), url("/layout/360grad/049/049_006.jpg"), url("/layout/360grad/049/049_022.jpg"), url("/layout/360grad/049/049_021.jpg"), url("/layout/360grad/049/049_027.jpg"), url("/layout/360grad/049/049_028.jpg"), url("/layout/360grad/049/049_029.jpg"), url("/layout/360grad/049/049_024.jpg"), url("/layout/360grad/049/049_031.jpg"), url("/layout/360grad/049/049_030.jpg"), url("/layout/360grad/049/049_033.jpg"), url("/layout/360grad/049/049_025.jpg"), url("/layout/360grad/049/049_035.jpg"), url("/layout/360grad/049/049_034.jpg"), url("/layout/360grad/049/049_023.jpg"), url("/layout/360grad/049/049_032.jpg"), url("/layout/360grad/049/049_026.jpg"); background-position: 0px -10000px, 0px -10000px, 0px -10000px, 0px -10000px, 0px -10000px, 0px -10000px, 0px -10000px, 0px -10000px, 0px -10000px, 0px -10000px, 0px -10000px, 0px -10000px, 0px -10000px, 0px -10000px, 0px -10000px, 0px -10000px, 0px 0px, 0px -10000px, 0px -10000px, 0px -10000px, 0px -10000px, 0px -10000px, 0px -10000px, 0px -10000px, 0px -10000px, 0px -10000px, 0px -10000px, 0px -10000px, 0px -10000px, 0px -10000px, 0px -10000px, 0px -10000px, 0px -10000px, 0px -10000px, 0px -10000px; outline: medium none;">
<img alt="049" src="/layout/360grad/049/049_001.jpg" style="width: 100%; opacity: 0;">
</a>

Im Grunde liegen da ein Haufen Bilder hintereinander und werden bei Bedarf angezeigt.

Pokemongermany · 21. März 2014

Magic Toolbox 360

Das wäre exakt das Script, welches der Online Shop verwendet.

Hoffe dass ich dir damit weitergeholfen habe.

Lg

Benutzer online in diesem Thema