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

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. Um clique no x no canto superior fecha o efeito e regressa à página. As Lightboxes são uma ótima maneira de destacar imagens, permitindo que os visitantes as ampliem.

Você pode definir imagens para abrir em lightboxes em Blocos de Imagens e Blocos de Galeria em grade. As páginas de Galeria de alguns modelos usam as lightboxes por padrão.

Antes de começar

Alguns recursos não são compatíveis ou funcionam de forma diferente quando as imagens são definidas para abrir em um lightbox.

Por exemplo, para Blocos de Imagens e Blocos de Galeria:

  • Legendas - As legendas sempre são exibidas quando você passa o mouse sobre imagens lightbox, independentemente da opção de exibição de legendas que você escolher. Em dispositivos móveis, eles são exibidos quando você toca no ícone do ponto.
  • URLs de clickthrough - As lightboxes desativam os URLs de clickthrough.
  • Zoom móvel - O recurso de usar os dedos para ampliar não compatível com as imagens em lightboxes nos dispositivos móveis.

As opções da Página de Galeria variam de acordo com o modelo.

Posso alterar a cor de fundo do lightbox?

Em um Bloco de Imagem ou Bloco de Galeria de Grade, você pode escolher entre duas sobreposições diferentes para cada lightbox:

  • Escolha Sobreposição escura para obter uma cor de fundo preta.
  • Escolha Sobreposição clara para obter uma cor de fundo branca.

Nas páginas de Galeria definidas como Grade, você pode definir as Lightboxes como Clara (branca) ou Escura (preta) na seção Estilos de Galeria dos Estilos do Site.

Lightbox com blocos de imagem

O Bloco de Imagem é compatível com diversos layouts. Somente o layout Inline é compatível com o Lightbox:

  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. Veja se o layout está como Inline.
  4. Marque Ativar lightbox.
  5. Escolha o estilo de lightbox com o menu suspenso Tema do lightbox.

Lightbox com blocos de galeria de grade

Depois de adicionar suas imagens a um Bloco de Galeria de Grade, clique na guia Design e marque Lightbox. Defina o estilo de apresentação de slides do lightbox escolhendo Sobreposição escura ou Sobreposição clara na lista suspensa.

Observação: as Lightboxes não estão disponíveis nos Slideshows, nos Blocos de Galeria, no Carrossel nem no Stack Gallery.

Lightbox com bloco de sumário

Quando um Bloco de Sumário de Parede ou Grade é conectado a uma Página de Galeria, as imagens são abertas automaticamente em uma apresentação de slides no Lightbox. A cor da Lightbox do bloco de resumo é sempre Escura. As legendas são exibidas quando o mouse é pousado.

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.
  • Quando a apresentação de slides do Lightbox está aberta, os URL de clickthrough são desativados.
Observação: marque Usar miniatura nos vídeos adicionados a uma página de galeria para garantir que sejam abertos em uma Lightbox do bloco de resumo. Se a opção Usar miniatura estiver desmarcada, os vídeos serão reproduzidos no Bloco de Resumo de Grade sem abrir em uma apresentação de slides no Lightbox.

Lightbox com Páginas de Galeria

Para o Squarespace versão 7.0, veja como as opções do Lightbox funcionam nessas famílias de modelos.

  • As descrições de vídeo não são exibidas na Lightbox.
  • Para Páginas de Galeria padrão, você pode definir a cor do lightbox como Claro ou Escuro nos Estilos do Site.
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
  • Compatível com seções de página de índice de galeria somente para vídeos. Dica: um clique 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

Lightbox com seções de galeria

Nas seções de galeria em layouts de grade no Squarespace versão 7.1, é possível adicionar uma opção lightbox em estilos de seção.

Na versão 7.1, lembre-se: 

  • Estilize a cor do lightbox no editor de Temas de Seção.
  • As lightboxes não são suportadas nos layouts de apresentação de slides.
  • As Lightboxes não têm texto de legenda.
Este artigo foi útil?
Utilizadores que acharam útil: 31 de 127
Definir imagens para abrir em um lightbox