quarta-feira, 28 de maio de 2008

GreyBox - no evento onClick do link

Bem, como disse no post passado, vou mostrar alguns exemplos para utilizar os métodos do GreyBox no evento onClick, para evitar abrir o site ao invés do GreyBox.

Vamos lá:

Método GB_show


Assinatura do método: GB_show(título, endereço da página que vai ser aberta no GreyBox, /*opcional*/ altura, largura, função a ser chamada).
Esse método abre o uma janela GreyBox no topo da página.
Ex:


<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/" onclick="return GB_show('Google', this.href)">Visitar o Google</a><br />

</div>

</body>

</html>


Método GB_showCenter


Assinatura do método: GB_showCenter(título, endereço da página a ser aberta pelo GreyBox, /* opcional*/ altura, largura, função a ser chamada).
Esse método abre uma janela GreyBox no centro da página.
Ex:


<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/" onclick="return GB_showCenter('Google', this.href)">Visitar o Google com Página Centralizada</a>
</div>
</body>
</html>


Método GB_showFullScreen:


Assinatura do método: GB_showFullScreen(título, endereço da página a ser aberta, função a ser chamada).
Esse método abre uma janela GreyBox em fullscreen.

Ex:


<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/" onclick="return GB_showFullScreen('Google', this.href)">Visitar o Google em FullScreen</a>

</div>

</body>

</html>


Método GB_showImage


Assinatura do método: GB_showImage(título, endereço da imagem a ser aberta no GreyBox, função a ser chamada).
Esse método abre uma janela GreyBox com a imagem.
Ex:


<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://static.flickr.com/119/294309231_a3d2a339b9.jpg"
onclick="return GB_showImage('Flower', this.href)">Abrindo a imagem de uma flor</a>

</div>

</body>

</html>


GB_showPage


Assinatura do método: GB_showPage(título, endereço da página a ser aberta no GreyBox, função a ser chamada).
Esse método abre uma janela GreyBox com a página em FullScreen mas com um layout do GreyBox diferente.
Ex:


<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" onclick="return GB_showPage('Google', this.href)">Abre o Google em FullScreen mais com um layout do GreyBox diferente</a>

</div>

</body>

</html>


GB_showFullScreenSet


Assinatura do método: GB_showFullScreenSet(array de sites a serem abertos, seta qual site vai ser aberto ao iniciar o GreyBox, função a ser chamada).
Esse método abre uma janela GreyBox com a página em FullScreen com um layout do GreyBox diferente e paginação para poder abrir mais de um site.
Ex:


<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>
<script>
var page_set = [{'caption': 'Google', 'url': 'http://google.com/'},
{'caption': 'Yahoo', 'url': 'http://yahoo.com/'}];
</script>
<a href="#" onclick="return GB_showFullScreenSet(page_set, 1)">Abre o GreyBox com paginação para sites, veja que o google vai ser aberto primeiro por ser o primeiro elemento do array e no método estar setado a 1 posição para abrir ao ser executado o GreyBox</a>
</div>
</body>
</html>


GB_showImageSet


Assinatura do método: GB_showImageSet(array de imagens a serem abertas, seta qual imagem vai iniciar o GreyBox, função a ser chamada).
Esse método abre uma janela GreyBox com um layout do GreyBox diferente e paginação para poder abrir mais de uma imagem.
Ex:


<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>

<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)">Abre imagens com paginação</a>
</div>

</body>

</html>

E isso aí, para quem quizer ver estes e outros exemplos de como utilizar o GreyBox na prática ou as assinaturas dos métodos segue o link:

Exemplos de GreyBox na prática.


Falou!
Abraços.

Um comentário :

  1. E como eu faria pra utilizar um onclick dentro de um 'div' por exemplo, sem utilizar um 'href'? Como eu deveria criar a função de retorno?
    Sergio

    ResponderExcluir

Tecnologia do Blogger.