M15 — Lightbox

Janela em sobreposição que apresenta uma imagem ou um vídeo em grande formato, permitindo ao utilizador observar o conteúdo com destaque total sem sair da página. É aberta quando o utilizador clica numa imagem ou vídeo noutro módulo e fecha-se com um clique no botão X, na tecla Escape ou clicando fora do conteúdo.

Campo	Valor
Módulo	M15 — Lightbox
Estado	Rascunho
Figma Desktop	Abrir no Figma
Figma Mobile	Abrir no Figma
Figma Variantes	Abrir no Figma
Zoho Task	P894-T656
Criada	2026-04-21
Aprovada	—
Aprovada por	—

Screenshots de Referência

Desktop (1440px)

Mobile (375px)

Todas as variantes e temas

Links Figma: Desktop | Mobile | Todas as variantes

Descrição Geral

O Lightbox é uma janela de visualização em sobreposição que mostra uma imagem ou vídeo em tamanho grande sobre um fundo escurecido (ou colorido de acordo com o tema do hotel). Serve para dar destaque máximo a um conteúdo visual sem obrigar o utilizador a navegar para outra página.

A janela é aberta quando o utilizador clica numa imagem ou vídeo em qualquer outro módulo do site (por exemplo, numa galeria de imagens, num botão de vídeo promocional, ou num card com fotografia). Quando há vários itens associados, o utilizador pode percorrer a coleção através de setas laterais, teclado ou gesto de deslizar.

O Lightbox é usado em páginas de quartos, restaurantes, spa, galerias gerais e em qualquer contexto onde a fotografia ou o vídeo merecem uma vista em primeiro plano.

Variantes

Variante 1 — Imagem única com contador

Como utilizador, quero ver uma imagem em tamanho grande sobre um fundo limpo, para apreciar o detalhe da fotografia sem distrações e saber em que posição estou dentro de uma coleção.

Elementos visíveis:

Fundo colorido (cor definida pelo tema do hotel) que preenche todo o ecrã
Imagem centrada no ecrã, com dimensões generosas
Botão para fechar (X, canto superior direito)
Botão para abrir em ecrã inteiro do dispositivo (canto superior direito, ao lado do X)
Seta à esquerda para imagem anterior
Seta à direita para imagem seguinte
Contador no fundo centrado (ex: “1 / 4”)

Critérios de Aceitação:

O fundo cobre todo o ecrã e impede a interação com o resto da página
A imagem aparece centrada e com o maior tamanho possível sem sair dos limites do ecrã
As setas esquerda/direita permitem percorrer todas as imagens da coleção
O contador mostra corretamente a posição atual e o total (ex: “3 / 12”)
Clicar no X fecha a janela
Clicar fora da imagem (no fundo colorido) fecha a janela
Pressionar a tecla Escape fecha a janela

Variante 2 — Imagem com faixa de miniaturas

Como utilizador, quero ver uma barra com pequenas pré-visualizações de todas as imagens disponíveis, para poder saltar diretamente para a imagem que me interessa sem ter de passar uma a uma.

Elementos visíveis:

Mesmos elementos da variante 1
Faixa horizontal de miniaturas no fundo da janela
A miniatura correspondente à imagem atualmente visível aparece destacada

Critérios de Aceitação:

A faixa de miniaturas aparece alinhada na parte inferior da janela
Ao clicar numa miniatura, a imagem principal muda para a correspondente
A miniatura ativa está visualmente destacada (cor/borda)
A faixa pode ser percorrida lateralmente quando há mais miniaturas do que cabem no ecrã

Variante 3 — Vídeo

Como utilizador, quero ver um vídeo em grande formato com controlos de reprodução familiares, para assistir a conteúdo promocional sem sair da página.

Elementos visíveis:

Fundo colorido (tema do hotel)
Área de vídeo centrada
Botão para fechar (X, canto superior direito)
Botão para abrir em ecrã inteiro do dispositivo (ao lado do X)
Controlos de reprodução na parte inferior do vídeo:
- Botão de reproduzir/pausar
- Tempo decorrido e tempo total (ex: “0:00 / 0:30”)
- Barra de progresso
- Botão de volume
- Botão de ecrã inteiro do vídeo

Critérios de Aceitação:

O vídeo aparece centrado no ecrã sobre o fundo colorido
Os controlos do vídeo (reproduzir, pausar, volume, tempo, ecrã inteiro) funcionam corretamente
O vídeo pode ser pausado e retomado
Ao fechar a janela, o vídeo pausa automaticamente
O vídeo não começa a reproduzir com som alto (respeita o volume do dispositivo)

Variante 4 — Coleção mista (imagens e vídeo)

Como utilizador, quero percorrer uma coleção onde alguns itens são imagens e outros são vídeos, para explorar todo o conteúdo multimédia num único fluxo.

Elementos visíveis:

Mesmos controlos das variantes anteriores
Ao navegar para um vídeo, aparecem os controlos de reprodução
Ao navegar para uma imagem, os controlos de vídeo desaparecem
O contador continua a funcionar para toda a coleção

Critérios de Aceitação:

A navegação entre imagens e vídeos é fluída
Quando o utilizador passa para outro item, o vídeo anterior pausa automaticamente
O contador considera todos os itens (imagens + vídeos) como parte do mesmo conjunto

Variante 5 — Item único (sem setas de navegação)

Como utilizador, quero ver apenas a imagem ou vídeo que escolhi sem setas desnecessárias, quando não há mais itens para navegar.

Elementos visíveis:

Fundo colorido
Imagem ou vídeo único no centro
Apenas botão para fechar e botão para ecrã inteiro
Sem setas laterais
Sem contador

Critérios de Aceitação:

As setas esquerda/direita não aparecem quando há só um item
O contador não aparece quando há só um item
A janela mantém as funcionalidades de fecho e ecrã inteiro

Interações do Utilizador

Este é um módulo interativo. O utilizador pode:

Interação	Descrição
Clicar na seta direita	Avança para o item seguinte da coleção
Clicar na seta esquerda	Recua para o item anterior
Pressionar a seta direita do teclado	Avança para o item seguinte
Pressionar a seta esquerda do teclado	Recua para o item anterior
Clicar numa miniatura (quando existe faixa)	Salta diretamente para o item correspondente
Deslizar o dedo para a esquerda (telemóvel)	Avança para o item seguinte
Deslizar o dedo para a direita (telemóvel)	Recua para o item anterior
Clicar no botão X	Fecha a janela e volta para a página anterior
Pressionar a tecla Escape	Fecha a janela
Clicar fora do conteúdo (no fundo colorido)	Fecha a janela
Clicar no botão de ecrã inteiro	Expande o conteúdo para usar todo o ecrã do dispositivo
Clicar no botão de reproduzir (vídeo)	Inicia ou retoma a reprodução
Clicar no botão de pausa (vídeo)	Pausa a reprodução
Clicar na barra de progresso (vídeo)	Salta para a posição correspondente do vídeo
Clicar no botão de volume (vídeo)	Silencia ou retoma o som

Ao fechar a janela, o foco do teclado regressa automaticamente ao elemento que abriu o Lightbox (por exemplo, à imagem ou botão onde o utilizador clicou), para facilitar a continuação da navegação.

Enquanto a janela está aberta, o resto da página não pode ser utilizado — nem o scroll da página, nem o foco do teclado saem da janela, até que esta seja fechada.

Elementos

Este módulo não tem conteúdo próprio gerido no backoffice — funciona como uma janela genérica que recebe o conteúdo de outros módulos (por exemplo, de uma Image Gallery M12).

Quando é acionado, recebe os seguintes dados:

Elemento	Tipo	Obrigatório	Descrição
Lista de itens	Lista de conteúdo multimédia	Sim	Imagens e/ou vídeos a apresentar. Cada item tem os subcampos abaixo:
↳ Tipo de item	Imagem ou Vídeo	Sim	Determina que controlos mostrar
↳ Imagem (computador)	Imagem	Sim (para itens do tipo Imagem)	Versão otimizada para ecrã grande
↳ Imagem (telemóvel)	Imagem	Sim (para itens do tipo Imagem)	Versão otimizada para ecrã pequeno
↳ Vídeo	Ficheiro de vídeo ou ligação	Sim (para itens do tipo Vídeo)	O vídeo a reproduzir
↳ Imagem de pré-visualização do vídeo	Imagem	Não	Imagem mostrada antes de o vídeo começar a reproduzir
↳ Descrição	Texto curto	Sim	Texto alternativo para leitores de ecrã
Item inicial	Número	Não	Indica por qual item começar (por defeito, o primeiro)

Nota: O Lightbox não tem conteúdo estático próprio. É acionado por outros módulos (como a Image Gallery ou um card com imagem). O editor gere as imagens e vídeos nesses módulos de origem.

Opções de Configuração

Opções disponíveis para personalizar o comportamento do módulo:

Opção	Valores possíveis	Valor padrão	Descrição
Mostrar faixa de miniaturas	Sim / Não	Não	Quando ativa, mostra miniaturas de todos os itens na parte inferior da janela
Mostrar contador	Sim / Não	Sim	Quando ativa, mostra a posição atual (ex: “3 / 12”)
Permitir ecrã inteiro	Sim / Não	Sim	Quando ativa, o botão de ecrã inteiro aparece junto ao botão de fechar
Ativar/Desativar	Ativo / Inativo	Ativo	Permite desativar o Lightbox em todo o site sem o apagar

Estas opções são definidas pelo editor em cada módulo que aciona o Lightbox (por exemplo, a Image Gallery decide se mostra a faixa de miniaturas no Lightbox ao abrir).

Comportamento Responsive

Elemento	Ecrã grande (computador)	Ecrã pequeno (telemóvel)
Fundo colorido	Ocupa todo o ecrã	Ocupa todo o ecrã
Imagem / Vídeo	Centrado, com tamanho generoso (quase a largura total, menos margens)	Centrado, ajustado à largura do ecrã, com margens laterais menores
Setas de navegação	Visíveis nas laterais esquerda e direita	Não aparecem — a navegação faz-se por gesto de deslizar ou tocar nas extremidades
Contador	Por baixo da imagem/vídeo, centrado	Por baixo da imagem/vídeo, centrado
Botão X e botão de ecrã inteiro	No canto superior direito	No canto superior direito
Faixa de miniaturas	Mostra muitas miniaturas alinhadas	Mostra 3-4 miniaturas, com deslocamento horizontal para ver as restantes
Controlos do vídeo	Barra completa com tempo, volume e ecrã inteiro	Barra adaptada, com todos os elementos essenciais

Estados Visuais

Estado	Descrição
A abrir	A janela aparece com uma transição suave (desvanecimento + ligeiro aumento de escala)
Inicial	A imagem ou vídeo aparece centrado, com todos os controlos visíveis
A fechar	A janela desaparece com uma transição suave
Ao passar o rato numa seta	A seta destaca-se visualmente (tamanho, contraste, ou pequena animação)
Ao passar o rato no X ou no botão de ecrã inteiro	O ícone destaca-se ligeiramente
Ao passar o rato numa miniatura	A miniatura aparece ligeiramente mais clara ou destacada
Miniatura ativa	A miniatura correspondente ao item visível tem um destaque permanente (borda, contorno ou opacidade maior)
Primeiro item	A seta esquerda desaparece ou fica esbatida (não navega para antes do primeiro)
Último item	A seta direita desaparece ou fica esbatida (não navega para depois do último)
Imagem a carregar	Aparece um indicador discreto enquanto a imagem não termina de carregar
Vídeo em reprodução	A barra de progresso avança; o botão principal mostra “pausa”
Vídeo em pausa	O botão principal mostra “reproduzir”; a barra de progresso mantém a posição
Preferência de menos animação	As transições de entrada/saída tornam-se mais subtis ou instantâneas

Acessibilidade

A janela é anunciada como “janela de diálogo” pelos leitores de ecrã
Ao abrir a janela, o foco do teclado é automaticamente movido para o primeiro elemento interativo dentro dela (normalmente o botão X)
Ao fechar a janela, o foco regressa ao elemento que a abriu, para que o utilizador não perca a orientação
O foco do teclado fica “preso” dentro da janela — não sai para o resto da página enquanto a janela estiver aberta
A tecla Escape fecha a janela em qualquer momento
As setas do teclado (esquerda/direita) permitem navegar entre itens
Todas as imagens têm uma descrição alternativa para leitores de ecrã
Os vídeos suportam legendas quando fornecidas
O botão X, as setas e os controlos do vídeo têm indicação visual clara quando estão selecionados pelo teclado
O contraste entre os controlos e o fundo cumpre os requisitos de acessibilidade visual, em todos os temas
O scroll da página por trás da janela fica bloqueado para evitar que o utilizador perca a posição
Utilizadores que preferem menos animação (configuração do sistema) veem transições mais subtis ou sem movimento

Temas

O módulo adapta-se visualmente a cada hotel: a cor de fundo da janela e o destaque dos controlos seguem a identidade visual do hotel.

Os 8 hotéis suportados:

Savoy Signature
Savoy Palace
Royal Savoy
Saccharum
The Reserve
Calheta Beach
Gardens
Hotel Next

Diferenças visuais observadas entre temas:

Savoy Palace — Fundo castanho dourado, controlos em branco
Saccharum — Fundo roxo escuro, controlos em branco
Calheta Beach — Fundo verde-azulado (teal), controlos em branco, imagens com cantos ligeiramente arredondados; barra de progresso do vídeo em vermelho-terracota
Hotel Next — Fundo azul-claro (turquesa), controlos em tons escuros, cantos mais arredondados
Savoy Signature — Fundo azul-marinho escuro, controlos em branco; barra de progresso do vídeo em dourado

Em todos os temas, a estrutura e comportamento do Lightbox mantêm-se idênticos — apenas a cor do fundo, os detalhes dos controlos e os cantos dos elementos variam.

Changelog

Data	Estado	Descrição
2026-04-21	Rascunho	Versão inicial criada a partir do Figma
2026-04-21	Publicada	Publicada no Docmost (nova página)