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