Crie Lightbox de página inteira responsivo e bonito com BaguetteBox.js

tem dezenas de plugins lightbox e eles são todos ótimos Por diferentes razões. Alguns funcionam melhor em sites de portfólio, enquanto outros são melhores para layouts responsivos.

Mas, um dos meus novos plugins favoritos para usar é baguetteBox.js, criado pelo desenvolvedor JavaScript Marek Grzybek.

É claro que este plugin é totalmente grátis para uso e open-source no GitHub se você quiser entrar no código manualmente.

A biblioteca não tem dependências, assim você pode executá-lo sem jQuery, Zepto ou qualquer outra coisa. É um biblioteca JavaScript pura com uma configuração muito simples.

É feito para funciona perfeitamente em dispositivos móveis, para que ele possa suportar furtos e toques, juntamente com o comportamento padrão em desktops e laptops. É uma das poucas galerias de tela cheia que suporte a interações móveis, juntamente com um efeito modal total.

Confira a página de demonstração para vê-lo ao vivo em ação. Tem uma galeria cheia de recursos, junto com a uma linha de código necessária para funcionar:

 baguetteBox.run ('. baguetteBoxOne'); 

Então, é isso segmenta um elemento contêiner com a classe .baguetteBoxOne e toda a galeria funciona com isso.

Você poderia definir opções personalizadas se você deseja itens como legendas, estilos de botão, recursos de pré-carregamento e métodos de retorno de chamada para eventos onclick / onchange. Todas essas opções são bem documentado no GitHub se você quer mergulhar.

Mas, na verdade, não é preciso muito para que isso vá além de um elemento de contêiner e de alguns elementos básicos da imagem.

Você tem controle total sobre as animações, tamanhos de imagens, efeitos de furto e conteúdo da galeria, como títulos / legendas. este requer JavaScript, por isso não tem uma alternativa CSS pura ao modal. Mas, como a maioria dos navegadores suporta JavaScript, isso não deve ser um problema.

Para saber mais, visite a página principal da baguetteBox.js e você também pode compartilhar seus pensamentos com o criador no Twitter @feimosi.