PrestaShop Design & navigatie

Productgalerij PrestaShop: HD-zoom, Volledig Scherm & Variantfilter

Productgalerij van de nieuwe generatie: HD-zoom, verticale miniaturen, volledig scherm op mobiel met knijpen en filtering van de afbeeldingen op variant.

De productgalerij die PrestaShop had moeten leveren: zoom in hoge resolutie, volledig scherm op mobiel en afbeeldingen gefilterd op variant.

At a glance
  • Interne HD-zoom bij aanwijzen: schakelt automatisch over naar de originele bronafbeelding zonder verkleining
  • Viewer op volledig scherm voor mobiel: knijpen met twee vingers, dubbeltikken, vegen, beeldteller
  • Filtering van de afbeeldingen op de geselecteerde variant, strikte of slimme modus, opnieuw gesynchroniseerd bij elke variantwissel
  • Laadstrategie afgestemd op LCP: cover voorgeladen met hoge prioriteit, miniaturen en naburige afbeeldingen uitgesteld
  • PrestaShop 8 & 9, geen override en geen SQL-tabel, vanilla JS zonder jQuery
PrestaShop 8 & 9 HD-zoom Knijpen op mobiel Variantfilter LCP geoptimaliseerd
  • 30 dagen geld terug
  • 12 maanden updates
  • Support binnen 24 uur
www.datafirefly.com/nl/
Galerie produit PrestaShop avec zoom HD et affichage plein écran
v1.0.0 · bijgewerkt 2026-07-16
Wat het doet

De korte versie.

01

Zoom in hoge resolutie, echt waar

De zoom bij aanwijzen volgt de cursor met een instelbare factor van 1,5 tot 4. Bij het eerste aanwijzen laadt de galerij stilletjes de originele bronafbeelding zonder verkleining voor en schakelt daarnaar over: de zoom blijft scherp, zelfs bij zeer gedetailleerde foto's, waar de standaardzoom het bij het large formaat laat.

02

Volledig scherm op mobiel met knijpen

Meeslepende viewer gebouwd op Pointer Events: knijpen met twee vingers met automatische herkadrering, dubbeltikken om in te zoomen, vegen om te navigeren, beeldteller en sluiten met Escape of een klik op de achtergrond. Zoomen met het muiswiel op desktop.

03

Afbeeldingen gefilterd op variant

De galerij leest de native koppelingen tussen afbeeldingen en combinaties van de productpagina en toont alleen de relevante afbeeldingen: strikte modus (uitsluitend de afbeeldingen van de variant) of slimme modus (afbeeldingen van de variant eerst, daarna de rest). Ze synchroniseert opnieuw bij elke variantwissel, ook na de AJAX-verversing door de core.

04

Gemaakt voor de Largest Contentful Paint

De coverafbeelding wordt al vanaf de head-tag aangekondigd voor voorladen met hoge prioriteit, de eerste afbeelding van het podium wordt met voorrang geladen terwijl miniaturen en volgende afbeeldingen worden uitgesteld, en de naburige afbeeldingen worden bij elke navigatie voorgeladen. Uw productpagina wint aan gevoelde en gemeten snelheid.

De lange versie

Alles wat u wilt weten voordat u installeert.

Een gedetailleerde blik op hoe Productgalerij PrestaShop: HD-zoom, Volledig Scherm & Variantfilter werkt, waarom we het zo gebouwd hebben en de gedachte achter de bovenstaande functies.

§ 01

De standaardgalerij vervangen zonder het thema aan te raken

De module vervangt geen enkele template: hij injecteert de gegevens van de productpagina bij het laden van de pagina en bouwt daarna de galerij op in JavaScript op de plaats van het standaard afbeeldingsblok, dat netjes wordt verborgen. Die aanpak maakt hem compatibel met het classic thema en met de grote meerderheid van de thema's die daarvan zijn afgeleid, zonder templateconflict en zonder onderhoudsschuld bij elke update van uw thema. In de snelweergave blijft de standaardgalerij bewust behouden om elke interferentie met de core te vermijden.

§ 02

Een zoom die uw foto's eindelijk op volle resolutie benut

De standaardzoom van PrestaShop blijft beperkt tot het large formaat dat de winkel genereert, vaak 800 pixels. Hier volgt de interne zoom de cursor met een instelbare factor, en vanaf het eerste aanwijzen laadt de galerij op de achtergrond de originele bronafbeelding voor die u hebt geüpload, om daarna onzichtbaar over te schakelen. Naden, texturen en details blijven scherp, ook bij sterke vergroting. Een echt argument voor mode, sieraden, meubelen of verzorgde productfotografie.

§ 03

Het volledige scherm op mobiel dat uw bezoekers verwachten

Op mobiel opent de viewer op volledig scherm met één tik: donkere achtergrond, knijpen met twee vingers met voortdurend herberekende verplaatsingsgrenzen, dubbeltikken om in en uit te zoomen, horizontaal vegen om van afbeelding te wisselen en een positieteller. Op desktop reageert dezelfde viewer op het muiswiel, de pijltoetsen en de Escape-toets. De ervaring komt in de buurt van die van de grote marketplaces, rechtstreeks in uw eigen winkel.

§ 04

Afbeeldingen die kloppen met de gekozen variant

Wanneer een klant de kleur cognac kiest, zaait het tonen van foto's van het zwarte model twijfel en veroorzaakt het retouren. De galerij leest de native tabel met koppelingen tussen afbeeldingen en combinaties en filtert de weergave daarop: in de strikte modus verschijnen alleen de afbeeldingen van de variant, in de slimme modus komen ze vooraan en volgen de andere daarna. Heeft een combinatie geen enkele gekoppelde afbeelding, dan wordt de volledige galerij als terugval getoond. De hersynchronisatie gebeurt bij elke variantwissel, ook nadat de core van PrestaShop het afbeeldingsblok via AJAX heeft vervangen.