quarta-feira, 28 de maio de 2008

GreyBox - Como usar?

Para quem nunca usou ou já usou e não lembra mais da sintaxe ou de onde baixar os arquivos, aqui vai uma breve explicação de como usar a biblioteca GreyBox.
Mas para que serve esse GreyBox? Alguém pode estar se perguntando.

Seguinte, o GreyBox é usado para se abrir uma janela centralizada ou não dentro da sua página (evitando abrir um conteúdo em popup) e dando um fade cinza na página principal (que fica atrás da janela do GreyBox).

O GreyBox faz a mesma coisa que scripts tais como: modal, lightbox
, lyteBox, etc.

Chega de conversa e vamos ao código, né. :p

Primeiramente, você tem que baixar a biblioteca GreyBox do site orango que detém os direitos desta biblioteca.

Em seguida, temos que setar o local onde vai estar a biblioteca assim:

<script type="text/javascript">
//referente a instalação do greybox
var GB_ROOT_DIR = "greybox/greybox/";
</script>


Aqui dissemos que a nossa biblioteca GreyBox vai estar na pasta greybox dentro da sub-pasta greybox.

A variável GB_ROOT_DIR definida como pública no JavaScript pela palavra var é de extrema importância no GreyBox porque é usada dentro da biblioteca para achar as imagens de loading ao começar a carregar a página dentro do GreyBox.
Portanto devemos colocar essa parte de nosso código sempre antes de chamarmos nosso link para a biblioteca GreyBox.

Em seguida colocamos os links da biblioteca:

<script type="text/javascript" src="greybox/greybox/AJS.js"></script>
<script type="text/javascript" src="greybox/greybox/AJS_fx.js"></script>
<script type="text/javascript" src="greybox/greybox/gb_scripts.js"></script>
<link href="greybox/greybox/gb_styles.css" rel="stylesheet" type="text/css" />


Agora vamos ao código completo:


<html>
<head>
<title>Usando GreyBox</title>
<!-- greybox -->
<script type="text/javascript">
//referente a instalação do greybox
var GB_ROOT_DIR = "greybox/greybox/";
</script>
<script type="text/javascript" src="greybox/greybox/AJS.js"></script>
<script type="text/javascript" src="greybox/greybox/AJS_fx.js"></script>
<script type="text/javascript" src="greybox/greybox/gb_scripts.js"></script>
<link href="greybox/greybox/gb_styles.css" rel="stylesheet" type="text/css" />
<!-- / greybox -->
</head>

<body>

<div>

<a href="http://google.com/" rel="gb_page_center[640, 480]">Abrir o Google em 640px por 480px</a>
<br />

<a href="http://google.com/" rel="gb_page_fs[]">Abrir o Google em Fulscreen</a>
<br />

<script>
var image_set = [{'caption': 'Flower', 'url': 'http://static.flickr.com/119/294309231_a3d2a339b9.jpg'},
{'caption': 'Nice waterfall', 'url': 'http://www.widerange.org/images/large/plitvicka.jpg'}];
</script>

<a href="#" onclick="return GB_showImageSet(image_set, 1)">Show first picture in image_set</a>
</div>

</body>

</html>


Vamos as explicações do código:

Bem, no primeiro link em Abrir o Google em 640px por 480, devemos nos deter a atenção na tag rel do link, nesta tag temos gb_page_center[640, 480], onde o gb_page_center é para abrir uma janela centralizada, 640 ou o primeiro parâmetro é largura do GreyBox e 480 ou o segundo parâmetro é a altura do GreyBox.
Ao ser carregar a página o GreyBox varre todos os links que tem essa tag e faz esses links chamarem um GreyBox com a página setada no href em questão.

Então ele encontra todos os links que contém gb_page_center e pega o href como página a ser aberta pelo GreyBox.

O segundo link Abrir o Google em Fulscreen
, faz quase a mesma coisa que o primeiro link diferenciando apenas na questão que abre em fullscreen a página do GreyBox e a tag rel tem o seguinte valor
gb_page_fs[].

Surgem casos que o GreyBox, demora um pouco para carregar esses links por javascript em decorrência disso, ao invés de abrir a janela GreyBox ao clicar no link abre a página mesmo, neste caso eu dou uma dica para se usar as funções do GreyBox no onclick do link em questão.

No terceiro exemplo (Show first picture in image_set), estou dando uma prévia sobre isso.

No meu próximo post eu falo sobre isso...

Falou.
Abraços.

Nenhum comentário :

Postar um comentário

Tecnologia do Blogger.