Lightbox - Webflow hjälp
Använd lightbox-elementet för att visa bilder eller videor i ett helskärmsläge.
Hur man skapar en lightbox
En lightbox är en klickbar miniatyrbild inbäddad i ett länkblock. När besökare klickar inom länkens gränser på den aktiva webbplatsen, öppnas lightboxen för att visa mediet som är kopplat till den. Du kan lägga till en lightbox från Lägg till panel > Avancerat.
Hur lightboxens platshållarminiatyrbild fungerar
Lightboxen innehåller ett bildelement som beter sig som vilket annat bildelement som helst. Du kan ändra storlek på det, dubbelklicka för att ersätta platshållarminiatyrbilden och lägga till alt-text. Läs mer om bildelement.
Du kan använda samma bild för lightboxens miniatyrbild och det större lightbox-läget. Webflow skapar automatiskt responsiva varianter för alla inline-bilder. Läs mer om responsiva bilder.
Hur man ersätter lightboxens miniatyrbild med annat innehåll
Du ersätter platshållarbildselementet och drar och släpper annat innehåll (t.ex. en rubrik eller andra icke-länkelement) inuti lightbox-länken.
Du kan också använda ett div-block och applicera en bakgrundsbild för att skapa lika stora bildminiatyrer.
Hur man stylar lightboxen
Du kan styla både lightbox-länken och dess innehåll. Till exempel, om du placerar textelement i din lightbox-länk, kan du styla lightbox-länkens typografi.
Hur man lägger till lightbox-media
För att lägga till en bild och bildtext i lightbox-modalfönstret:
- Välj lightbox-länken på duken
- Gå till Elementinställningspanelen > Lightbox-länk inställningar > Media
- Klicka på ikonen “Lägg till listobjekt”
- Välj "Bild" som Typ
- Klicka på Ersätt bild
- Välj en bild från Tillgångspanelen
- Lägg till en Bildtext om det behövs
Du kan lägga till så många bilder till en lightbox-länk som du vill. Dessa bilder visas som ett bildspel inuti lightbox-modalfönstret.
För att lägga till en video till lightbox-modalfönstret:
- Välj lightbox-länken på duken
- Gå till Elementinställningspanelen > Lightbox-länk inställningar > Media
- Klicka på ikonen “Lägg till listobjekt”
- Välj "Video" som Typ
- Lägg till videons URL i URL-fältet
- Lägg till en Titel om det behövs
Lightbox för bilder och videor - Webdesign handledning
Hur man skapar dynamiska lightboxar från mediefält i samlingar
Du kan skapa dynamiska lightboxar genom att hämta miniatyrbilden och/eller lightbox-mediet från mediesamlingsfält (dvs. ett bildfält, flerbildsfält eller videofält) i ditt CMS eller E-handelskollektioner.
För att koppla ett dynamiskt samlingsfält till lightbox-miniatyren:
- Lägg till en lightbox till en dynamiskt ansluten samlingslista eller en CMS-samlingssida
- Välj platshållarens miniatyrbild
- Gå till Elementinställningar > Bildinställningar
- Klicka på "lila punkt"-ikonen i Bild-fältet
- Välj ett bildsamlingsfält
Sedan kan du koppla ljusboxen till samlingsfältet, så att dina dynamiska samlingsbilder är tillgängliga i ljusboxen. För att koppla ett dynamiskt samlingsfält till ljusboxens media:
- Välj ljusboxlänken
- Gå till Elementinställningar > Ljusboxlänk inställningar
- Klicka på "lila punkt"-ikonen i Media-fältet
- Välj ett media samlingsfält
För att koppla en ljusbox till ett flerbildsfält:
- Lägg till en Samlingslista på en samlingssida
- Koppla samlingslistan till flerbildsfältet genom att klicka på Källa-rullgardinsmenyn och välja flerbildsfältet
- Lägg till en ljusbox i samlingslistan
- Välj bild-elementet i ljusboxen
- Gå till Elementinställningar > Bildinställningar
- Klicka på "lila punkt"-ikonen i Bild-fältet
- Välj flerbildsfältet
- Välj ljusboxlänken på duken
- Gå till Elementinställningar > Ljusboxlänk inställningar
- Klicka på "lila punkt"-ikonen i Media-fältet
- Välj flerbildsfältet
Du kan också koppla en ljusbox till ett flerbildsfält när ljusboxen läggs till i samlingslistor eller samlingssidor.
Hur man länkar ljusboxar med ljusboxgrupper
Du kan länka flera ljusboxar tillsammans för att skapa ett bildspelsgalleri. När en webbplatsbesökare klickar på en länkad ljusbox, öppnas ljusboxen med all media som är kopplad till den länkade gruppen.
Hur man skapar en ljusboxgrupp
- Välj valfritt element i en ljusbox
- Gå till Elementinställningar > Ljusboxinställningar
- Ange ett gruppnamn i fältet Matcha eller skapa ett gruppnamn
Ljusboxar med samma gruppnamn är länkade i en grupp.
För ljusboxar i samlingslistor, skapar och länkar en ljusbox i ett samlingsobjekt automatiskt alla ljusboxar i samlingslistan.
Skapa flera ljusboxgrupper på en sida
Om det finns flera ljusboxar på samma sida kan du separera dem genom att tilldela varje ljusboxgrupp ett annat Gruppnamn.