Det kan vara frustrerande att lägga tid på att ta vackra foton, bara för att se dem visas i ett grundläggande galleri som inte gör dem rättvisa. Standardgalleriet i WordPress känns ofta platt och får användare att klicka bort för att se en större version.
En lightbox-effekt löser detta genom att låta besökare se dina bilder i en fantastisk överläggning utan att någonsin lämna sidan. Här på WPBeginner använder vi Envira Gallery på våra testwebbplatser och klientprojekt eftersom det är det enklaste och mest pålitliga sättet att skapa professionellt utseende gallerier.
I den här artikeln går vi igenom de enkla stegen för att lägga till en lightbox-effekt i dina egna WordPress-gallerier.
Här är en snabb översikt över vad du kommer att lära dig i den här handledningen.
- Varför lägga till lightbox-effekten i WordPress-gallerier?
- Hur man lägger till ett WordPress-galleri med ljusboxeffekt
- Alternativ: Använd NextGen Gallery för att skapa bildportföljer och gallerier i WordPress
- Vanliga frågor om WordPress ljusboxgallerier
Varför lägga till lightbox-effekten i WordPress-gallerier?
Genom att lägga till en responsiv lightbox-effekt till gallerierna på din WordPress-webbplats kan du visa dina bilder mer professionellt. Denna effekt låter dig visa dina foton i ett popup-fönster på din webbplats när en användare klickar på dem.
Lightboxar hjälper till att skapa en mer uppslukande visningsupplevelse för dina besökare och gör det till och med enklare för dem att dela dina bilder på sociala medier eller ladda ner dem på sina datorer.
Om du har en fotowebbplats, kommer att lägga till en lightboxeffekt att göra det möjligt för användare att se dina högupplösta bilder i ett distraktionfritt läge, vilket ökar engagemanget.
Likaså, om du har en WooCommerce-butik, kan det att lägga till en lightbox-effekt till dina produktgallerier hjälpa kunder att se produkten på nära håll och fatta ett informerat beslut.
Med det sagt, låt oss se hur man enkelt lägger till ett WordPress-bildgalleri med en lightbox-effekt, steg för steg.
Hur man lägger till ett WordPress-galleri med ljusboxeffekt
Det enklaste sättet att lägga till ett lightbox-galleri är att använda Envira Gallery. Det är det bästa WordPress-galleripluginet på marknaden och det vi använder för våra egna projekt.
Den levereras med en dra-och-släpp-byggare, professionella mallar och kraftfulla funktioner som social delning, vattenmärkning och naturligtvis ljuslådor. För en fullständig genomgång av dess funktioner kan du läsa vår kompletta Envira Gallery-recension.
Envira Gallery är också supersnabbt och har en dra-och-släpp-byggare, professionella gallerimallar och många funktioner, inklusive att lägga till taggar, ljud, social delning och lightboxes.
Först måste du installera och aktivera pluginet Envira Gallery. För detaljerade instruktioner, se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.
Notera: Envira Gallery har också ett gratis plugin som du kan använda för den här handledningen. Att uppgradera till betalplanen ger dig dock tillgång till fler funktioner.
Vid aktivering, besök sidan Envira Gallery » Inställningar från WordPress admin-sidomenyn för att ange licensnyckeln.
Du kan hämta denna information från ditt konto på Envira Gallerys webbplats.
Besök sedan sidan Envira Gallery » Lägg till ny från WordPress-instrumentpanelen för att börja skapa ditt eget nya galleri.
Skriv här en titel för bildgalleriet. Klicka sedan på knappen ‘Välj filer från din dator’ för att ladda upp bilder. Om du vill lägga till bilder från mediebiblioteket i ditt galleri, klicka sedan på knappen ‘Välj filer från andra källor’.
Detta startar mediebiblioteket varifrån du kan ladda upp galleribilder. Kom ihåg att du bara kan ladda upp en bild från mediebiblioteket åt gången.
När du har gjort det, scrolla ner till sektionen 'Currently in your Gallery'. Här ser du en förhandsgranskning av ditt galleri till höger med inställningar i vänster kolumn.
Klicka nu på pennikonen högst upp på varje bild för att öppna prompten ‘Redigera metadata’ på skärmen.
Härifrån kan du lägga till bildtexten, statusen, titel och alt-text för enskilda bilder.
Glöm sedan inte att klicka på knappen "Spara metadata" för att lagra dina inställningar.
Byt sedan till fliken ‘Konfiguration’ i den vänstra kolumnen för att ändra galleriets layout enligt dina önskemål. Här kan du välja en layout, antal kolumner, bildstorlek, dimensioner, teman och mer.
För detaljerade instruktioner, se vår nybörjarguide om hur man skapar ett bildgalleri i WordPress.
När du har gjort det, växla till fliken 'Lightbox' från den vänstra kolumnen och markera alternativet 'Aktivera Lightbox?'.
Välj sedan ett lightbox-tema från rullgardinsmenyn 'Gallery Lightbox Theme'. Om du väljer alternativet 'Legacy' kommer lightbox-effektprompten att ha en äldre layout.
När du väljer alternativet ‘Bas (Mörk)’ kommer ljusboxprompten att ha en mörk bas som layout.
Välj sedan om du vill visa bildtiteln eller dess bildtext i lightbox-prompten. Du kan också visa båda eller ingen av dem om du vill.
När du har gjort det, välj bildstorleken för lightboxen från rullgardinsmenyn.
Kontrollera sedan alternativet 'Aktivera galleripilar'. Lightboxen kommer nu att visa två pilar som tittarna kan använda för att växla mellan olika bilder i ditt galleri.
Du kan också konfigurera andra inställningar för din lightbox, inklusive dess övergångseffekt, öppnings-/stängningseffekt, aktivera lightbox supersize, och mer.
När du är klar, glöm inte att klicka på knappen ‘Publicera’ högst upp för att spara dina ändringar.
För att lägga till ditt bildgalleri till ett WordPress-inlägg/sida, öppna sidan i blockredigeraren.
Här behöver du klicka på knappen 'Lägg till block' ('+') i det övre vänstra hörnet av skärmen för att öppna blockmenyn. Lägg sedan till Envira Gallery-blocket på sidan/inlägget.
Välj därefter bildgalleriet som du just skapade från rullgardinsmenyn i själva blocket. Klicka slutligen på knappen 'Uppdatera' eller 'Publicera' för att spara dina inställningar.
Nu kan du besöka din WordPress-blogg för att se bildgalleriet och sedan klicka på valfri bild för att se ljusboxeffekten.
Alternativ: Använd NextGen Gallery för att skapa bildportföljer och gallerier i WordPress
Envira Gallery är det bästa alternativet för att lägga till lightbox-bilder på din WordPress-webbplats. Alternativt kan du använda NextGEN Gallery för att skapa helt responsiva och visuellt tilltalande gallerier och portföljer på din WordPress-webbplats.
NextGEN Gallery är det bästa alternativet till Envira Gallery eftersom det stöder ett brett utbud av gallerityper, har e-handelsrelaterade funktioner och låter dig lägga till vattenstämplar, lightboxes, bildkommentarer och mer.
Dessutom tillåter NextGEN Gallery dig att acceptera onlinebetalningar via Stripe eller PayPal, vilket gör det enkelt att sälja dina bilder online.
Det är ett avancerat galleri-plugin med funktioner för professionella fotografer, grafiska designers och visuella konstnärer, vilket gör det till ett av de bästa WordPress-portfölj-plugins på marknaden.
För detaljerade instruktioner kan du vilja se vår handledning om hur du lägger till en portfölj på din WordPress-webbplats.
Vanliga frågor om WordPress ljusboxgallerier
Här är svar på några av de vanligaste frågorna vi får om att lägga till en lightbox-effekt i WordPress-gallerier.
Vad är en lightbox-effekt i WordPress?
En lightbox-effekt är en funktion som visar dina bilder i ett överlägg som fyller skärmen. Resten av sidans innehåll tonas ner i bakgrunden.
Detta gör det möjligt för besökare att se media i en större storlek utan att navigera till en ny sida, vilket skapar en mer fokuserad användarupplevelse.
Vilket är det bästa WordPress lightbox-galleri-pluginet?
Enligt vår erfarenhet är Envira Gallery det bästa WordPress-pluginet för att skapa lightbox-gallerier. Det är otroligt nybörjarvänligt, snabbt och fullpackat med kraftfulla funktioner.
För professionella fotografer som behöver mer avancerade portfölj- och bevisningsfunktioner är NextGEN Gallery ett annat utmärkt alternativ.
Kan jag lägga till en lightbox till standardgalleriet i WordPress utan ett plugin?
Standardblocket för gallerier i WordPress har ingen inbyggd lightbox-funktion. Även om du skulle kunna lägga till en med anpassad kod, kräver detta kunskap om CSS och JavaScript.
För de flesta användare är det enklast och säkrast att använda ett dedikerat plugin för att få ett professionellt resultat utan att behöva röra någon kod.
Kommer ett lightboxgalleri att sakta ner min webbplats?
Ett väloptimerat plugin som Envira Gallery är byggt för hastighet och bör inte sakta ner din webbplats. Det använder prestandafunktioner som lazy loading för bilder.
Du bör dock alltid optimera dina bilder för webben innan du laddar upp dem till WordPress för att säkerställa snabbast möjliga laddningstider.
Vi hoppas att den här artikeln hjälpte dig att lära dig hur du enkelt lägger till ett WordPress-galleri med en ljuslådeeffekt. Du kanske också vill se vår nybörjarguide om hur du gör grundläggande bildredigering i WordPress och våra experttips för bästa verktygen för att skapa bättre bilder för dina blogginlägg.
Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.
Jiří Vaněk
Tack för att du rekommenderade Envira Gallery. Jag bygger webbplatser i Elementor, och förutom Elementor kände jag bara till NextGen Gallery, som inte helt uppfyller mina krav. Jag kommer definitivt att prova pluginet och förmodligen ersätta NextGen Gallery som jag har använt med det.
Muhammad Danial Emran
Hej, jag vill fråga om användning av en lightbox-effekt kommer att påverka min webbplatshastighet.
WPBeginner Support
Det bör inte orsaka att din webbplats saktar ner.
Admin
Ahmed Omar
tack för inlägget, men här en fråga, skulle det göra någon skillnad om jag använde WordPress Block Editor för att lägga till ett fotogalleri jämfört med att använda Envira?
WPBeginner Support
Envira has more tools and customization options than the default gallery
Admin
E
Jag är så glad att jag hittade den här artikeln och den här webbplatsen. Älskar er just nu!
Lynsey
Jag älskar dig! Finns det något sätt att göra miniatyrbilderna mindre?
Redaktionell personal
Ja. Gå till Inställningar > Media. Redigera miniatyrstorleken. Ladda sedan ner ett plugin som heter Regenerate thumbnails. Kör det pluginet, och det är allt.
http://wordpress.org/extend/plugins/regenerate-thumbnails/
Admin
Sandeep Singh
Jag är verkligen tacksam för förslaget att lägga till lightbox-effekt i galleriet. Jag uppskattar verkligen den här typen av support och hoppas på detsamma i framtiden.
Mike
Hej,
Det här är jättebra, en fråga dock, finns det något plugin eller något annat som kan göra galleriet till ett bildspel? Till exempel, säg att de första bifogade bilderna visas stort och nedanför finns miniatyrbilderna av alla bilder i galleriet och du kan klicka på en bild för att ändra den stora bilden istället för en lightbox-effekt.
Tack,
Mike
Redaktionell personal
Inte säker på om ett sådant plugin existerar.
Admin
Renee
Ganska säker på att Fancybox-pluginet gör det. Du kan aktivera eller inaktivera ljusbox och miniatyrbilder.
Emma Beatty Howells
Tack för en bra lösning. Jag är ny på allt detta och försöker lista ut det enklaste sättet att hantera fotogallerier online – det här håller det enkelt och elegant! Något annat jag fann användbart var en app som vattenstämplar foton med minimal ansträngning... ‘ImageBucket’.
Tiaan
Tack, fungerar som en bomb!
Michael
Verkar tillräckligt enkelt. Finns det ett sätt att ha bildtexter under varje bild? Och när det öppnas till en lightbox, finns det ett sätt att ha beskrivande text i lightboxen med bilden?
Redaktionell personal
Det här pluginet borde kunna göra det du letar efter: http://wordpress.org/extend/plugins/gallery-and-caption/
Admin
Alex
Jag har en banderoll högst upp på min webbplats som visar en bild. När den öppnar lightboxen visas banderollen fortfarande över den. Finns det något sätt, en kod eller något, som stoppar detta?
Tack
Alex
Redaktionell personal
Händer troligen för att din banner har ett mycket högt z-index-värde inställt. Sänk det värdet i din CSS. Det finns många CSS-handledningar som täcker z-index på webben.
Admin
JulieBozza
Det här är en riktigt cool lösning, tack! Mycket snabbare och snyggare än vad jag höll på med…
Finns det dock ett sätt att välja vilken av bilderna som visas som huvudminiatyrbild? Det vill säga, miniatyrbilden som visas i 'flödet' innan man öppnar den enskilda postningen.
Tack på förhand!
wpbeginner
@JulieBozza Miniatyren för inlägget väljs med funktionen "Utvald bild". I din inläggsredigerare, titta på höger sida, under publiceringsknappen bör det finnas en ruta i den raden som heter "Utvald bild".
JulieBozza
@wpbeginner Hej! Tack för svaret. Tyvärr, när jag gör det ändras bannerbilden, men det påverkar inte miniatyrbilden i inlägget. Jag använder Twenty Eleven WordPress-temat, så kanske det ger bannern prioritet, som det var.
wpbeginner
@JulieBozza Du menar dessa miniatyrbilder i galleriet, eller hur???
JulieBozza
@wpbeginner LOL! Ja. Jag skapade galleripostningen precis som beskrivet ovan.
Jag vet inte om det skulle hjälpa att besöka själva postningen, men här är URL:en. Tänk på att webbplatsen är under utveckling!
http://rupertfyoung.com/2011/09/pierrefonds-september-2011/
wpbeginner
@JulieBozza Galleri fungerar som det ska.
http://rupertfyoung.com/category/gallery/ << Om du syftar på miniatyrbilden här, så styrs den av din Utvalda bild eller den första bilagan, tror jag. Ladda upp en utvald bild som har låg bredd (miniatyrstorlek eller något)... Och den kommer inte att ta över headerbilden.
wpbeginner
@ukdazza Problemet ligger hos din webbplats snarare än detta plugin. jQuery-problem som dessa är mycket vanliga. Det finns en annan jQuery som gör att detta plugin inte fungerar. Du skulle behöva ändra positionerna för den andra jQuery-koden.
Detta är ett spel av försök och misstag när du stöter på problem som dessa.
ukdazza
Jag har ett problem där vi använder slickr flickr-pluginet för att skapa miniatyrgallerier med lightbox-funktioner. Ljusboxen fungerar dock inte alls. Enligt de anteckningar jag hittar online om den här typen av problem med det här pluginet, är det troligt att det finns mer än en ljusbox eller mer än en jQuery som körs – vilket gör att den inte fungerar korrekt.
Lightbox fungerar inte. Om du klickar på en miniatyrbild öppnas bilden i webbläsaren, vilket är skräp.
Några idéer? Jag hoppades att du eller någon annan kanske hade en idé eftersom jag försökte installera det här pluginet och det stod att destinationen redan var upptagen.
TGA
Wow. Tack SÅ mycket. Jag använde NextGEN-galleriet, men fick inte låta min klient ha gallerier med miniatyrer av olika storlekar. (Dumb). Så jag insåg att om jag använde det inbyggda galleriet skulle det vara möjligt, men då skulle Highslide inte skapa en miniatyrvisare som det skulle med NextGEN. Poängen är att detta var en livräddare! Det kanske inte är perfekt, men det är EN lösning och nu kan jag gå vidare med projektet!
wpbeginner
@TejSanusi✔ Detta plugin har ett sätt för användare att se nästa bild som en del av samma lightbox.
TejSanusi✔
Finns det något sätt att skapa ett ljusboxgalleri som aktiveras från en miniatyrbild. När användaren klickar på miniatyrbilden skapas ljusboxen med en serie galleribilder?
cata
Pluginet som nämns i artikeln är ganska intressant. Jag har också testat detta med goda resultat http://wordpress.org/extend/plugins/lightbox-gallery/
Chris
Tack för den utmärkta texten. Jag fann den extremt användbar. Jag har dock en fråga. Vad händer om jag hade ett ganska stort galleri med cirka 40 eller 50 bilder och bara ville att en av dem skulle visas i inlägget, och sedan när någon klickar på den skulle de kunna bläddra igenom hela galleriet? Är detta möjligt? Jag skulle hellre inte vilja ha alla 40 bilder visade i mitt inlägg och jag tror att detta skulle vara användbart.
Tack!
Keith Davis
Bra jobbat grabbar.
Visste inte att Wordpress hade en gallerifunktion... vet ni allt?
Kanske faktiskt använder den här en dag.
jonathan perrodin
Hej tack för detta, jag har velat ha detta på min webbplats, men var för lat för att leta efter ett plugin som gjorde det enkelt. Detta var perfekt.
Mike Roberts
Jag är konstnär och illustratör och jag fortsätter att bli besviken över alternativen för att visa ett galleri med bilder i WordPress. Jag lever i hopp om att någon ljus kodare snart kommer att svara på min vädjan!
Gretchen
Jag insåg inte hur svårt det var att hitta ett lightbox-plugin som använde WordPress standardgalleri-funktion förrän jag började leta efter ett! Jag hamnade på http://wordpress.org/extend/plugins/lightbox-plus/ på grund av dess förmåga att specificera via kortkod i varje inlägg/sidas galleri om det skulle använda lightbox-inställningen eller inte. Jag gillar faktiskt att använda bilagesidor ibland, och behövde ett lightbox-plugin som skulle låta mig välja när jag skulle använda det. Jag skulle vara nyfiken på att höra om någon annan har hittat ett annat lightbox-plugin med den funktionen.
Bronson
Tack för informationen.
Det är bra att kunna applicera ljusboxeffekten på inbyggda gallerier istället för att behöva gå och manuellt återskapa dem.
Sonu
Hur fungerar detta? och behöver vi en lightbox-klass för varje bild i galleriet?
Redaktionell personal
Nej, du behöver inte lägga till lightbox-klassen till varje bild i galleriet. Det görs automatiskt för alla bilder i galleriet. Klassen bör läggas till på alla andra bilder du har förutom galleriet.
Admin
Binoy
Problemet här är att alla bilder i inlägget visas i galleriet. Finns det några alternativ för att välja bilder?
Redaktionell personal
Nej, det är inte möjligt ännu.
Admin
Leo
Hej! För att välja bilder att visa i galleriet, prova detta plugin: Multiple Galleries, du hittar det här > http://goo.gl/kNFer
Hejdå!
Redaktionell personal
Thanks for sharing this plugin. Updating the article to add this
Preston
Varje bild bör ha någon form av wordpress-nummer associerat med sig. Jag exkluderar bilder i galleriet med denna kod, förhoppningsvis fungerar det för dig:
[gallery link="file" exclude="Photo#, Photo#, Photo#"]