Remarque : même si nos guides les plus populaires ont été traduits en français, certains guides sont uniquement disponibles en anglais.

Setting images to open in a lightbox

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.

Avant de commencer

  • Certaines fonctionnalités ne sont pas compatibles avec les lightboxes ou fonctionnent différemment lorsque les lightboxes sont activées. Par exemple, les lightboxes désactivent les URL de clics, dans la plupart des cas.
  • 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. Dans le Menu principal, cliquez sur Design, puis sur Couleurs.
  2. Cliquez sur Thèmes de section.
  3. Survolez le thème qui correspond à votre section de Galerie et cliquez sur l’icône crayon.
  4. Sous la section Galeries, choisissez une couleur avec l'outil de réglage Arrière-plan de la lightbox.
  5. Pour modifier la couleur des contrôles de navigation de la lightbox, utilisez le réglage Icône Lightbox .
  6. Cliquez sur Enregistrer.

Gardez à l'esprit que le texte de légende ne s'affiche pas dans la fenêtre de section de la galerie.

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. Sélectionnez Activer 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 .
  6. Cliquez sur Appliquer pour enregistrer vos modifications. 

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.

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.

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 vignettedans 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
  • 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
Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 31 sur 128