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

• La fonctionnalité de pincer pour zoomer n'est pas prise en charge pour les images lightbox sur les appareils mobiles.
• Si votre site est utilise la version 7.0 de Squarespace, les options de la page Galerie varient en fonction du template utilisé.

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

Pour les sections de 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 d'image, les blocs Galerieet les pages Galerie.

Sections de 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. Survolez Terminé et cliquez sur Enregistrer.

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 de Galerie et cliquez sur l’icône crayon.
3. Sous la section Galeries, choisissez une couleur avec l'outil de réglage Arrière-plan de la lightbox.
4. Pour modifier la couleur des commandes de navigation de votre lightbox, utilisez l'icône de réglage de Lightbox.
5. Cliquez sur Enregistrer.

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 d'image utilisant la mise en page Inline prennent en charge une lightbox. Pour l'activer :

1. Ajoutez un bloc d'image ou double-cliquez sur un bloc d'image existant pour ouvrir l'éditeur d'images.
2. Cliquez sur l'onglet Design.
3. Assurez-vous que votre disposition soit réglée sur Inline. Les autres dispositions ne prennent pas en charge une 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 restent affichées 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 de point.
• 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 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 Miniature de vidéo 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.

Conseil : 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 d'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 + dans le coin supérieur droit d'une image pour ouvrir une lightbox Désactivé pour la page d'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 d'index Galerie en grille
Skye	Page Galerie définie sur Grille Les URL de destination désactivent les lightboxs Désactivé pour la page d'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