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






Janelas - Fancybox Inline - auto detect width / height

Fancybox é uma ferramenta que oferece uma maneira agradável e elegante para adicionar imagens, conteúdo HTML, filmes SWF, yotube e multi-mídia em geral que flutua por cima da página web.

Exemplos:

Sem efeito e Titulo inside Efeito elastico e Titulo inside Efeito fade e Titulo inside
Sem efeito e Titulo outside Efeito elastico e Titulo outside Efeito fade e Titulo outside
Sem efeito e titulo over Efeito elastico e Titulo over Efeito fade e Titulo over

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

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

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

  • jquery-1.4.3.min.js
  • jquery.fancybox-1.3.4.pack.js
  • jquery.fancybox-1.3.4.css

Os dois primeiros arquivos de scripts:

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

2º passo: escolha um dos casos abaixo e cole o script na seção Head da sua página

Sem efeito titulo inside

Efeito elastico titulo inside

Efeito fade titulo inside

Sem efeito titulo outside

Efeito elastico titulo outside

Efeito fade titulo outside

Sem efeito titulo over

Efeito elastico titulo titulo over

Efeito fade titulo titulo over

3º passo: o conteúdo que você quer que apareça na janela fancybox deve estar em qualquer lugar da propria página, porém invisível e associado a um identificador.
Você pode fazer isso com duas divs:

4º passo: modifique na tag "title" TITULO pelo seu titulo, o texto do link pelo seu texto ( ou uma imagem ) e coloque o link a seguir no lugar que você quer que ele apareça na sua página.

Funciona com texto, imagens, videos e outros tipos de conteúdo.

Funciona com texto, imagens, videos e outros tipos de conteúdo

Funciona com texto, imagens, videos e outros tipos de conteúdo.

Funciona com texto, imagens, videos e outros tipos de conteúdo.

Funciona com texto, imagens, videos e outros tipos de conteúdo.

Funciona com texto, imagens, videos e outros tipos de conteúdo.

Funciona com texto, imagens, videos e outros tipos de conteúdo.

Funciona com texto, imagens, videos e outros tipos de conteúdo.

Funciona com texto, imagens, videos e outros tipos de conteúdo.