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 Library (página) | Abrir no Figma |
| Zoho Task | P894-T656 |
| Criada | 2026-04-21 |
| Aprovada | — |
| Aprovada por | — |
Screenshots de Referência
Section titled “Screenshots de Referência”Desktop (1440px)
Section titled “Desktop (1440px)”
Mobile (375px)
Section titled “Mobile (375px)”Abrir screenshot mobile (375px) em nova janela →
Variantes por hotel
Section titled “Variantes por hotel”
Links Figma: Desktop | Mobile | Todas as variantes
Descrição Geral
Section titled “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 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 é acionada quando o utilizador clica numa imagem ou vídeo noutro módulo do site (por exemplo, numa galeria de imagens ou hero slider opção ver video, ou slider image/video). Quando há vários itens associados, o utilizador pode percorrer a coleção através de setas laterais, teclado ou gesto de deslizar.
Para vídeos, o player apresentado é o nativo da plataforma onde o vídeo está alojado (ex: YouTube, Vimeo). Os controlos desenhados no Figma servem apenas como referência de posicionamento e proporções — não representam UI personalizada a desenvolver.
Os vídeos não reproduzem automaticamente ao abrir o lightbox. A reprodução pausa automaticamente ao fechar a janela.
Variantes
Section titled “Variantes”Variante 1 — Imagem única com contador
Section titled “Variante 1 — Imagem única com contador”Como visitante, 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:
- Clicar fora da imagem (no fundo colorido) fecha a janela
- Pressionar a tecla Escape fecha a janela
- O fundo cobre todo o ecrã e impede a interação com o resto da página, incluindo o scroll
- 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
Section titled “Variante 2 — Imagem com faixa de miniaturas”Como visitante, 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
Section titled “Variante 3 — Vídeo”Como visitante, 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 na viewport
- Player nativo da plataforma de alojamento do vídeo (ex: YouTube, Vimeo) com os seus controlos nativos
- 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 na maqueta são apenas exemplificativos
Critérios de Aceitação:
- O vídeo aparece centrado no ecrã sobre o fundo colorido
- O vídeo não começa a reproduzir automaticamente ao abrir o lightbox
- Os controlos do vídeo são os nativos da plataforma de alojamento — não são desenvolvidos como UI personalizada
- Ao fechar a janela, o vídeo pausa automaticamente
Variante 4 — Coleção mista (imagens e vídeo)
Section titled “Variante 4 — Coleção mista (imagens e vídeo)”Como visitante, 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:
- 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)
Section titled “Variante 5 — Item único (sem setas de navegação)”Como visitante, 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
Section titled “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
Section titled “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) | Ligação ou identificador do vídeo na plataforma de alojamento (ex: YouTube, Vimeo). O player apresentado será o nativo dessa plataforma — não é desenvolvida UI de reprodução personalizada. |
| ↳ Imagem de pré-visualização do vídeo | Imagem | Não | Imagem mostrada antes de o utilizador iniciar a reprodução. Se não for fornecida, usa a miniatura da plataforma. O vídeo não inicia automaticamente — o utilizador tem de clicar para 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
Section titled “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
Section titled “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
Section titled “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 |
Animação
Section titled “Animação”A janela tem uma animação de entrada e saída.
Referência: https://www.theonly.agency/artists/lindsey-hartman
Para utilizadores com prefers-reduced-motion ativo, a janela abre e fecha instantaneamente, sem transição.
Acessibilidade
Section titled “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
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 sites suportados:
- Savoy Palace
- Saccharum
- Calheta Beach
- Hotel Next
- Savoy Signature (site do grupo)
- Gardens (por desenvolver)
- The Reserve (por desenvolver)
- Royal Savoy (por desenvolver)
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.
Como Abrir a Lightbox
Section titled “Como Abrir a Lightbox”A Lightbox não tem posição fixa — é aberta a pedido a partir de qualquer elemento de ação configurado para a apontar:
- Qualquer CTA / botão / link / imagem ou vídeo clicável de outro módulo (Image Gallery, Hero Slider, Slider de imagem/vídeo, cartão, etc.) pode ser configurado para abrir a Lightbox.
- A Lightbox recebe do módulo de origem a lista de itens (imagem(ns) e/ou vídeo(s)) e o item inicial a apresentar.
Não existe um módulo “Lightbox” colocado diretamente numa página — é sempre acionada por outro elemento que aponta para ela.
Changelog
Section titled “Changelog”| Data | Estado | Descrição |
|---|---|---|
| 2026-05-18 | Revisão Rui Rosa | Revisto e validado por Rui Rosa. Pequenas alterações. |
| 2026-05-18 | Análise QA (Agentic QA) | Análise de incoerências, formatação, lógica, e conteúdo. Revisto e alterado. |
| 2026-05-14 | Revisão Design + Tech | Análise de Liliana Moreira e Rui Rosa comparando as recomendações de FA |
| 2026-05-11 | Revisão Functional Analyst | Análise e recomendações da equipa de Análise Funcional. |
| 2026-05-05 | Validação Design | Atualizado e validado por Liliana Moreira |
| 2026-04-21 | Rascunho | Versão inicial criada a partir do Figma |