Lightbox Personalizado - moderno, gestos de deslizamento, modo de tela cheia e mais

[Don]

|||
|-|-|-|
| | Pré-visualização| Theme Creator |
| |Repositório| GitHub - VaperinaDEV/discourse-custom-lightbox |
| |Guia de Instalação|Como instalar um tema ou componente de tema|
| |Novo em Temas do Discourse?| Guia para iniciantes no uso de Temas do Discourse

Olá

Este componente de tema modifica o magnific popup (lightbox/galeria) para torná-lo mais amigável, especialmente no celular.

---

Este componente fará muitas alterações no magnific popup padrão.

• Design mais moderno
• Botão de tela cheia (atalho tecla F)
• Botão para mostrar/ocultar título
• Gestos de deslizar com o toque
• deslizar para a direita - imagem anterior
• deslizar para a esquerda - próxima imagem
• deslizar para baixo - fechar lightbox

---

Traduções de tema para alterar o título dos botões.

zoom_in_button_title: "Ampliar"
zoom_out_button_title: "Reduzir"
close_button_title: "Fechar (Esc)"
fullscreen_button_title: "Modo tela cheia (F)"
toggle_title_button_title: "Alternar Informações"

---

Este novo lightbox personalizado, inspirado em New Discourse Lightbox Enabled on Meta - now disabled

---

Ainda quer usar a versão antiga?
Você pode com o branch old-custom-lightbox.

[Mr.X_Mr.X]

Seria ótimo se a rolagem pudesse ser feita deslizando para a esquerda e para a direita. Fora isso, ótimo tc.

[Don]

Obrigado! Sim, seria ótimo, mas infelizmente o Magnific Popup não suporta gestos de deslizar.

[Don]

Atualizei o componente de tema e o OP.

[Don]

Olá

Atualizei este componente de tema

Esta atualização contém o seguinte:

1. Remover jQuery
2. Alterar a cor do tema para preto quando a lightbox abrir. (por exemplo, a barra de status também ficará preta como o fundo da lightbox)
3. Atualizar para ícones FontAwesome 6.
4. Usar cursores zoom-in e zoom-out na imagem.

Adicionei um link de prévia ao OP.

[davidkingham]

Muito bom Don, haveria alguma chance de você adicionar uma opção para mover as setas, o botão de download e a contagem de imagens para fora da imagem? Em um site de fotografia, não é bom cobrir partes da foto, queremos ver a foto inteira sem distrações. Sem problemas se não for possível, obrigado!

[Don]

Obrigado David, vou procurar uma solução

A ideia é criar um novo botão de informações para mostrar/ocultar as informações da imagem, como download, imagem original, título e talvez um contador.

[davidkingham]

Obrigado Don, eu estava pensando mais assim:

Mas também mover as setas para fora da imagem, isso exigiria que a imagem fosse menor para ter algum preenchimento nas bordas para isso.
A outra opção seria ocultar todas as informações até que o cursor se movesse, não tenho certeza se isso é possível.

[Don]

Tive alguma inspiração de como ele se organiza com a nova caixa de luz e fiz um conceito

Acho que algo assim provavelmente pode funcionar.

1. simplificar botões, mudar posições, setas menores
2. adicionar botão de tela cheia e botão de informações para mostrar informações inferiores

[davidkingham]

Adorei! Espero que você consiga fazer funcionar

[Don]

Aqui está a atualização para este componente de tema Ainda não foi mesclado, mas você pode experimentar como funciona no Theme Creator.

Alterações como mencionei neste post Custom Lightbox - modern, swipe gestures, fullscreen mode and more - #9 by Don.

1. Botão de tela cheia (você também pode ativá-lo com a tecla F)
2. Botão mostrar/ocultar título
3. Mostrar apenas o ícone de zoom-out quando você deu zoom.
4. Ocultar setas no celular
5. Também adicionei ações de deslizar o dedo para torná-lo mais confortável de usar em dispositivos touchscreen.
   • deslizar para a direita - imagem anterior
   • deslizar para a esquerda - próxima imagem
   • deslizar para baixo - fechar lightbox
6. Alguns ajustes de UX

Esta atualização também removerá as configurações.

[davidkingham]

Parece bom, Don! O único problema que estou vendo é que, quando clico nas setas anterior/próxima, a caixa de luz fecha. Se você usar as setas do teclado, funciona como esperado. Tentei em vários navegadores e o comportamento é o mesmo.

[Don]

@davidkingham

quando clico nas setas anterior/próxima, ele fecha a lightbox

Obrigado, eu corrigi agora. Você pode verificar?

[davidkingham]

Funcionando agora!

[Don]

Olá

Eu mesclei a nova lightbox personalizada

Atualizei o OP também…

FEATURE: New custom lightbox

[Don]

Olá

Eu mesclei um recurso ausente para dispositivos de toque: FEATURE: Change image click behaviour to toggle zoom on touchscreen · VaperinaDEV/discourse-custom-lightbox@7d588e2 · GitHub

A navegação da imagem está funcionando com gestos de deslizar, então agora podemos usar o clique na imagem para alternar zoom in/out.

[Don]

Olá

Aqui está uma nova atualização!

Esta atualização inclui várias melhorias de design:

• Removido o preenchimento ao redor do lightbox
• Imagens pequenas agora também podem ser ampliadas
• Novo design de botão com fundo preto transparente, tornando os botões visíveis em imagens claras, etc.

---

Melhoria no desktop:

A rolagem de imagem ampliada no desktop, especialmente a rolagem horizontal, não era muito fácil ou amigável.
Esta atualização introduz um mecanismo de rolagem que segue o cursor para melhorar a experiência.

---

DEV: Adds cursor follow mechanism for scrolling on desktop and some design update