mkdocs glightbox

MkDocs GLightbox

Um plugin MkDocs suporta lightbox de imagem com GLightbox.

GLightbox é uma biblioteca lightbox javascript pura com suporte móvel.

Demonstração ao vivo com Material para MkDocs.

Dependência

1. Arquivo javascript GLightbox e arquivo CSS
   1. GLightbox==3.2.0

Uso

1. Instale o plugin do PyPI

   pip install mkdocs-glightbox

2. Adicione o plugin glightbox às seções de plugins mkdocs.yml:

    plugins :
      - glightbox

3. Todas as imagens serão adicionadas ao efeito lightbox automaticamente, exceto imagens em uma tag âncora e imagens emoji de extensões pymdown.

4. Você pode personalizar o plugin passando opções em mkdocs.yml:

    plugins :
      - glightbox :
          touchNavigation : true
          loop : false
          effect : zoom
          slide_effect : slide
          width : 100%
          height : auto
          zoomable : true
          draggable : true
          skip_classes :
            - custom-skip-class-name
          auto_caption : false
          caption_position : bottom
          background : white
          shadow : true
          manual : false

   Opção	Padrão	Descrição
   touchNavigation	verdadeiro	Ative ou desative a navegação por toque (deslizar).
   laço	falso	Loop de slides no final.
   efeito	ampliar	Nome do efeito na lightbox aberta. (zoom, fade, nenhum)
   efeito_slide	deslizar	Nome do efeito no slide lightbox. (deslizar, zoom, fade, nenhum)
   largura	auto	Largura para elementos embutidos e iframes. Você pode usar qualquer unidade, por exemplo, 90% ou 100vw para largura total.
   altura	auto	Altura para elementos inline e iframes. Você pode usar qualquer unidade, por exemplo 90%, 100vh ou automático.
   ampliável	verdadeiro	Ative ou desative imagens com zoom.
   arrastável	verdadeiro	Ative ou desative o arrastar do mouse para ir ao slide anterior e seguinte.
   pular_classes	[ ]	Desative o lightbox dessas imagens com nome de classe personalizado específico.
   legenda automática	falso	Ative ou desative o uso automático de alt da imagem como título da legenda.
   posição_da legenda	fundo	Posição padrão das legendas. (inferior, superior, esquerda, direita)
   fundo	branco	O CSS de fundo da imagem lightbox. O fundo será mostrado quando a imagem estiver transparente. Você pode usar qualquer valor CSS para o plano de fundo, por exemplo #74b9ff ou Gainsboro ou none por nada.
   sombra	verdadeiro	Ative ou desative a sombra da imagem lightbox. Desative-o quando o fundo não for none para evitar sombras ao redor da imagem transparente.
   manual	falso	Quando verdadeiro, o lightbox deve ser habilitado para cada imagem manualmente adicionando a classe on-glb a ela ou adicionando glightbox: true meta na página.

   Confira mais informações sobre opções no GLightbox Docs.

5. Para mais flexibilidade:

   1. Desabilitar por imagem: Desabilite o lightbox para imagens específicas. Adequado para algumas imagens que não precisam do efeito lightbox.
   2. Desativar por página: desativa o lightbox para páginas específicas. Adequado para algumas páginas que não precisam do efeito lightbox.
   3. Ativar por imagem: desative o lightbox para páginas específicas, mas ative algumas imagens nessas páginas. Adequado para algumas imagens que precisam do efeito lightbox.
   4. Desativar globalmente, mas ativar por imagem ou página: desativa o lightbox globalmente, mas ativa imagens ou páginas específicas. Adequado para um grande número de imagens ou páginas que não necessitam do efeito lightbox.

6. Suporte para legenda de imagem lightbox, verifique mais detalhes em Legenda.

7. Suporte ao agrupamento de imagens como galerias, verifique mais detalhes na Galeria.

Observação

Se esta é a primeira vez que você usa o recurso de plug-in MkDocs, você deve saber que o MkDocs inclui um plug-in padrão chamado search . Se quiser manter o recurso de pesquisa, você precisa adicionar o plugin search de volta à lista plugins .

Como funciona

1. Copie o arquivo de script GLightbox para o diretório site/assets/javascripts/ e o arquivo CSS para o diretório site/assets/stylesheets/
2. Importe o script GLightbox e o arquivo CSS e adicione o código javascript em cada página excluída das páginas desativadas
3. Pesquise todas as tags de imagem e distorça com uma tag âncora para imagens excluídas do GLightbox com pular classe ou já distorcidas com uma tag âncora

Licença

Este projeto está licenciado sob a licença MIT - consulte o arquivo LICENSE.md para obter detalhes.