Voulez-vous ajouter une galerie dans WordPress avec un effet de visionneuse ?
L’effet lightbox permettra aux utilisateurs de visualiser vos images dans un environnement sans distraction, sans quitter votre site web. Cependant, le bloc de galerie par défaut de WordPress ne prend pas en charge les boîtes lumineuses.
Dans cet article, nous allons vous afficher comment ajouter facilement une galerie dans WordPress avec un effet visionneuse, étape par étape.
Pourquoi ajouter l’effet visionneuse dans les galeries WordPress ?
En ajoutant un effet responsive lightbox aux galeries de votre site web WordPress, vous pouvez présenter vos images de manière plus professionnelle. Cet effet vous permet d’afficher vos photos dans une fenêtre contextuelle sur votre site web lorsqu’un utilisateur clique dessus.
Les visionneuses aident à créer une expérience de vue plus immersive pour vos internautes et leur permettent même de partager plus facilement vos images sur les réseaux sociaux ou de les télécharger sur leur ordinateur.
Si vous avez un site de photographie, alors l’ajout d’un effet visionneuse permettra aux utilisateurs/utilisatrices de voir vos images en haute résolution dans un mode sans distraction, ce qui augmentera l’engagement.
De même, si vous avez une boutique WooCommerce, l’ajout d’un effet « lightbox » à vos galeries de produits peut aider les clients à voir le produit de près et à prendre une décision éclairée.
Ceci étant dit, voyons comment ajouter facilement une galerie d’images WordPress avec un effet lightbox, étape par étape.
Comment ajouter une galerie WordPress avec un effet de visionneuse
Vous pouvez facilement ajouter une galerie WordPress avec un effet visionneuse en utilisant Envira Gallery.
C’est la meilleure extension de galerie WordPress qui vous permet de créer des galeries d’images entièrement responsive et modernes pour votre site.
Envira Gallery est également très rapide et dispose d’un constructeur par glisser-déposer, de modèles de galeries professionnels et de nombreuses fonctionnalités, notamment l’ajout de balises, d’audio, de partage social et de boîtes lumineuses.
Tout d’abord, vous devez installer et activer l’extension Envira Gallery. Pour des instructions détaillées, consultez notre guide étape par étape sur l’installation d’une extension WordPress.
Remarque : Envira Gallery dispose également d’un plugin gratuit que vous pouvez utiliser pour ce tutoriel. Cependant, le passage à l’offre payante vous permettra d’accéder à davantage de fonctionnalités.
Une fois activé, visitez la page Envira Gallery » Réglages à partir de la colonne latérale de l’administrateur WordPress pour saisir la clé de licence.
Vous pouvez obtenir ces informations à partir de votre compte sur le site de la galerie Envira.
Ensuite, visitez la page Envira Gallery » Add New du tableau de bord de WordPress pour commencer à créer votre propre galerie.
À partir de là, saisissez un titre pour la galerie d’images. Ensuite, cliquez sur le bouton « Sélectionner des fichiers à partir de votre ordinateur » pour télécharger des images. Si vous souhaitez ajouter des images de la bibliothèque multimédia à votre galerie, cliquez sur le bouton « Sélectionner des fichiers à partir d’autres sources ».
Cela lancera la bibliothèque de médias à partir de laquelle vous pourrez télécharger les images de la galerie. N’oubliez pas que vous ne pouvez télécharger qu’une seule image à la fois à partir de la bibliothèque multimédia.
Une fois que vous avez fait cela, faites défiler vers le bas jusqu’à la section « Actuellement dans votre galerie ». Ici, vous verrez un aperçu de votre galerie sur la droite avec les paramètres dans la colonne de gauche.
Cliquez ensuite sur l’icône représentant un crayon en haut de chaque image pour ouvrir l’invite « Modifier les métadonnées » à l’écran.
À partir de là, vous pouvez ajouter la légende, l’état, le titre et le texte alt pour les images individuelles.
Ensuite, n’oubliez pas de cliquer sur le bouton « Enregistrer les métadonnées » pour stocker vos réglages.
Ensuite, passez à l’onglet « Configuration » dans la colonne de gauche pour modifier la présentation de votre galerie à votre convenance. A partir de là, vous pouvez sélectionner une mise en page, le nombre de colonnes, la taille de l’image, les dimensions, les thèmes, et plus encore.
Pour des instructions détaillées, consultez notre guide du débutant sur la création d’une galerie d’images dans WordPress.
Une fois cela fait, passez à l’onglet « Lightbox » dans la colonne de gauche et cochez l’option « Enable Lightbox ?
Ensuite, sélectionnez un thème de visionneuse dans le menu déroulant « Thème de visionneuse de la galerie ». Si vous choisissez l’option « Ancien », l’invite de l’effet visionneuse aura une mise en page plus ancienne.
En choisissant l’option « Base (foncée) », l’invite de la visionneuse aura une base foncée comme mise en page.
Ensuite, vous devez sélectionner si vous souhaitez afficher le titre de l’image ou sa légende dans l’invite de la visionneuse. Vous pouvez également afficher les deux ou aucun des deux si vous le souhaitez.
Une fois que vous avez fait cela, choisissez la taille de l’image pour la visionneuse dans le menu déroulant.
Ensuite, cochez l’option « Activer les flèches de la galerie ». L’invite de la visionneuse affichera désormais deux flèches que les spectateurs pourront utiliser pour passer à différentes images de votre galerie.
Vous pouvez également définir d’autres réglages pour votre visionneuse, notamment son effet de transition, son effet d’ouverture/fermeture, l’activation du surdimensionnement de la visionneuse, etc.
Une fois que vous avez terminé, n’oubliez pas de cliquer sur le bouton « Publier » en haut de la page pour stocker vos modifications.
Pour ajouter votre galerie d’images à une page/une publication WordPress, ouvrez la page dans l’éditeur de blocs.
Ici, vous devez cliquer sur le bouton d’ajout de bloc ‘+’ dans le coin supérieur gauche de l’écran pour ouvrir le menu de bloc. Publication suivante : ajoutez le bloc Envira Gallery à la page ou à la publication.
Ensuite, sélectionnez la galerie d’images que vous venez de créer dans le menu déroulant du bloc lui-même. Enfin, cliquez sur le bouton « Mettre à jour » ou « Publier » pour stocker vos Réglages.
Maintenant, vous pouvez visiter votre blog WordPress pour voir la galerie d’images et cliquer sur n’importe quelle image pour voir l’effet visionneuse.
Alternative : Utilisez NextGen Gallery pour créer des portfolios et des galeries d’images dans WordPress
Envira Gallery est la meilleure option pour ajouter des images visionneuses à votre site WordPress. Alternativement, vous pouvez utiliser NextGEN Gallery pour créer des galeries et des portfolios entièrement responsive et visuellement agréables sur votre site WordPress.
NextGEN Gallery est la meilleure alternative à Envira Gallery car elle supporte une large plage de types de galeries, possède des fonctionnalités liées à l’e-commerce et vous permet d’ajouter des filigranes, des visionneuses, des commentaires sur les images, et bien plus encore.
En outre, NextGEN Gallery vous permet d’accepter les paiements en ligne via Stripe ou PayPal, ce qui facilite la vente de vos images en ligne.
C’est un plugin de galerie avancé avec des fonctionnalités destinées aux photographes professionnels, aux graphistes et aux artistes visuels, ce qui en fait l’un des meilleurs plugins WordPress de portfolio sur le marché.
Pour des instructions détaillées, vous pouvez consulter notre tutoriel sur l ‘ajout d’un portfolio à votre site WordPress.
Nous espérons que cet article vous a aidé à apprendre comment ajouter facilement une galerie WordPress avec un effet visionneuse. Vous pouvez également consulter notre guide du débutant sur la façon de modifier les images de base sur WordPress et nos choix d’experts pour les meilleurs outils pour créer de meilleures images pour vos publications de blog.
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.
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.
Administrateur
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
Administrateur
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/
Administrateur
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.
Administrateur
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/
Administrateur
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.
Administrateur
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..
Administrateur
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.
Administrateur
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#"]