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 :
- Cliquez sur Modifier sur la page, puis survolez la section de la Galerie et cliquez sur l'icône en forme de crayon .
- 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.
- Activez l'option Lightbox.
- Survolez Terminé et cliquez sur Enregistrer.
Pour personnaliser la couleur de la lightbox :
- Pendant que vous modifiez une page, ouvrez le panneau Styles du site, puis cliquez sur Couleurs.
- Survolez le thème qui correspond à votre section de Galerie et cliquez sur l’icône crayon.
- Sous la section Galeries, choisissez une couleur avec l'outil de réglage Arrière-plan de la lightbox.
- Pour modifier la couleur des contrôles de navigation de la lightbox, utilisez le réglage Icône Lightbox .
- 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 :
- Add an Image Block, or double-click an existing Image Block to open the image editor.
- Cliquez sur l'onglet Design.
- Assurez-vous que votre disposition soit réglée sur Inline. Les autres dispositions ne prennent pas en charge une lightbox.
- Activez l'option Lightbox.
- 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.
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.
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 : si vous utilisez la version 7.0 et que vous associez un bloc Sommaire à une page Galerie, cochez l'option Utiliser une miniaturedans les vidéos de la page Galerie. Dans le cas contraire, les vidéos s'afficheront dans le bloc Sommaire, sans s'ouvrir 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 |
|
| Avenue |
|
|
Aviator |
|
|
Bedford |
|
|
Brine |
|
|
Farro |
|
| Five |
|
| Flatiron |
|
| Forte |
|
| Galapagos |
|
| Ishimoto |
|
| Momentum |
|
|
Montauk |
|
| Native |
|
|
Pacific |
|
|
Skye |
|
| Supply |
|
|
Tremont |
|
| Wells |
|
| Wexley |
|
|
York |
|