Genom att lägga till ett galleri med en (okno) lightbox-effekt kan du på ett 111111 vackert sätt visa upp dina bilder i ett större format.
Detta förbättrar användarinteraktionen, eftersom besökarna kan se bilderna utan att navigera bort från sidan, och gör webbplatsens innehåll mer dynamiskt.
Standardgalleriblocket i WordPress stöder dock inte lightboxar.
Under de senaste åren har vi använt Envira Gallery för att skapa bildgallerier med lightbox-effekter på våra testsajter och när vi bygger kundwebbplatser.
Vi har funnit att det är otroligt nybörjarvänligt och pålitligt, vilket gör det enkelt för alla att skapa fantastiska gallerier utan mycket teknisk kunskap.
I den här artikeln visar vi dig steg för steg hur du enkelt kan add to ett gallery i WordPress med lightbox-effekt.
Varför add to lightbox-effekten i WordPress Galleries?
Genom att lägga till en responsiv lightbox-effekt i gallerierna på din WordPress-webbplats kan du visa upp dina bilder på ett mer professionellt sätt. Med denna effekt kan du 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 view-upplevelse för dina besökare och gör det till och med enklare för dem att dela dina images på social media eller downloada dem till sina datorer.
Om du har en website för fotografier kan du aktivera en lightbox-effekt som gör att användarna kan viewa dina högupplösta images i ett distraktionsfritt läge, vilket ökar engagemanget.
På samma sätt, om du har en WooCommerce-butik, kan du lägga till en (okno) lightbox-effekt i dina produktgallerier som hjälper klienci att se produkten på nära håll och fatta ett välgrundat beslut.
Med detta sagt, låt oss se hur du enkelt kan add to ett WordPress image gallery med lightbox-effekt, steg för steg.
Så här addar du ett WordPress galleries med en lightbox-effekt
Du kan enkelt add to ett WordPress gallery med lightbox-effekt med hjälp av Envira Gallery.
Det är det bästa WordPress galleri plugin som tillåter dig att skapa fullt responsiva och moderna image gallerier för din website.
Envira Gallery är också supersnabb och har en drag and drop-byggare, professionella mallar för gallerier och många funktioner, inklusive att lägga till taggar, ljud, social delning och lightboxar.
Först måste du installera och aktivera plugin-programmet Envira Gallery. Detaljerade instruktioner finns i vår Step-by-Step guide om hur du installerar ett plugin för WordPress.
Note: Envira Gallery har också ett gratis plugin som du kan använda för denna tutorial. Men om du upgraderar till den betalda planen får du tillgång till fler funktioner.
Efter aktivering, besök Envira Gallery ” Settings page från WordPress admin sidebar för att enter license key.
Du kan få den här informationen från ditt account på Envira Gallerys website.
Efter det, besök Envira Gallery ” Add New page från WordPress dashboard för att börja skapa ditt eget nya gallery.
Här skriver du 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 klickar du på knappen ”Välj filer från andra källor”.
Detta kommer att starta mediabiblioteket där du kan uploada gallery images. Kom ihåg att du bara kan uploada en image från mediabiblioteket åt gången.
När du har gjort det rullar du ner till ”Currently in your Gallery” section. Här kommer du att se en preview av ditt gallery till höger med inställningar i den vänstra colonnen.
Klicka nu på pennikonen högst upp på varje image för att öppna prompten ”Edit Metadata” på vyn.
Härifrån kan du add to caption, status, rubrik och alt-text för enskilda images.
Glöm sedan inte att klicka på knappen ”Save Metadata” för att spara dina Settings.
Gå sedan till tabben ”Configuration” i den vänstra columnen för att ändra layouten på ditt gallery så som du gillar det. Härifrån kan du välja layout, antal Column, storlek på image, dimensioner, themes och mycket mer.
Detaljerade instruktioner hittar du i vår guide för nybörjare om hur du skapar ett image gallery i WordPress.
När du har gjort det, växla till fliken ”Lightbox” från den vänstra kolumnen och kontrollera alternativet ”Aktivera Lightbox?”.
Därefter väljer du ett lightbox-tema från dropdown-menyn ”Gallery Lightbox Theme”. Om du väljer alternativet ”Legacy” kommer lightbox-effektprompten att ha en äldre layout.
Om du väljer alternativet ”Base (Dark)” kommer lightboxen att ha en mörk bas som layout.
Därefter måste du välja om du vill visa titeln på imagen eller dess caption i lightbox-prompten. Du kan också visa båda eller ingen av dem om du gillar det.
När du har gjort det väljer du storleken på imagen för lightboxen i dropdown-menyn.
Därefter kontrollerar du alternativet ”Aktivera galleriepilar”. Lightboxen kommer nu att visa två pilar som tittarna kan använda för att växla till olika images i your gallery.
You can also configure other settings for your lightbox, including its transition effect, open/close effect, enable lightbox supersize, and more.
När du är klar, glöm inte att klicka på knappen ”Publicera” högst upp för att lagra dina ändringar.
För att add to your image gallery till en WordPress page/post, öppna page i block editor.
Här måste du klicka på knappen add block ’+’ högst upp till vänster på vyn för att öppna menyn för block. Lägg sedan till Envira Gallery-blocket på sidan / posten.
Därefter väljer du det image gallery som du just skapat från dropdown-menyn i själva blocket. Slutligen klickar du på knappen ”Update” eller ”Publicera” för att lagra dina settings.
Nu kan du besöka din WordPress blogg för att se bildgalleriet och sedan klicka på en bild för att se lightbox-effekten.
Alternativ: Använd NextGEN Gallery för att skapa portföljer och gallerier med images i WordPress
Envira Gallery är det bästa alternativet för att lägga till lightbox images på din WordPress website. Alternativt kan du använda NextGEN Gallery för att skapa fullt responsiva och visuellt tilltalande gallerier och portföljer på din WordPress site.
NextGEN Gallery är det bästa Envira Gallery-alternativet eftersom det stöder ett brett utbud av gallerityper, har e-handelsrelaterade funktioner och tillåter dig att lägga till vattenstämplar, lightboxar, bildkommentarer och mer.
Dessutom tillåter NextGEN Gallery dig att godkänna online-betalningar via Stripe eller PayPal, vilket gör det enkelt att sälja dina images online.
Det är ett avancerat plugin för gallerier med funktioner för professionella fotografer, grafiska formgivare och bildkonstnärer, vilket gör det till ett av de bästa tilläggen för WordPress portfölj på marknaden.
För detaljerade instruktioner kan du läsa vår tutorial om hur du lägger till en portfölj på din WordPress site.
Vi hoppas att den här artikeln hjälpte dig att lära dig hur du enkelt kan add to ett WordPress gallery med en lightbox-effekt. Du kanske också vill se vår Beginner’s guide om hur man gör grundläggande bildredigering i WordPress och våra expertval för de bästa tools för att skapa bättre images för dina blogginlägg.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Jiří Vaněk
Thanks for recommending Envira Gallery. I make websites on Elementor, and apart from Elemenotr, I only knew NextGen gallery, which does not completely meet my requirements. I will definitely give the plugin a try and probably replace the NextGen Gallery I’ve been using with it.
Muhammad Danial Emran
Hi, I want to ask if using a lightbox effect will affect my website speed.
WPBeginner Support
It should not cause your site to slow down.
Administratör
Ahmed Omar
thank you for the post, but here a question would it make difference if I used Using the WordPress Block Editor to add photo gallery than using Envira ?
WPBeginner Support
Envira has more tools and customization options than the default gallery
Administratör
E
I’m so glad I found this article and this website. Love you guys right now!
Lynsey
I love you! Is there any way to make the thumbnails smaller?
Editorial Staff
Yes. Go to Settings > Media. Edit the thumbnail size. Then download a plugin called Regenerate thumbnails. Run that plugin, and thats it.
http://wordpress.org/extend/plugins/regenerate-thumbnails/
Administratör
Sandeep Singh
I am really Thankful for the suggestion to add Lightbox effect to the gallery. I really appretiate such kind of support and hope same for the future.
Mike
Hello,
This is great, one question though is there a plugin or anything that is out there to make the gallery into a slideshow. For example say the first attached images shows up large and below are the thumbs of all the image in the gallery and you can click on a image to change the large image rather than a lightbox effect.
Thanks,
Mike
Editorial Staff
Not sure if a plugin like that exists.
Administratör
Renee
Pretty sure that Fancybox plugin does that. You can enable or disable lightbox and thumbnails.
Emma Beatty Howells
Thanks for a great solution I am new to all this and am trying to work out the easiest way to manage photogalleries on line – this keeps it simple and elegant! Something else I found useful was an App that watermarks photos with the minimum of fuss… ’ImageBucket’.
Tiaan
Thanks, works like a bomb!
Michael
Seems easy enough. Is there a way to have captions under each picture? Also, when it opens to a lightbox, is there a way to have descriptive text in the lightbox with the image?
Editorial Staff
This plugin should be able to do what you are looking for: http://wordpress.org/extend/plugins/gallery-and-caption/
Administratör
Alex
I have a banner at the top of my website which displays a picture. When it opens the lightbox, the banner still appears over it. Is there any way, a code or something, which will stop this?
Thanks
Alex
Editorial Staff
Probably happening because your banner has a very high z-index value set. Lower that value in your CSS. There are a lot of CSS tutorials covering z-index on the web.
Administratör
JulieBozza
This is a really cool solution, thank you! So much quicker and neater than what I was doing…
Is there a way, however, to choose which of the images appears as the main thumbnail? That is, the thumbnail that appears in the ’feed’ before you open up the individual post.
Thank you in anticipation!
wpbeginner
@JulieBozza The thumbnail for the post is selected by using Featured Image feature. In your post editor, look at the right hand side, below publish button there should be a box in that line called Featured image.
JulieBozza
@wpbeginner Hello! Thanks for the reply. Unfortunately when I do that, it changes the banner image, but has no effect on the thumbnail in the post. I’m using the Twenty Eleven WordPress theme, so perhaps it’s giving the banner the priority, as it were.
wpbeginner
@JulieBozza You are referring to these gallery thumbnail images right???
JulieBozza
@wpbeginner LOL! Yes. I created the gallery post exactly as described above.
I don’t know if it would help to visit the post itself, but here’s the URL. Keep in mind that the site is a work in progress!
http://rupertfyoung.com/2011/09/pierrefonds-september-2011/
wpbeginner
@JulieBozza The gallery works like it should.
http://rupertfyoung.com/category/gallery/ << If you are referring to the thumbnail image here, then that is controlled by your Featured Image or the first attachment I believe. Upload a featured image that is low in width (thumbnail size or something)… And it will not take over the header image.
wpbeginner
@ukdazza The problem is with your site rather than this plugin. jQuery issues like these are very common. There is another jQuery that is causing this plugin to not work. You would have to change positions of the other jQuery code.
This is a game of trial and error when you encounter problems like these.
ukdazza
I’m having a problem where we’re using slickr flickr plugin to create thumbnail galleries with lightbox features. However the lightbox isn’t working at all. According to the notes I can find online about this kind of problem with this plugin, it is likely there is more than one lightbox or more than one jQuery running – causing it to not run properly.
Lightbox doesn’t work. If you click a thumbnail it opens the image in the browser, which is rubbish.
Any ideas? I hoped you or someone might have an idea because I tried to install this plugin and it said the destination was already taken.
TGA
Wow. Thank you SO much. I was using NextGEN gallery, but wasn’t allowed to let my client have galleries with thumbnails of various sizes. (Dumb). So I realized using the native gallery that would be possible, but then Highslide wouldn’t create a thumbnail viewer like it would with NextGEN. Point being, this was a lifesaver! It may not be perfect, but it’s A solution and now I can move on with the project!
wpbeginner
@TejSanusi✔ This plugin has a way for users to view the next image as part of the same lightbox.
TejSanusi✔
Is there anyway to create a lightbox gallery that is enabled from one thumbnail. When the user clicks on the thumbnail, the lightbox is created, with a series of gallery images?
cata
Is quite interesting the plugin mentioned in the article. I have also tested with good results this one http://wordpress.org/extend/plugins/lightbox-gallery/
Chris
Thanks for the great writeup. I found this extremely useful. I do have a question though. What if I had a pretty large gallery of about 40 or 50 pics and I only wanted one of them displayed in the post and then when someone clicks on it they’d be able to scroll through the entire gallery? Is this possible? I’d rather not have all 40 pics displayed in my post and I think this would be useful.
Thanks!
Keith Davis
Nice one boys.
Never knew that Wordpress had a gallery function… do you guys know everything?
Might actually use this one day.
jonathan perrodin
Hey thanks for this, I’ve been wanting to get this on my site, but was too lazy to look for a plugin that did it simply. This was perfect.
Mike Roberts
I am an artist and illustrator and I continue to be disappointed by the options for displaying a gallery of images in WordPress. I live in hope that, sometime soon, some bright coder will answer my plea!
Gretchen
I didn’t realize how hard it was to find a lightbox plugin that used the native WordPress gallery function until I started looking for one! I ended up with http://wordpress.org/extend/plugins/lightbox-plus/ because of its ability to specify via shortcode in each post/page gallery whether it was to use the lightbox setting or not. I actually like to use the attachment pages sometimes, and needed a lightbox plugin that would allow me to choose when to use it. I’d be curious to hear if anyone else has found another lightbox plugin with that feature.
Bronson
Thanks for the information.
It’s great to be able to apply the lightbox effect to native galleries trather than having to go and manually recreate them.
Sonu
How this works ? and do we need a lightbox class to every image on gallery ?
Editorial Staff
No you don’t need to lightbox class every image on the gallery. It automatically does that for all images in the gallery. The class should be added on any other image that you have aside from the gallery..
Administratör
Binoy
The problem here is all the images in post show up on gallery. Any options to select images?
Editorial Staff
No that is not possible yet.
Administratör
Leo
Hi! To select the images to show in the gallery try this plugin: Multiple Galleries, you can find it here > http://goo.gl/kNFer
Bye!
Editorial Staff
Thanks for sharing this plugin. Updating the article to add this
Preston
Each image should have some kind of wordpress number associated with it. I exclude images in the gallery with this code, hopefully it works for you:
[gallery link="file" exclude="Photo#, Photo#, Photo#"]