Configurer les images pour s’ouvrir avec un effet lightbox

Activez les effets lightbox pour ouvrir les images dans une superposition avec un arrière-plan estompé.

Dernière mise à jour le 30 janvier 2025

Un lightbox est un effet de conception qui ouvre une image en superposition centrée et estompe le reste de la page lorsque vous cliquez sur l'image. En cliquant sur la x, en haut à droite, l'image est fermée et vous revenez à la page. Les lightbox sont un excellent moyen de mettre en évidence et d'agrandir les images pour les utilisateurs souhaitant voir le produit de plus près.

Regarder une vidéo

Avant de commencer

Modifier la couleur d'arrière-plan du lightbox

Pour les sections Galerie de la version 7.1, vous pouvez personnaliser votre lightbox avec nʼimporte quelle couleur dans lʼéditeur Thèmes de section.

Dans la plupart des autres cas, vous pouvez choisir une superposition foncée ou claire pour la lightbox. Cela se fait dans les paramètres du bloc ou dans les Styles du site. Pour plus de détails, veuillez consulter les sections sur les blocs Image, les blocs Galerieet les pages Galerie.

sections Galerie (version 7.1)

Les sections Galerie dans les dispositions en grille de la version 7.1 ont une option lightbox incluse dans les styles de section. Pour activer la lightbox :

  1. Cliquez sur Modifier sur la page, puis survolez la section de la Galerie et cliquez sur l'icône en forme de crayon .
  2. Vérifiez que le type de galerie est défini sur Grille : Simple, Grille : Bandes ou Grille : Mosaïque. Les dispositions Diaporama ne prennent pas en charge les fonctionnalités de lightbox.
  3. Activez l'option Lightbox.
  4. Cliquez sur Enregistrer pour enregistrer vos changements et poursuivre les modifications. Vous pouvez aussi cliquer sur Quitter puis sur Enregistrer pour fermer l’éditeur.

Pour personnaliser la couleur de la lightbox :

  1. Pendant que vous modifiez une page, ouvrez le panneau Styles du site, puis cliquez sur Couleurs.
  2. Survolez le thème qui correspond à votre section Galerie et cliquez sur l’icône crayon.
  3. Sous la section Galeries, choisissez une couleur à l’aide du réglage Arrière-plan de l’effet lightbox.
  4. Pour modifier la couleur des commandes de navigation de votre lightbox, utilisez le réglage Icône lightbox.
  5. Cliquez sur Enregistrer pour enregistrer vos changements et poursuivre les modifications. Vous pouvez aussi cliquer sur Quitter puis sur Enregistrer pour fermer l’éditeur.

Important :

  • Le texte de la légende ne s’affiche pas dans la lightbox de la section Galerie.
  • Si vous ajoutez des URL de destination aux images avant d’activer l’effet lightbox, l’URL s’ouvrira lorsque vous cliquerez sur l’image. La lightbox, elle, ne s’ouvrira pas.

Blocs Image

Les blocs Image prennent en charge un effet lightbox dans les cas suivants :

  • Utilisation de la disposition Inline (sur les sites utilisant la version 7.0 et les sections 7.1 avec l’éditeur classique)
  • Ajout à une section de l’Éditeur intuitif 

Pour activer une lightbox :

  1. Ajoutez un bloc Image ou double-cliquez sur un bloc Image existant pour ouvrir l'éditeur d'images.
  2. Cliquez sur l'onglet Design.
  3. Si votre bloc comporte une option de mise en page, assurez-vous qu’elle est définie sur Inline. Les autres mises en page ne prennent pas en charge l’effet lightbox.
  4. Activez l'option Lightbox.
  5. Choisissez entre Superposition foncée et Superposition claire pour le style de votre lightbox, dans le menu déroulant Thème de lightbox .

Important :

  • Les légendes s’affichent toujours lorsque vous survolez une image lightbox, quelle que soit l’option d’affichage choisie pour la légende. Sur les appareils mobiles, elles s’affichent lorsque vous appuyez sur l’icône point.
    • Les blocs Image ajoutés aux sections de l’Éditeur intuitif ne prennent pas en charge les légendes d’images. Vous pouvez utiliser un bloc Texte pour ajouter du texte adjacent à un bloc Image ou pour le superposer au bloc. Ce texte ne s’affichera pas dans la lightbox. 
  • Il est impossible d’activer l’effet lightbox si vous ajoutez une URL de destination.
  • Pour que les lightboxes restent activées et pour ajouter des liens aux images, ajoutez un lien hypertexte à la description de l’image. En ce qui concerne les blocs Image, certaines dispositions permettent aussi l’utilisation de boutons.

Blocs Galerie en grille

Après avoir ajouté vos images à un bloc Galerie en grille, cliquez sur l’onglet Designet sélectionnez Lightbox . Définissez votre style de diaporama lightbox en choisissant Superposition sombre ou Superposition claire dans la liste déroulante.

Important :

  • Les légendes s'affichent toujours lorsque vous survolez une image de lightbox. Sur mobile, elles s'affichent lorsque vous appuyez sur l'icône point.
  • Les blocs Diaporama, Carrousel et Stack Gallery ne sont pas compatible avec un effet lightbox.
  • Si vous ajoutez des URL de destination et que vous activez l’effet lightbox, la lightbox (et non pas l’URL) s’ouvrira lorsque vous cliquerez sur l’image.
  • Pour que les vidéos s’ouvrent dans une lightbox, activez l’option Utiliser Miniature dans les paramètres de l’élément.

Blocs Sommaire

Lorsqu’un bloc Sommaire en mur ou en grille est connecté à une page Galerie, les images s’ouvrent automatiquement dans un diaporama lightbox. La couleur du bloc Sommaire de la lightbox est toujours foncée. Les légendes s’affichent en cas de survol.

Le diaporama lightbox affecte les URL de destination :

  • Lorsque vous consultez la page, les images comportant des URL de destination ouvrent le lien de destination lorsque vous cliquez dessus, au lieu d’ouvrir le diaporama lightbox.
  • Lorsque le diaporama lightbox est ouvert, les URL de clics sont désactivées.

Astuce

sur les sites de la version 7.0 qui prennent en charge la fonctionnalité lightbox, vous pouvez activer l’ouverture des vidéos ajoutées aux pages Galerie dans une lightbox dans les blocs Sommaire. Pour ce faire, activez l’option Miniature de vidéo dans les paramètres de l’élément pour les vidéos de votre page Galerie. Si vous n’activez pas cette option ou si votre template ne prend pas en charge l’effet lightbox, vos vidéos sont diffusées dans le bloc Sommaire et ne s’ouvriront pas dans une lightbox.

Pages Galerie (version 7.0)

Dans certains templates, les pages Galerie de la version 7.0 prennent en charge la fonctionnalité lightbox. Pour les pages Galerie standard, vous pouvez définir la couleur de la lightbox sur Clair ou Sombre dans le panneau Styles du site. Les descriptions vidéo ne s’affichent pas dans la lightbox.

Pour savoir comment les options lightbox fonctionnent dans ces groupes de templates, veuillez consulter le tableau ci-dessous.

Famille de templates Options d’effet lightbox
Adirondack
  • Page Galerie définie sur Grille
  • Les légendes des images s’affichent en cas de survol
Avenue
  • Pas d’effet lightbox

Aviator

  • Page Galerie définie sur Grille
  • Les URL de destination désactivent les lightboxs
  • Les légendes des images s’affichent en cas de survol

Bedford

  • Page Galerie définie sur Grille
  • Les URL de destination désactivent les lightboxs
  • Les légendes des images s’affichent en cas de survol

Brine

  • Page Galerie définie sur Grille
  • Les URL de destination désactivent les lightboxs
  • Les légendes des images s’affichent en cas de survol
  • Prise en charge sur les sections de la page Index de la galerie pour les vidéos uniquement. Conseil : en cliquant sur un lien dans la légende de la vidéo, c'est la lightbox qui s'affiche, et non le lien.

Farro

  • Page Galerie définie sur Grille
  • Les URL de destination désactivent les lightboxs
  • Les légendes des images s’affichent en cas de survol
Five
  • Page Galerie définie sur Grille
  • Les URL de destination désactivent les lightboxs
  • Les légendes des images s’affichent en cas de survol
Flatiron
  • Pas d’effet lightbox
Forte
  • Cliquez sur l’icône + en haut à droite d’une image pour ouvrir une lightbox
  • Désactivé pour la page Index
  • Les légendes ne s’affichent pas
Galapagos
  • Page Galerie définie sur Grille
  • Les URL de destination désactivent les lightboxs
  • Les légendes des images s’affichent en cas de survol
Ishimoto
  • Pas d’effet lightbox
Momentum
  • Pas d’effet lightbox

Montauk

  • Pas d’effet lightbox
Native
  • Page Galerie définie sur Grille
  • Les URL de destination désactivent les lightboxs
  • Les légendes des images s’affichent en cas de survol

Pacific

  • Page Galerie définie sur Grille
  • Les URL de destination désactivent les lightboxs
  • Les légendes des images s’affichent en cas de survol
  • Prise en charge des sections de page Index Galerie en grille

Skye

  • Page Galerie définie sur Grille
  • Les URL de destination désactivent les lightboxs
  • Désactivé pour la page Index
  • Les légendes des images s’affichent en cas de survol
Supply
  • Pas d’effet lightbox

Tremont

  • Pas d’effet lightbox
Wells
  • Pas d’effet lightbox
Wexley
  • Cliquez sur une image pour ouvrir un diaporama lightbox
  • L’effet lightbox est désactivé sur mobile
  • Les légendes ne s’affichent pas

York

  • Page Galerie définie sur Grille
  • Les URL de destination désactivent les lightboxs
  • Les légendes des images s’affichent en cas de survol
Footer Image
  • Obtenir de l’aide de notre communauté

  • Obtenez de l’aide sur les personnalisations avancées auprès de notre communauté.

  • Trouver un Squarespace Expert

  • Démarquez-vous en ligne avec l’aide d’un designer ou d’un développeur expérimenté.

Configurer les images pour s’ouvrir avec un effet lightbox