Möchten Sie eine Galerie in WordPress mit einem Lightbox-Effekt hinzufügen?
Der Leuchtkasten-Effekt ermöglicht es Nutzern, Ihre Bilder in einer ablenkungsfreien Umgebung zu betrachten, ohne Ihre Website zu verlassen. Der Standard-Galerie-Block von WordPress unterstützt jedoch keine Leuchtkästen.
In diesem Artikel zeigen wir Ihnen Schritt für Schritt, wie Sie in WordPress ganz einfach eine Galerie mit Lightbox-Effekt hinzufügen können.
Warum den Lightbox-Effekt in WordPress-Galerien einbauen?
Durch Hinzufügen eines responsiven Lightbox-Effekts zu den Galerien auf Ihrer WordPress-Website können Sie Ihre Bilder auf professionellere Weise präsentieren. Mit diesem Effekt können Sie Ihre Fotos in einem Pop-up-Fenster auf Ihrer Website anzeigen, wenn ein Nutzer darauf klickt.
Mit Hilfe von Leuchtkästen können Sie Ihren Besuchern ein intensiveres Seherlebnis bieten und es ihnen sogar erleichtern, Ihre Bilder in sozialen Medien zu teilen oder auf ihren Computer herunterzuladen.
Wenn Sie eine Fotografie-Website haben, können Sie einen Leuchtkasten-Effekt hinzufügen, der es den Nutzern ermöglicht, Ihre hochauflösenden Bilder in einem ablenkungsfreien Modus zu betrachten, was das Engagement erhöht.
Wenn Sie einen WooCommerce-Shop haben, können Sie Ihre Produktgalerien mit einem Lightbox-Effekt ausstatten, damit Ihre Kunden das Produkt aus der Nähe betrachten und eine fundierte Entscheidung treffen können.
Sehen wir uns nun an, wie man Schritt für Schritt eine WordPress-Bildergalerie mit Lightbox-Effekt einrichten kann.
Wie man eine WordPress-Galerie mit einem Leuchtkasten-Effekt hinzufügt
Mit Envira Gallery können Sie ganz einfach eine WordPress-Galerie mit Lightbox-Effekt hinzufügen.
Es ist das beste WordPress-Galerie-Plugin, mit dem Sie vollständig responsive und moderne Bildergalerien für Ihre Website erstellen können.
Envira Gallery ist außerdem superschnell und verfügt über einen Drag-and-Drop-Builder, professionelle Galerievorlagen und viele Funktionen, darunter das Hinzufügen von Tags, Audio, Social Sharing und Leuchtkästen.
Zunächst müssen Sie das Envira Gallery Plugin installieren und aktivieren. Eine detaillierte Anleitung finden Sie in unserer Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins.
Hinweis: Envira Gallery hat auch ein kostenloses Plugin, das Sie für dieses Tutorial verwenden können. Mit einem Upgrade auf den kostenpflichtigen Plan erhalten Sie jedoch Zugang zu mehr Funktionen.
Nach der Aktivierung besuchen Sie die Seite Envira Gallery “ Einstellungen in der WordPress-Admin-Seitenleiste, um den Lizenzschlüssel einzugeben.
Sie können diese Informationen über Ihr Konto auf der Envira Gallery Website abrufen.
Danach besuchen Sie die Seite Envira Gallery “ Add New im WordPress-Dashboard, um mit der Erstellung Ihrer eigenen neuen Galerie zu beginnen.
Geben Sie hier einen Titel für die Bildergalerie ein. Klicken Sie dann auf die Schaltfläche „Dateien von Ihrem Computer auswählen“, um Bilder hochzuladen. Wenn Sie Bilder aus der Mediathek zu Ihrer Galerie hinzufügen möchten, klicken Sie auf die Schaltfläche „Dateien aus anderen Quellen auswählen“.
Dadurch wird die Mediathek aufgerufen, aus der Sie Galeriebilder hochladen können. Denken Sie daran, dass Sie jeweils nur ein Bild aus der Mediathek hochladen können.
Wenn Sie das getan haben, scrollen Sie nach unten zum Abschnitt „Derzeit in Ihrer Galerie“. Hier sehen Sie auf der rechten Seite eine Vorschau Ihrer Galerie und in der linken Spalte die Einstellungen.
Klicken Sie nun auf das Stiftsymbol über jedem Bild, um die Eingabeaufforderung „Metadaten bearbeiten“ auf dem Bildschirm zu öffnen.
Von hier aus können Sie die Bildunterschrift, den Status, den Titel und den Alt-Text für einzelne Bilder hinzufügen.
Vergessen Sie anschließend nicht, auf die Schaltfläche „Metadaten speichern“ zu klicken, um Ihre Einstellungen zu speichern.
Wechseln Sie dann in der linken Spalte zur Registerkarte „Konfiguration“, um das Layout Ihrer Galerie nach Ihren Wünschen zu ändern. Hier können Sie ein Layout, die Anzahl der Spalten, die Bildgröße, die Abmessungen, die Themen und mehr auswählen.
Ausführliche Anleitungen finden Sie in unserem Leitfaden für Einsteiger zum Erstellen einer Bildergalerie in WordPress.
Wechseln Sie anschließend auf die Registerkarte „Leuchtkasten“ in der linken Spalte und aktivieren Sie die Option „Leuchtkasten aktivieren?“.
Wählen Sie anschließend ein Leuchtkasten-Thema aus dem Dropdown-Menü „Galerie-Lichtkasten-Thema“. Wenn Sie die Option „Legacy“ wählen, wird die Lightbox-Eingabeaufforderung ein älteres Layout haben.
Wenn Sie die Option „Basis (dunkel)“ wählen, wird die Eingabeaufforderung des Leuchtkastens eine dunkle Basis als Layout haben.
Als Nächstes müssen Sie auswählen, ob Sie den Bildtitel oder die Bildunterschrift in der Eingabeaufforderung des Leuchtpults anzeigen möchten. Wenn Sie möchten, können Sie auch beides oder nichts davon anzeigen.
Wählen Sie anschließend die Bildgröße für den Leuchtkasten aus dem Dropdown-Menü.
Aktivieren Sie anschließend die Option „Galeriepfeile aktivieren“. In der Eingabeaufforderung des Leuchtkastens werden nun zwei Pfeile angezeigt, mit denen die Betrachter zu verschiedenen Bildern in Ihrer Galerie wechseln können.
Sie können auch andere Einstellungen für Ihren Leuchtkasten konfigurieren, z. B. den Übergangseffekt, den Öffnungs-/Schließungseffekt, die Aktivierung der Übergröße des Leuchtkastens und vieles mehr.
Wenn Sie fertig sind, vergessen Sie nicht, oben auf die Schaltfläche „Veröffentlichen“ zu klicken, um Ihre Änderungen zu speichern.
Um Ihre Bildergalerie zu einer WordPress-Seite/einem WordPress-Beitrag hinzuzufügen, öffnen Sie die Seite im Block-Editor.
Hier müssen Sie auf die Schaltfläche „+“ in der oberen linken Ecke des Bildschirms klicken, um das Blockmenü zu öffnen. Als Nächstes fügen Sie den Envira-Galerie-Block zu der Seite/dem Beitrag hinzu.
Wählen Sie anschließend die soeben erstellte Bildergalerie aus dem Dropdown-Menü im Block selbst aus. Klicken Sie schließlich auf die Schaltfläche „Aktualisieren“ oder „Veröffentlichen“, um Ihre Einstellungen zu speichern.
Jetzt können Sie Ihren WordPress-Blog besuchen, um die Bildergalerie zu sehen, und dann auf ein beliebiges Bild klicken, um den Lightbox-Effekt zu sehen.
Alternative: Verwenden Sie NextGen Gallery zum Erstellen von Bildportfolios und Galerien in WordPress
Envira Gallery ist die beste Option für das Hinzufügen von Lightbox-Bildern zu Ihrer WordPress-Website. Alternativ können Sie NextGEN Gallery verwenden, um vollständig responsive und visuell ansprechende Galerien und Portfolios auf Ihrer WordPress-Website zu erstellen.
NextGEN Gallery ist die beste Alternative zu Envira Gallery, da sie eine breite Palette von Galerietypen unterstützt, über eCommerce-Funktionen verfügt und Ihnen das Hinzufügen von Wasserzeichen, Leuchtkästen, Bildkommentaren und mehr ermöglicht.
Außerdem können Sie mit NextGEN Gallery Online-Zahlungen über Stripe oder PayPal akzeptieren, was den Online-Verkauf Ihrer Bilder erleichtert.
Es ist ein fortschrittliches Galerie-Plugin mit Funktionen für professionelle Fotografen, Grafikdesigner und bildende Künstler, was es zu einem der besten WordPress-Portfolio-Plugins auf dem Markt macht.
Eine ausführliche Anleitung finden Sie in unserem Tutorial zum Hinzufügen eines Portfolios zu Ihrer WordPress-Website.
Wir hoffen, dass dieser Artikel Ihnen geholfen hat, zu lernen, wie Sie eine WordPress-Galerie mit Lightbox-Effekt hinzufügen können. Vielleicht interessieren Sie sich auch für unseren Leitfaden für Einsteiger zur grundlegenden Bildbearbeitung in WordPress und unsere Expertenauswahl für die besten Tools zur Erstellung besserer Bilder für Ihre Blogbeiträge.
Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Jiří Vaněk says
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 says
Hi, I want to ask if using a lightbox effect will affect my website speed.
WPBeginner Support says
It should not cause your site to slow down.
Admin
Ahmed Omar says
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 says
Envira has more tools and customization options than the default gallery
Admin
E says
I’m so glad I found this article and this website. Love you guys right now!
Lynsey says
I love you! Is there any way to make the thumbnails smaller?
Editorial Staff says
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/
Admin
Sandeep Singh says
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 says
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 says
Not sure if a plugin like that exists.
Admin
Renee says
Pretty sure that Fancybox plugin does that. You can enable or disable lightbox and thumbnails.
Emma Beatty Howells says
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 says
Thanks, works like a bomb!
Michael says
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 says
This plugin should be able to do what you are looking for: http://wordpress.org/extend/plugins/gallery-and-caption/
Admin
Alex says
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 says
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.
Admin
JulieBozza says
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 says
@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 says
@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 says
@JulieBozza You are referring to these gallery thumbnail images right???
JulieBozza says
@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 says
@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 says
@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 says
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 says
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 says
@TejSanusi✔ This plugin has a way for users to view the next image as part of the same lightbox.
TejSanusi✔ says
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 says
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 says
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 says
Nice one boys.
Never knew that WordPress had a gallery function… do you guys know everything?
Might actually use this one day.
jonathan perrodin says
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 says
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 says
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 says
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 says
How this works ? and do we need a lightbox class to every image on gallery ?
Editorial Staff says
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..
Admin
Binoy says
The problem here is all the images in post show up on gallery. Any options to select images?
Editorial Staff says
No that is not possible yet.
Admin
Leo says
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 says
Thanks for sharing this plugin. Updating the article to add this
Preston says
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#"]