PrestaShop Design & navigatie

360° Productweergave PrestaShop: Spin Viewer via Afbeeldingsreeks

Interactieve 360° productweergave via afbeeldingsreeks: rotatie met muis en touch, automatisch afspelen, volledig scherm en lazy loading.

Laat uw klanten het product 360° ronddraaien: een vloeiende spin viewer, opgebouwd uit een eenvoudige afbeeldingsreeks, zonder uw thema aan te raken.

At a glance
  • Rotatie via muis en touch met uitloop, opgebouwd uit een 360° afbeeldingsreeks
  • Automatisch afspelen, volledig scherm, beeldteller en toetsenbordnavigatie
  • Lazy loading: de frames laden pas wanneer de viewer in beeld komt
  • Framebeheer met slepen en neerzetten: bulkimport, herschikken, preview, automatisch verkleinen
  • PrestaShop 8 & 9, geen overrides, één reeks per product en per winkel, vanilla JS zonder jQuery
PrestaShop 8 & 9 Muis & touch Autoplay Volledig scherm Lazy loading
  • 30 dagen geld terug
  • 12 maanden updates
  • Support binnen 24 uur
www.datafirefly.com/nl/
Visionneuse 360° faisant pivoter un produit sur une fiche PrestaShop
v1.0.0 · bijgewerkt 2026-07-16
Wat het doet

De korte versie.

01

Een rotatie die de beweging volgt

De viewer werkt met Pointer Events: de bezoeker sleept het product met de muis of met de vinger om het te laten draaien, met instelbare gevoeligheid en een natuurlijke uitloop aan het einde van de beweging. De rotatie blijft vloeiend op mobiel en op desktop, zonder afhankelijkheid van jQuery of een externe bibliotheek.

02

Automatisch afspelen en volledig scherm

De reeks kan zelfstandig starten in doorlopende rotatie, op een instelbare snelheid, met afspeel- en pauzeknop en beeldteller. De modus volledig scherm vergroot het product voor gedetailleerde inspectie, en de pijltoetsen en spatiebalk sturen de rotatie aan. De instelling voor automatisch afspelen geldt globaal of wordt per reeks overschreven.

03

Framebeheer zonder wrijving

In de backoffice koppelt u een reeks aan een product via een directe zoekfunctie en zet u daarna al uw afbeeldingen in één keer neer in de dropzone. Ze worden gesorteerd op bestandsnaam, in batches geïmporteerd met voortgangsbalk, met de muis herschikbaar en per stuk verwijderbaar. Een preview speelt de rotatie af voordat u publiceert.

04

Gemaakt voor de snelheid van de productpagina

De afbeeldingen van de reeks worden pas gedownload wanneer de viewer in het zichtbare deel van het scherm komt, via een intersection observer, met een voortgangsbalk tijdens het voorladen. Frames die breder zijn dan de ingestelde limiet worden bij het importeren automatisch verkleind, voor een beheerst gewicht en een scherpe weergave.

De lange versie

Alles wat u wilt weten voordat u installeert.

Een gedetailleerde blik op hoe 360° Productweergave PrestaShop: Spin Viewer via Afbeeldingsreeks werkt, waarom we het zo gebouwd hebben en de gedachte achter de bovenstaande functies.

§ 01

De 360° weergave zonder studio of eigen bestandsformaat

U hebt geen 3D-scanner of exotisch bestandsformaat nodig: een 360° weergave is niets anders dan een reeks foto's die rondom het product zijn genomen, meestal op een draaiplateau. U fotografeert 24, 36, 48 of 72 gelijkmatig verdeelde beelden, met dezelfde kadrering en dezelfde belichting, u benoemt ze op volgorde, en de viewer bouwt de rotatie op. De module verzorgt de import, de sortering, het verkleinen en de weergave. U houdt de controle over de opnames.

§ 02

Een natuurlijke interactie op elk scherm

De viewer is gebouwd op Pointer Events en behandelt muis en touch op dezelfde manier. De bezoeker pakt het product beet en draait het de kant op die hij wil. Aan het einde van de beweging verlengt een uitloop de rotatie en vertraagt die geleidelijk. De gevoeligheid stelt u af op het aantal frames van uw reeks. Op het toetsenbord gaan de pijltoetsen beeld voor beeld verder en start of pauzeert de spatiebalk het automatisch afspelen.

§ 03

Standaard snel, discreet voor uw thema

De afbeeldingen worden pas gedownload wanneer de viewer zichtbaar wordt op het scherm, wat voorkomt dat de eerste lading van de productpagina zwaarder wordt. Een voortgangsbalk informeert de bezoeker tijdens het voorladen, waarna de rotatie beschikbaar komt. Bij het importeren wordt elk frame dat breder is dan de ingestelde limiet op de server verkleind, voor een beheerst gewicht zonder verlies van scherpte. De module overschrijft geen enkele template: hij voegt zich in via een weergavehook die u zelf kiest.

§ 04

Een backoffice gemaakt om snel te werken

Vanuit het eigen tabblad in de catalogus maakt u een reeks aan, vindt u het product terug via een directe zoekfunctie op naam, referentie of identificatie, en zet u al uw afbeeldingen in één beweging neer. Ze worden gesorteerd op bestandsnaam zodat de opnamevolgorde behouden blijft, in batches geïmporteerd met een voortgangsbalk, en daarna herschikbaar met slepen en neerzetten en per stuk verwijderbaar. Met een previewknop speelt u de rotatie rechtstreeks in de administratie af voordat u publiceert.