ImageGallery
Afbeeldingengalerij met thumbnailstrip, zoom-dialog, autoplay en crossfade.
Toon meerdere afbeeldingen met navigatie, een thumbnailstrip en een zoom-weergave. Optioneel met autoplay en crossfade.
Toepassingen per site-type
Bij een webshop toont dit block de verschillende hoeken en details van een product: vooraanzicht, close-up van het materiaal en een foto in gebruik. De zoom-weergave is dan onmisbaar, omdat bezoekers online geen product kunnen vastpakken en de detailfoto dat gedeeltelijk moet compenseren. Een portfolio-site gebruikt de galerij per project: alle foto's van één opdracht bij elkaar, met de thumbnailstrip als snel overzicht van hoeveel beeldmateriaal er is. Bij een zakelijke dienstverlener met een fysieke locatie, zoals een praktijk of showroom, toont de galerij de ruimte: wachtkamer, behandelkamer of showroomvloer.
Een veelgemaakte fout is te veel afbeeldingen van wisselende kwaliteit in één galerij zetten: een enkele onscherpe of slecht uitgelichte foto valt tussen goede foto's meteen op. Selecteer liever tien sterke foto's dan dertig middelmatige. Een tweede valkuil is autoplay te snel instellen: geef bezoekers minstens vier tot vijf seconden per afbeelding, anders is de foto nog niet bekeken voordat de volgende verschijnt.
Combineer dit block met Records als de afbeeldingen per item verschillen, bijvoorbeeld een productenoverzicht waarbij elk product zijn eigen galerij toont. Voor een rustiger alternatief zonder zoom-functie, bijvoorbeeld klantlogo's of een sfeerimpressie, is de Swiper lichter in gebruik.
Zet autoplay standaard uit als de galerij belangrijke informatie bevat die de bezoeker in eigen tempo wil bekijken, en zorg dat elke afbeelding een beschrijvende alt-tekst heeft via de mediabibliotheek — dat helpt zowel de toegankelijkheid als de vindbaarheid van de afbeeldingen in zoekmachines.
Gebruik dit block wanneer je meerdere foto's van hetzelfde onderwerp wilt tonen: een woning met meerdere kamers, een productpagina met detailfoto's, of een portfolio van afgeronde projecten. De thumbnailstrip geeft direct overzicht, terwijl de zoom-weergave bezoekers laat inzoomen op details.
Vergeleken met los onder elkaar plaatsen van afbeeldingen bespaart dit veel scrollruimte en houd je de pagina overzichtelijk. Wil je juist een lichte, doorlopende rij afbeeldingen zonder thumbnails en zoom, dan past de Swiper beter. Afbeeldingen beheer je via de mediabibliotheek.