HOME PAGE JAVASCRIPT
Botões Cálculos Datas Essenciais Janelas Flutuantes Menus
HTML CSS FLASH PHP ASP GERADORES CORES MISCELANEA Contato  






Janelas - Colorbox - a jQuery lightbox

Colorbox é um plugin para JQuery que cria uma lightbox, ou seja, ele cria uma janela onde se pode exibir vários tipos de conteúdos diretamente sobre a página.

Instalação

Para fazer uso dessa ferramenta o 1º passo é baixar o pacote zipado: colorbox.zip

Descompacte e publique o conteúdo da pasta "colorbox" em uma pasta do seu servidor.

Na página que vai chamar o colorbox, dentro de seção Head, referencie os seguintes arquivos:

  • jquery.min.js
  • jquery.colorbox.js
  • colorbox.css

Os dois primeiros arquivos de scripts:

<script language="javascript" src="/suaPasta/jquery.min.js"></script>
<script language="javascript" src="/suaPasta/jquery.colorbox.js"></script>
e o terceiro de  folha de estilo CSS:
<link rel="stylesheet" type="text/css" href="/suaPasta/colorbox.css" media="screen" />

passo: escolha o tipo

Efeito Elástico Efeito Fade Sem efeito + largura e altura fixa Slideshow Iframe Iframe/YouTube Iframe/Vimeo Inline HTML

Este conteúdo vem de um elemento oculto nesta página.

Se você tentar abrir um novo Colorbox enquanto ele já estiver aberto, ele irá atualizar-se com o novo conteúdo.

Atualizando Exemplo de conteúdo:
Atualizar

Efeito Elástico

Cole na seção head da sua página:

Cole na seção body da sua página:

OBS: acrescente quantas linhas desejar
<p style='display:none'><a class="group1" href="URL_IMAGEM_N" title="TITULO_N"></a></p>

Efeito Fade

Cole na seção head da sua página:

Cole na seção body da sua página:

OBS: acrescente quantas linhas desejar
<p style='display:none'><a class="group2" href="URL_IMAGEM_N" title="TITULO_N"></a></p>

Sem efeito + largura e altura fixa

Cole na seção head da sua página:

Cole na seção body da sua página:

OBS: acrescente quantas linhas desejar
<p style='display:none'><a class="group3" href="URL_IMAGEM_N" title="TITULO_N"></a></p>

Slideshow

Cole na seção head da sua página:

Cole na seção body da sua página:

OBS: acrescente quantas linhas desejar
<p style='display:none'><a class="group4" href="URL_IMAGEM_N" title="TITULO_N"></a></p>

Iframe

Cole na seção head da sua página:

Cole na seção body da sua página:

Iframe/YouTube

Cole na seção head da sua página:

Cole na seção body da sua página:

Exemplo de URL_YOUTUBE:
http://www.youtube.com/embed/VOJyrQa_WR4?rel=0&amp;wmode=transparent

Iframe/Vimeo

Cole na seção head da sua página:

Cole na seção body da sua página:

Exemplo de URL_VIMEO:
http://player.vimeo.com/video/2285902

Inline HTML

Cole na seção head da sua página:

Cole na seção body da sua página:

Cole na seção body da sua página: