Obs.: embora os nossos guias mais acessados tenham sido traduzidos para o português, outros guias estão disponíveis apenas em inglês.

Definir imagens para abrir em um lightbox

Um lightbox é um efeito de design que abre uma imagem em uma sobreposição centralizada e escurece o resto da página quando uma imagem é clicada. Clicar no x no canto superior a fecha e retorna à página. Os lightboxes são uma ótima maneira de destacar e ampliar imagens para os visitantes que desejam ver mais de perto.

Antes de começar

  • Alguns recursos não são compatíveis com lightboxes ou funcionam de forma diferente quando os lightboxes estão habilitados. Por exemplo, lightboxes desabilitam URLs de clickthrough na maioria dos casos.
  • O recurso de zoom com movimento de pinça não é suportado para imagens lightbox em dispositivos móveis.
  • Se o seu site estiver no Squarespace versão 7.0, as opções da Página de Galeria variam dependendo do template.

Alterar a cor de fundo do lightbox

Para seções de galeria na versão 7.1, você pode estilizar sua lightbox para qualquer cor no editor de temas de seção.

Na maioria dos outros casos, você pode escolher uma sobreposição Escura ou Clara para o lightbox nas configurações de bloqueio ou Estilos do Site. Para obter mais detalhes, consulte as seções sobre Blocos de Imagem, Blocos de Galeria e Páginas de Galeria.

Seção de galeria (versão 7.1)

As seções de galeria em layouts de grade na versão 7.1 têm uma opção de lightbox em estilos de seção. Para habilitar o lightbox:

  1. Clique em Editar na página, passe o cursor do mouse sobre a seção da galeria e clique no ícone de lápis.
  2. Verifique se o Tipo de Galeria está definido como Grade: Simples, Grade: Faixas ou Grade: Alvenaria. Os layouts de apresentação de slides não são compatíveis com recursos de lightbox.
  3. Ligue a opção Lightbox.
  4. Passe o cursor sobre Concluído e clique em Salvar.

Para estilizar a cor do lightbox:

  1. No Menu Inicial, clique em Design e depois em Cores.
  2. Clique em Temas de Seção.
  3. Passe o cursor do mouse sobre o tema que corresponde à seção da galeria e clique no ícone de lápis .
  4. Na seção Galerias, use o ajuste Fundo do lightbox para escolher uma cor de lightbox.
  5. Para alterar a cor dos controles de navegação do lightbox, use o ajuste do ícone do Lightbox.
  6. Clique em Salvar.

Lembre-se de que o texto da legenda não é exibido no lightbox da seção da galeria.

Blocos de Imagem

Os Blocos de Imagem usando o layout Inline oferecem suporte a uma lightbox. Para habilitá-lo:

  1. Adicione um Bloco de Imagemou clique duas vezes em um Bloco de Imagem atual para abrir o editor de imagens.
  2. Clique na aba Design.
  3. Verifique se o layout está definido como Inline. Outros layouts não são compatíveis com um lightbox.
  4. Marque Ativar lightbox.
  5. Escolha entre Sobreposição escura e Sobreposição clara para seu estilo lightbox com o menu suspenso Tema lightbox.
  6. Clique em Apply (Aplicar) para salvar suas alterações.

As legendas sempre são exibidas quando você passa o cursor do mouse sobre imagens de lightbox, independentemente da opção de exibição de legenda escolhida. No dispositivo móvel, eles são exibidos quando você toca no ícone de ponto.

Blocos de Galeria de Grade

Após adicionar suas imagens a um Bloco de Galeria de Grade, clique na aba Design e marque Lightbox. Defina o estilo da apresentação de slides de lightbox escolhendo Sobreposição escura ou Sobreposição escura no menu suspenso.

As legendas sempre são exibidas quando você passa o cursor do mouse sobre imagens de lightbox. No dispositivo móvel, eles são exibidos quando você toca no ícone de ponto. Apresentação em slides, Carrossel e Blocos de Galeria de Pilha não aceitam um lightbox.

Blocos de Sumário

Quando um Bloco de Sumário de Grade ou de Mural está vinculado a uma Página de Galeria, as imagens se abrem automaticamente em slideshow no lightbox. A cor do lightbox do Bloco de Sumário é sempre Escura. As legendas aparecem ao se passar o cursor.

A apresentação de slides do Lightbox afeta os URL de clickthrough:

  • Ao visualizar a página, as imagens com URL de clickthrough abrem o link de cliques quando clicadas, em vez de abrirem a apresentação de slides do Lightbox.
  • Com o slideshow do lightbox aberto, o URL de clickthrough é desativado.
Dica: se você estiver na versão 7.0 e vinculando um Bloco de Sumário a uma Página de Galeria, marque Usar Miniatura nos vídeos da Página de Galeria. Caso contrário, eles serão reproduzidos no Bloco de Sumário sem abrir em um lightbox.

Página de Galeria (versão 7.0)

As Páginas de Galeria de alguns templates na versão 7.0 aceitam uma funcionalidade lightbox. Para Páginas de Galeria padrão, você pode definir a cor do lightbox como Claro ou Escuro nos Estilos do Site. As descrições de vídeo não são exibidas no lightbox.

Para saber como as opções de lightbox funcionam nessas famílias de templates, consulte a tabela abaixo.

Família de template Opções do Lightbox
Adirondack
  • Página de Galeria definida como Grade
  • Exibição de legendas de imagem ao passar o mouse
Avenue
  • Sem Lightbox

Aviator

  • Página de Galeria definida como Grade
  • Os URLs de clickthrough desativam lightbox
  • Exibição de legendas de imagem ao passar o mouse

Bedford

  • Página de Galeria definida como Grade
  • Os URLs de clickthrough desativam lightbox
  • Exibição de legendas de imagem ao passar o mouse

Brine

  • Página de Galeria definida como Grade
  • Os URLs de clickthrough desativam lightbox
  • Exibição de legendas de imagem ao passar o mouse
  • Funciona apenas nas seções da Página Índice da galeria e somente em vídeos. Dica: clicar em um link na legenda do vídeo abre o lightbox, não o link.

Farro

  • Página de Galeria definida como Grade
  • Os URLs de clickthrough desativam lightbox
  • Exibição de legendas de imagem ao passar o mouse
Five
  • Página de Galeria definida como Grade
  • Os URLs de clickthrough desativam lightbox
  • Exibição de legendas de imagem ao passar o mouse
Flatiron
  • Sem Lightbox
Forte
  • Clique no ícone + no canto superior direito da imagem para abrir o lightbox
  • Desativado para Página Índice
  • As legendas não são exibidas
Galapagos
  • Página de Galeria definida como Grade
  • Os URLs de clickthrough desativam lightbox
  • Exibição de legendas de imagem ao passar o mouse
Ishimoto
  • Sem Lightbox
Momentum
  • Sem Lightbox

Montauk

  • Sem Lightbox
Native
  • Página de Galeria definida como Grade
  • Os URLs de clickthrough desativam lightbox
  • Exibição de legendas de imagem ao passar o mouse

Pacific

  • Página de Galeria definida como Grade
  • Os URLs de clickthrough desativam lightbox
  • Exibição de legendas de imagem ao passar o mouse
  • Compatível com seções da Página Índice da galeria de grade

Skye

  • Página de Galeria definida como Grade
  • Os URLs de clickthrough desativam lightbox
  • Desativado para Página Índice
  • Exibição de legendas de imagem ao passar o mouse
Supply
  • Sem Lightbox

Tremont

  • Sem Lightbox
Wells
  • Sem Lightbox
Wexley
  • Clique em uma imagem para abrir o slideshow em lightbox
  • O Lightbox está desativado nos dispositivos móveis
  • As legendas não são exibidas

York

  • Página de Galeria definida como Grade
  • Os URLs de clickthrough desativam lightbox
  • Exibição de legendas de imagem ao passar o mouse
Este artigo foi útil?
Utilizadores que acharam útil: 31 de 130
Definir imagens para abrir em um lightbox