Use o efeito lightbox para abrir imagens sobrepostas ao fundo esmaecido.

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.

Assista a este vídeo

Antes de começar

• 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. Veja se o Tipo de galeria está como Grade: simples, Grade: tirass ou Grade: tijolos. O layout de slideshow não aceita o recurso de lightbox.
3. Ligue a opção Lightbox.
4. Clique em Salvar para salvar as alterações e continuar editando; ou em Sair e depois Salvar para fechar o editor.

Para estilizar a cor do lightbox:

1. Ao editar uma página, abra Estilos do Site e clique em Cores.
2. Passe o cursor do mouse sobre o tema que corresponde à seção da galeria e clique no ícone de lápis .
3. Na seção Galerias, use o ajuste Fundo do lightbox para escolher a cor do lightbox.
4. Para alterar a cor dos controles de navegação do lightbox, use o ajuste no ícone do Lightbox.
5. Clique em Salvar para salvar as alterações e continuar editando; ou em Sair e depois Salvar para fechar o editor.

Lembre-se:

• O texto da legenda não é exibido na lightbox da seção de galeria.
• Se você adicionar URLs de clickthrough a imagens e depois ativar a lightbox, o clique na imagem vai para o URL. A lightbox não se abrirá.

Blocos de Imagem

O bloco de imagens aceita lightbox quando:

• Se usa o layout Inline (nos sites 7.0 e nas seções 7.1 no editor clássico)
• Se adiciona uma seção do Editor Intuitivo 

Para ativar uma 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. Se o bloco tiver a opção de layout, veja se ela está como Inline. Os outros layouts não aceitam lightbox.
4. Ligue a opção Lightbox.
5. Escolha entre Sobreposição escura e Sobreposição clara para seu estilo lightbox com o menu suspenso Tema lightbox.

Lembre-se:

• As legendas sempre aparecem quando você passa o cursor sobre a imagem lightbox, independentemente da opção da legenda escolhida. Na versão móvel, elas aparecem quando você toca no ícone de ponto.
  
  • Blocos de imagens adicionados a uma seção do Editor Intuitivo não aceitam legendas nas imagens. Você pode usar o bloco de texto para adicionar um texto ao lado ou sobreposto ao bloco de imagens. O texto não aparece na lightbox. 
• Não é possível ativar a lightbox se você adicionar um URL de clickthrough.
• Para manter os lightboxes ativados e criar um link nas imagens, adicione um link de texto à descrição da imagem. No Bloco de Imagem, determinados layouts também aceitam botões.

Blocos de Galeria de Grade

Após adicionar suas imagens a um Bloco de Galeria em grade, clique na aba Design e marque Lightbox. Para especificar o estilo da apresentação de slides no lightbox, escolha Sobreposição escura ou Sobreposição clara no menu suspenso.

Lembre-se:

• As legendas sempre aparecem quando você passa o cursor sobre uma imagem lightbox. Na versão móvel, elas aparecem quando você toca no ícone de ponto.
• Slideshow, Carrossel e Blocos de Galeria empilhados não suportam um lightbox.
• Se você adicionar URLs de clickthrough e ativar o lightbox, clicar na imagem abrirá o lightbox em vez do URL.
• Para abrir um vídeo no lightbox, ative a opção Usar miniatura nas configurações do item.

Blocos de Sumário

Quando um bloco de sumário em grade ou em mural é 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: nos sites 7.0 que aceitam efeito lightbox, é possível ativar vídeos adicionados à Página de Galeria para abrirem em um lightbox no Bloco de Sumário. Para ativar essa opção, ative Miniatura de vídeo nas configurações do item nos vídeos da Página de Galeria. Se você não ativar a opção; ou se o template não aceitar lightbox, os vídeos são reproduzidos no Bloco de Sumário, sem abrir no 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.