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. Assurez-vous que le type de galerie soit 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 contrôles de navigation de la lightbox, utilisez le réglage Icône 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 cliquez 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. Add an Image Block, or double-click an existing Image Block to open the image editor.
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 les images de la lightbox, quelle que soit l'option d'affichage choisie pour la légende. Sur mobile, les légendes s'affichent lorsque vous appuyez sur l'icône de point.
• Si vous ajoutez des URL de destination et activez l’effet lightbox, la lightbox (et non pas l’URL) s’ouvrira lorsque vous cliquez 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 mises en page prennent aussi en charge les boutons.

Blocs Galerie en grille

Après avoir ajouté vos images à un bloc Galerie en grille, cliquez sur l'onglet Créeret cochez Lightbox . Définissez votre style de diaporama lightbox en choisissant Superposition foncée ou Superposition claire dans la liste déroulante.

Important :

• Les légendes restent affichées lorsque vous survolez les images de la lightbox. Sur mobile, celles-ci s'affichent lorsque vous appuyez sur l' icône de point. Les blocs de galerie Diaporama, Carrousel et Pile ne prennent pas en charge les lightbox.
• Si vous ajoutez des URL de destination et activez l’effet lightbox, la lightbox (et non pas l’URL) s’ouvrira lorsque vous cliquez sur l’image.
• Pour que les vidéos s’ouvrent dans une lightbox, veillez à activer la Miniature de vidéo dans les paramètres de votre élément.

Blocs Sommaire

Lorsqu'un bloc Sommaire en grille ou un bloc de Mur est connecté à une page de 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 lorsque la zone est survolée.

The lightbox slideshow affects clickthrough URLs:

• While viewing the page, images with clickthrough URLs open the clickthrough link when clicked, rather than opening the lightbox slideshow.
• Lorsque le diaporama lightbox est ouvert, les URL de clics sont désactivées.

Conseil : Dans 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 la 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 la lightbox, vos vidéos sont diffusées dans le bloc Sommaire et ne s’ouvriront dans une lightbox.

Pages Galerie (version 7.0)

Certaines pages Galerie de templates 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 Claire ou Foncée, dans les styles de 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	Lightbox options
Adirondack	Gallery Page set to Grid Image captions display on hover
Avenue	No lightbox
Aviator	Gallery Page set to Grid Clickthrough URLs disable lightbox Image captions display on hover
Bedford	Gallery Page set to Grid Clickthrough URLs disable lightbox Image captions display on hover
Brine	Gallery Page set to Grid Clickthrough URLs disable lightbox Image captions display on hover 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	Gallery Page set to Grid Clickthrough URLs disable lightbox Image captions display on hover
Five	Gallery Page set to Grid Clickthrough URLs disable lightbox Image captions display on hover
Flatiron	No lightbox
Forte	Click + icon in top-right corner of image to open lightbox Disabled for Index Page Captions don't display
Galapagos	Gallery Page set to Grid Clickthrough URLs disable lightbox Image captions display on hover
Ishimoto	No lightbox
Momentum	No lightbox
Montauk	No lightbox
Native	Gallery Page set to Grid Clickthrough URLs disable lightbox Image captions display on hover
Pacific	Gallery Page set to Grid Clickthrough URLs disable lightbox Image captions display on hover Supported on grid gallery Index Page sections
Skye	Gallery Page set to Grid Clickthrough URLs disable lightbox Disabled for Index Page Image captions display on hover
Supply	No lightbox
Tremont	No lightbox
Wells	No lightbox
Wexley	Cliquez sur une image pour ouvrir un diaporama lightbox Lightbox is disabled on mobile Captions don't display
York	Gallery Page set to Grid Clickthrough URLs disable lightbox Image captions display on hover