Lightbox - Webflow hulp
Gebruik het lightbox-element om afbeeldingen of video's in een fullscreen modaal venster weer te geven.
Hoe maak je een lightbox
Een lightbox is een klikbare miniatuur genest in een linkblok. Wanneer sitebezoekers binnen de grenzen van de link op de live site klikken, opent de lightbox om de eraan gekoppelde media weer te geven. Je kunt een lightbox toevoegen via Toevoegen paneel > Geavanceerd.
Hoe de lightbox placeholder miniatuurafbeelding werkt
De lightbox bevat een afbeeldingelement dat zich gedraagt als elk ander afbeeldingelement. Je kunt het formaat wijzigen, dubbelklikken om de placeholder miniatuurafbeelding te vervangen en alt-tekst toevoegen. Meer informatie over afbeeldingelementen.
Je kunt dezelfde afbeelding gebruiken voor de lightbox miniatuur en het grotere lightbox modaal venster. Webflow maakt automatisch responsieve varianten voor alle inline afbeeldingen. Meer informatie over responsieve afbeeldingen.
Hoe de lightbox miniatuur vervangen door andere inhoud
Je vervangt het placeholder afbeeldingelement en sleept en plaatst andere inhoud (bijv. een kop, of andere niet-link elementen) binnen de lightbox link.
Je kunt ook een div blok gebruiken en een achtergrondafbeelding toepassen om miniaturen van gelijke grootte te maken.
Hoe de lightbox te stylen
Je kunt zowel de lightbox-link als de inhoud ervan stylen. Als je bijvoorbeeld tekstelementen in je lightbox-link nestelt, kun je de typografie van het lightbox-linkelement stylen.
Hoe voeg je lightbox-media toe
Om een afbeelding en bijschrift toe te voegen aan het modale venster van de lightbox:
- Selecteer de lightbox-link op het canvas
- Ga naar Elementinstellingenpaneel > Lightbox-linkinstellingen > Media
- Klik op het pictogram “Item toevoegen”
- Kies "Afbeelding" als Type
- Klik op Afbeelding vervangen
- Selecteer een afbeelding uit het Assetspaneel
- Voeg een Bijschrift toe indien nodig
Je kunt zoveel afbeeldingen aan een lightbox-link toevoegen als je wilt. Deze afbeeldingen worden weergegeven als een diavoorstelling in het modale venster van de lightbox.
Om een video toe te voegen aan het modale venster van de lightbox:
- Selecteer de lightbox-link op het canvas
- Ga naar Elementinstellingenpaneel > Lightbox-linkinstellingen > Media
- Klik op het pictogram “Item toevoegen”
- Kies "Video" als Type
- Voeg de URL van de video toe aan het URL-veld
- Voeg een Titel toe indien nodig
Lightbox voor afbeeldingen en video's - Webdesign tutorial
Hoe maak je dynamische lightboxes van Collection-veldmedia
Je kunt dynamische lightboxes maken door de miniatuurafbeelding en/of lightbox-media uit mediacollectievelden (d.w.z. een afbeeldingsveld, multi-afbeeldingsveld of videoveld) in je CMS of Ecommerce Collecties te halen.
Om een dynamisch Collection-veld aan de lightbox-miniatuur te koppelen:
- Voeg een lightbox toe aan een dynamisch verbonden Collection-lijst of een CMS Collection-pagina
- Selecteer de tijdelijke miniatuurafbeelding
- Ga naar Elementinstellingen > Afbeeldingsinstellingen
- Klik op het "paarse stip"-pictogram in het Afbeelding-veld
- Selecteer een afbeeldingscollectieveld
Vervolgens kun je de lightbox verbinden met het Collection-veld, zodat je dynamische Collection-afbeeldingen beschikbaar zijn in de lightbox. Om een dynamisch Collection-veld aan de lightbox-media te koppelen:
- Selecteer de lightbox-link
- Ga naar Elementinstellingen > Lightbox-linkinstellingen
- Klik op het "paarse stip"-icoon in het Media-veld
- Selecteer een media Collection-veld
Om een lightbox aan een multi-image veld te koppelen:
- Voeg een Collection-lijst toe aan een Collection-pagina
- Verbind de Collection-lijst met het multi-image veld door op de Bron dropdown te klikken en het multi-image veld te selecteren
- Voeg een lightbox toe aan de Collection-lijst
- Selecteer het afbeelding element in de lightbox
- Ga naar Elementinstellingen > Afbeeldingsinstellingen
- Klik op het "paarse stip"-icoon in het Afbeelding-veld
- Selecteer het multi-image veld
- Selecteer de lightbox-link op het canvas
- Ga naar Elementinstellingen > Lightbox-linkinstellingen
- Klik op het "paarse stip"-icoon in het Media-veld
- Selecteer het multi-image veld
Je kunt ook een lightbox verbinden met een multi-image veld wanneer de lightbox is toegevoegd aan Collection-lijsten of Collection-pagina's.
Hoe lightboxes te koppelen met behulp van lightbox-groepen
Je kunt meerdere lightboxes aan elkaar koppelen om een diavoorstelling-galerij te maken. Wanneer een sitebezoeker op een gekoppelde lightbox klikt, opent de lightbox alle media die aan de gekoppelde groep zijn verbonden.
Hoe een lightbox-groep te maken
- Selecteer een element in een lightbox
- Ga naar Elementinstellingen > Lightbox-instellingen
- Voer een groepsnaam in het veld Match of maak een groepsnaam aan in
Lightboxes met dezelfde groepsnaam zijn in een groep gekoppeld.
Voor lightboxes in Collection-lijsten, het maken en koppelen van één lightbox in een Collection-item koppelt automatisch alle lightboxes in de Collection-lijst.
Meerdere lightbox-groepen op een pagina maken
Als er meerdere lightboxes op dezelfde pagina zijn, kun je ze scheiden door elke lightbox-groep een andere Groepsnaam toe te wijzen.