10 melhores widgets e plug-ins de lightbox JavaScript de código aberto gratuitos

As imagens são cruciais, esteja você executando um site de comércio eletrônico ou portfólio. Quantas vendas você faz ou novos clientes que você obtém depende muito da qualidade das imagens de seus produtos e serviços que você pode mostrar por meio de suas imagens.

Portanto, faz sentido destacar suas imagens com uma caixa de luz. As caixas de luz fazem sua imagem se destacar enquanto o restante dos sites desaparece em segundo plano.

Você deve considerar adicionar um lightbox ao seu site se a exibição de imagens para seus visitantes for importante para o seu negócio. Felizmente, você não precisa gastar muito tempo construindo um do zero, pois existem muitos widgets e plugins de lightbox JavaScript gratuitos por aí que você pode começar a usar hoje.

Vou economizar ainda mais tempo analisando alguns dos melhores widgets e plug-ins de lightbox baseados em JavaScript gratuitos e de código aberto neste post. Vamos começar.

1. Caixa de luz básica

o Caixa de luz básica é perfeito para pessoas que querem usar algo muito leve para seus projetos. Não possui dependências e funciona com todos os navegadores modernos a partir do IE11 com uso de alguns polyfills.

A lightbox tem uma API muito simples, facilitando o uso. Você pode ter várias instâncias de um lightbox usando o create() método. Todas essas instâncias podem ser alteradas de forma independente e você tem total controle sobre mostrar ou ocultar a ligthbox, fazer alterações no conteúdo e exibir todos os tipos de elementos como vídeos, imagens ou iframes.

Também é relativamente fácil personalizar a aparência da lightbox porque ela não vem com muitos temas predefinidos ou classes personalizadas. As caixas de luz podem ser empilhadas umas sobre as outras ou não podem ser fechadas. Ou você pode usar retornos de chamada para determinar o que acontece quando o lightbox é aberto ou fechado.

2. Lightbox2

Lightbox2 é um dos plugins de lightbox JavaScript gratuitos mais populares. O plug-in exige que você forneça atribuição, mas não precisa ser voltado para o usuário. As legendas ficam disponíveis com o uso do data-title atributo.

Lightbox2Lightbox2Lightbox2

Funciona com todos os principais navegadores. Você obtém suporte do navegador de volta ao IE9 ao usá-lo com jQuery v2.xe até o IE6 com jQuery v1.x. O plugin carrega quatro imagens para criar sua interface do usuário com setas e botão fechar, etc. Você pode substituí-las por suas próprias imagens. Existe a opção de usar o data-lightbox atributo para criar grupos de imagens para carregar na lightbox.

O plug-in também oferece a capacidade de controlar coisas como ajustar imagens na janela de visualização, contornar depois que os usuários navegarem até a última imagem e a duração do desbotamento.

3. Caixa de Cores

Caixa de Cores é um plugin lightbox baseado em jQuery, leve e facilmente personalizável. Você também pode instalá-lo como um pacote NPM. Seu suporte ao navegador remonta ao IE7.

Plugin Colorbox jQueryPlugin Colorbox jQueryPlugin Colorbox jQuery

Mais algumas coisas que você vai gostar sobre o plugin incluem a capacidade de alterar completamente a aparência do lightbox usando CSS, estendendo a funcionalidade com ganchos de eventos e retornos de chamada e pré-carregamento de imagens futuras. E tudo isso funciona sem alterações em seu HTML existente.

Você pode passar um objeto com pares de valores-chave para o plug-in durante a inicialização para criar sua lightbox personalizada. A lightbox suporta o carregamento de todos os tipos de conteúdo, como HTML inline, iframes e vídeos, bem como o preenchimento de conteúdo com solicitações AJAX.

Dê uma olhada em todos os exemplos postados no página inicial do plug-in para alguma inspiração.

4. VenoBox

o Plugin VenoBox é uma alternativa leve para pessoas que desejam um lightbox que não dependa de outras bibliotecas como jQuery. Inicialmente, VenoBox também era um plugin jQuery, mas depois foi atualizado para funcionar sem bibliotecas de terceiros.

VenoBox LightboxVenoBox LightboxVenoBox Lightbox

Um dos recursos exclusivos do plug-in que o separa dos outros é a capacidade de preservar a altura das imagens mais altas do que a janela em que os usuários estão visualizando seu site. Isso permite que as pessoas rolem para cima e para baixo para ver todo o conteúdo da imagem sem que tudo seja reduzido – possivelmente até a ilegibilidade.

Este plugin também permite que você carregue qualquer tipo de conteúdo dentro do lightbox, como iframes, HTML embutido ou conteúdo AJAX. Você também tem controle sobre a proporção desses iframes, vídeos e outros elementos.

É fácil de configurar e você pode passar pares de valores-chave durante a inicialização para alterar a aparência e o comportamento do lightbox. Modificações semelhantes também podem ser feitas diretamente no HTML usando data-attributes para obter o mesmo resultado.

5. Magnífico pop-up

o Magnífico pop-up plugin permite que você adicione rapidamente uma lightbox responsiva ao seu site. Ele se concentra em fornecer uma ótima experiência ao usuário e um desempenho impressionante. Você pode usá-lo com jQuery ou com Zepto.js dependendo de como seu site está configurado.

Magnífico pop-upMagnífico pop-upMagnífico pop-up

Existem muitas maneiras sutis em que você pode alterar o comportamento do lightbox. Por exemplo, você pode dimensionar as imagens de forma que elas caibam na horizontal e na vertical ou apenas na horizontal. Da mesma forma, você tem controle total sobre a posição das legendas e animações de imagem etc.

A lightbox permite carregar todos os tipos de conteúdo como imagens, vídeos e solicitações AJAX. Ele também suporta o tratamento de erro de carregamento em situações em que uma imagem não é carregada ou uma solicitação AJAX falha por algum motivo.

6. chocolate

chocolate é um plugin lightbox gratuito, leve e responsivo. Parece ótimo em telas de todos os tamanhos e você também pode especificar seus próprios pontos de interrupção para controlar a aparência em diferentes dispositivos.

chocolatechocolatechocolate

Ao contrário de outros plugins de lightbox, o Chocolat oferece a opção de mostrar imagens no modo de tela cheia ou dentro de um contêiner. As imagens também podem ser redimensionadas para caber em diferentes tamanhos de contêiner. Entre outros valores, você pode definir o tamanho da imagem para contain ou cover. Isso é semelhante ao comportamento de background-size propriedade em CSS.

O plug-in também suporta navegação pelo teclado e loop de imagem para começar desde o início quando você chegar à última imagem na galeria.

7. Swipebox

Swipebox é mais um plugin lightbox dependente de jQuery que funciona muito bem em celulares, tablets e desktops. O desenvolvedor do projeto quer que o plugin seja fácil de usar, sem recursos sofisticados, como botões de mídia social. A prioridade é mantê-lo livre de bugs e leve.

Swipebox LightboxSwipebox LightboxSwipebox Lightbox

Ele ainda vem com um conjunto decente de recursos, como suporte para carregamento dinâmico de imagens, navegação baseada em teclado para desktops, gestos de furto para dispositivos móveis, animações baseadas em CSS com fallback jQuery. Você pode passar um objeto com pares chave-valor durante a chamada de inicialização da função para fazer alterações na aparência ou no comportamento do lightbox.

8. React Native Lightbox

Esse React Native Lightbox O componente é útil para quem planeja criar aplicativos para dispositivos móveis usando React Native. O repositório fornece código para orientá-lo sobre como integrar o lightbox em seus aplicativos iOS ou Android.

Você pode controlar o comportamento e a aparência do lightbox usando várias propriedades. Por exemplo, você pode atribuir uma cor de fundo ao lightbox ou usar uma função de retorno de chamada para determinar o que acontece quando alguém abre ou fecha o lightbox.

9. React Image Lightbox

o React Image Lightbox O componente é ideal para pessoas que desejam uma caixa de luz simples que funcione bem com o React. Ele vem com alguns recursos interessantes, como navegação baseada em teclado, recursos de zoom de imagem, pré-carregamento de imagem para melhor experiência do usuário, comportamento amigável para dispositivos móveis com suporte para gestos de pinçar para ampliar e deslizar.

React Image LightboxReact Image LightboxReact Image Lightbox

Você também não precisa carregar nenhum CSS externo. A imagem src os valores também podem ser atribuídos dinamicamente, tornando o lightbox muito flexível e poderoso. A navegação do teclado também é limitada por velocidade, para que o pressionamento acidental de teclas não atualize as imagens da caixa de luz muito rápido.

10. Vue Easy Lightbox

Este é um pequeno componente lightbox que funciona com Vue.js. A versão 1.x do componente funciona com Vue.js 3.0 enquanto a versão 0.x do componente funciona com Vue.js 2.0.

Vue Easy LightboxVue Easy LightboxVue Easy Lightbox

A interface do usuário é muito simples e bem projetada. Você obtém algumas funcionalidades comuns, como a capacidade de aumentar e diminuir o zoom, arrastar ou girar imagens. Você pode modificar o comportamento padrão do lightbox fazendo alterações no valor de diferentes props ou usando funções de retorno de chamada quando determinados eventos são emitidos após a interação do usuário, como cliques nos botões anterior e próximo.

Pensamentos finais

Neste post, fornecemos uma breve visão geral de alguns dos plug-ins e scripts de lightbox JavaScript mais populares, gratuitos e de código aberto que você pode usar em seus projetos. Alguns deles oferecem recursos exclusivos que você pode achar úteis. Por exemplo, você pode usar VenoBox para mostrar imagens muito altas ou Chocolat para carregar a lightbox dentro de um container.

Você também pode navegar por outros softwares de código aberto Projetos de lightbox no GitHub se nada aqui atender a todas as suas necessidades.

Source link

Amazon Coaching Grátis

Venda 25K Dólares com apenas um Produto no Amazon.

Artigos Relacionados

LEAVE A REPLY

Please enter your comment!
Please enter your name here

20 − 8 =

- Ana Pereira -spot_img

Últimos Artigos