Productgalerij PrestaShop: volledige gids
De productgalerij installeren en configureren: HD-zoom, volledig scherm op mobiel, filteren op variant en LCP-optimalisaties.
Overzicht
Productgalerij PrestaShop (de modulemap dfgallerypro) vervangt de native beeldgalerij van de productfiche door een moderne galerij: interne zoom in hoge resolutie bij het zweven, verticale of horizontale miniaturen, een schermvullende viewer met knijpzoom op mobiel, filtering van de afbeeldingen op de gekozen variant en een laadstrategie die op de Largest Contentful Paint is afgestemd.
De module vervangt geen enkele template: de galerij wordt met JavaScript opgebouwd op de plaats van het native beeldblok, dat wordt verborgen. Hij gebruikt geen SQL-tabel, geen override, en zijn JavaScript is puur geschreven, zonder jQuery.
Installatie
Vereisten
- PrestaShop 8.0 tot 9.x
- PHP 7.4 of hoger
- Een thema op basis van het Classic-thema (of dat de standaard beeldcontainers van de productfiche aanbiedt)
De module installeren
- Open in de backoffice Modules → Modulebeheer.
- Klik op Een module installeren en kies het archief
dfgallerypro.zip. - Klik na de installatie op Configureren.
De installatie voegt geen enkele tabel aan de database toe: er worden alleen gewone configuratiesleutels aangemaakt. Bij het verwijderen verdwijnen die volledig.
Configuratie
Alle instellingen staan op het configuratiescherm van de module. De wijzigingen gelden meteen aan winkelzijde, zonder de cache te legen.
Positie van de miniaturen
- Links (verticaal): een kolom met miniaturen links van de hoofdafbeelding. Dat is de standaardinstelling.
- Rechts (verticaal): een kolom rechts van de hoofdafbeelding.
- Onder (horizontaal): een horizontale strook onder de hoofdafbeelding.
Op mobiel (onder 768 px) komen de miniaturen altijd in een schuivende horizontale strook onder de hoofdafbeelding, welke instelling u ook kiest.
Zoommodus en zoomniveau
- Zweven (interne zoom): de zoom volgt de cursor binnen de afbeelding. Alleen actief op toestellen met een precieze aanwijzer (computers), die automatisch worden herkend.
- Klik (opent het volledige scherm): geen zoom bij het zweven; een klik opent de schermvullende viewer.
- Uitgeschakeld: geen enkele zoominteractie op het beeld.
Het zoomniveau bepaalt de vergrotingsfactor bij het zweven, tussen 1,5 en 4. De aanbevolen waarde ligt tussen 2 en 3.
Bij het eerste zweven laadt de module op de achtergrond de oorspronkelijke afbeelding die u hebt geüpload (zonder verkleining) en gebruikt hij die voor de zoom. Hoe groter uw bronafbeeldingen, hoe scherper de zoom.
Schermvullende viewer en knijpzoom
Staat de schermvullende viewer aan, dan opent een klik op de hoofdafbeelding (of op de vergrootknop rechtsonder) een meeslepende viewer op een donkere achtergrond, met een beeldteller, pijlen en sluiten via de Escape-toets of een klik op de achtergrond.
De optie Knijpzoom op mobiel schakelt in die viewer het knijpen met twee vingers in (tot ×4), dubbeltikken om in en uit te zoomen, en het verschuiven van de ingezoomde afbeelding met de vinger. Op een computer zoomt u met het muiswiel.
Afbeeldingen filteren op variant
- Strikt: alleen de afbeeldingen die aan de gekozen variant hangen, verschijnen.
- Slim (aanbevolen): de afbeeldingen van de variant komen eerst, gevolgd door de andere afbeeldingen van het product.
- Uitgeschakeld: alle afbeeldingen blijven altijd zichtbaar.
Heeft de gekozen variant in geen enkele modus een gekoppelde afbeelding, dan verschijnt de volledige galerij als terugval. De galerij synchroniseert zichzelf bij elke variantwissel, ook na de AJAX-verversing van het beeldblok door de kern van PrestaShop.
Lazy loading en LCP-preload
- Lazy loading: alleen de eerste afbeelding wordt meteen geladen; de miniaturen voorbij de vierde en de volgende afbeeldingen komen later. Bij elke navigatie worden de aangrenzende afbeeldingen alvast geladen, voor directe overgangen.
- De omslagafbeelding vooraf laden (LCP): zet in de paginakop een preloadtag met hoge prioriteit voor de omslagafbeelding, wat de Largest Contentful Paint van de productfiche verbetert.
- De navigatiepijlen tonen: toont pijlen voor vorige en volgende op de hoofdafbeelding (zichtbaar bij zweven op een computer, altijd zichtbaar op mobiel).
Afbeeldingen aan varianten koppelen
Het filteren op variant steunt op de native koppelingen van PrestaShop, zonder extra instellingen in de module:
- Open de productfiche in de backoffice, tabblad Varianten.
- Open elke variant en vink in het onderdeel Afbeeldingen de bijbehorende afbeeldingen aan.
- Sla op: de galerij gebruikt die koppelingen meteen aan winkelzijde.
Goede praktijk: koppel aan elke variant haar eigen foto’s (kleur, afwerking) en laat de algemene foto’s (sfeerbeelden, maattabellen) ongekoppeld. In de slimme modus blijven die zichtbaar na de foto’s van de variant.
Werking aan winkelzijde
Op een computer
- Zweven over de afbeelding: interne zoom die de cursor volgt (als de zweefmodus aanstaat).
- Klik op de afbeelding of op de vergrootknop: de schermvullende viewer opent.
- Pijltoetsen om te navigeren, Escape om te sluiten, het muiswiel om in de viewer te zoomen.
Op mobiel
- Horizontaal vegen over de hoofdafbeelding om van beeld te wisselen.
- Tikken op de afbeelding: het volledige scherm opent.
- In het volledige scherm: knijpen met twee vingers, dubbeltikken, vegen om te navigeren en een positieteller.
Prestaties en LCP
De module is gebouwd om de Core Web Vitals van de productfiche te verbeteren in plaats van te verslechteren:
- De omslagafbeelding wordt al in de paginakop als preload met hoge prioriteit aangekondigd (in te schakelen optie).
- De eerste afbeelding van het beeld wordt geladen met het attribuut voor hoge prioriteit en asynchrone decodering.
- De miniaturen gebruiken de native lazy loading van de browser; de oorspronkelijke afbeelding voor de zoom komt pas bij het eerste zweven.
- De JavaScript wordt onder aan de pagina geladen, zonder externe afhankelijkheid.
Thema’s en probleemoplossing
De module richt zich op de standaard beeldcontainers van thema’s die op Classic zijn gebaseerd. Gebruikt uw thema een volledig andere structuur, dan blijft de native galerij gewoon staan, zonder fout.
- De galerij verschijnt niet: controleer of uw thema wel een standaard beeldcontainer op de productfiche aanbiedt. Neem contact op met onze ondersteuning met de URL van een productfiche: het aanpassen aan een bepaald thema gaat doorgaans snel.
- De zoom oogt wazig: de scherpte van de zoom hangt af van de resolutie van de geüploade bronafbeeldingen. Upload afbeeldingen van minstens 1500 px breed voor het beste resultaat.
- Het filteren reageert niet op een variantwissel: controleer of de afbeeldingen wel aan de varianten zijn gekoppeld in het tabblad Varianten van de productfiche, en of de filtermodus niet op Uitgeschakeld staat.
- Snelweergave: het venster met de snelweergave houdt bewust de native galerij aan, om elke botsing met de JavaScript van de kern te vermijden.
Verwijderen
De module verwijderen via het modulebeheer wist alle configuratiesleutels ervan. Er blijven geen restgegevens over: de module heeft geen tabel, geen override en geen bestand buiten zijn eigen map aangemaakt.
Changelog
- 1.0.0 (16-07-2026): eerste versie met HD-zoom bij zweven op basis van de oorspronkelijke afbeelding, een schermvullende viewer met knijpzoom, het filteren van afbeeldingen op variant (strikt of slim), LCP-preload, lazy loading, verticale of horizontale miniaturen en vertalingen in FR, EN, ES, DE en IT.