Agência Web BH

Web Kit Lightbox

O Agência Web BH LightBox permite que você veja suas imagens de uma maneira diferente e sofisticada, conteúdo HTML e multi-mídia sobre uma camada translucida sem deixar a página.

Características

  • Display images, videos, HTML, Iframes, Ajax requests and SWF
  • Supports YouTube, Vimeo, MP4 (h.264), WebM and FLV movies
  • Group lightboxes and mix different content types
  • Responsive design to fit all device resolutions
  • Load other widgets in a lightbox
  • 3 different opening and closing transitions
  • 4 different caption styles
  • Keyboard and mouse scroll wheel navigation
  • Built on the latest jQuery version
  • Works with Joomla and WordPress

Exemplos

Diferentes animações - aparecer, elástico e nenhum

Diferentes posições de título - flutuante, interno e sobrepor

Vários exemplos em uma só galeria (tente utilizando o teclado e o mouse)

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Carregue Widget na Lightbox

Use #wk-ID para carregar Galerias de fotos, ou slideshows na lightbox. Como no exemplo: Web Kit Slideshow

<a data-lightbox="width:600;height:300;" href="#wk-10">Lightbox</a>

Como usar

Use o atributo data do HTML5 data-lightbox para ativar a lightbox. Você pode ajustar vários parâmetros através do atributo data. Como por exemplo:

<a data-lightbox="width:1000;height:600;" href="http://www.wikipedia.org">Lightbox</a>

Aqui você uma lista dos parâmetros mais comuns:

  • titlePosition - Onde você quer que o título apareça? (flutuante, fora, dentro ou sobreposto)
  • transitionIn - Ajuste a transição de abertura. (aparecer, elastico, ou nenhum)
  • transitionOut - Ajuste a transição de fechar. (aparecer, elastico, ou nenhum)
  • overlayShow - Ajuste para verdadeiro ou falso
  • scrolling - Ajuste para Sim ou Não
  • width - Ajuste em píxels
  • height - Ajuste a altura em píxels
  • padding - Ajuste o espaçamento em píxels

Desenvolvido em HTML5 e CSS3 - Copyright © 2015 Pró Virtual - Agência Web BH
Av. do Contorno 6.413 - 2º andar - Savassi - Belo Horizonte - MG