Lightbox

Lightbox permite visualizar imagens, HTML e conteúdo multimídia em uma obscuridade sobreposição esmaecidos e sem ter que sair da página atual.

Features

  • Exibir imagens, vídeos, HTML, iframes, requisições Ajax e SWF
  • Suporta o YouTube, Vimeo, MP4 (H.264), WebM e FLV filmes
  • Mesas de luz Grupo e misturar diferentes tipos de conteúdo
  • Projeto Responsive para caber todas as resoluções de dispositivos
  • 3 diferentes transições de abertura e fechamento
  • 4 estilos diferentes de legenda
  • Teclado e roda de rolagem do mouse navegação
  • Construído sobre a versão mais recente do jQuery

Exemplos

Diferentes animações - fade, elastic and none

Posições título diferentes - float, inside and over

Vários exemplos em uma galeria (experimente também usar a roda de rolagem do mouse e do teclado)

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.

Widgets carregar em um Lightbox

Use #wk-ID para carregar itens como slideshows ou galerias em uma mesa de luz. Por exemplo: Apresentação Slideshow

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

Como Usar

Use o atributo de dados personalizados dados lightbox HTML5 para activar a lightbox. Você pode configurar vários parâmetros mesa de luz para o atributo de dados. Por exemplo:

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

Aqui está uma lista dos parâmetros mais comuns:

  • titlePosition - Como o título deve aparecer? (float, outside, inside or over)
  • transitionIn - Definir uma transição de abertura. (fade, elastic, or none)
  • transitionOut - Definir uma transição de fecho (fade, elastic, or none)
  • overlayShow - escolha true or false
  • scrolling - escolha yes or no
  • width - Defina uma largura em pixels
  • height - Defina uma altura em pixels
  • padding - Defina um espaçamento em pixels