Exibindo imagens utilizando o lightbox2

Uma das coisas que considero importante nas aplicações desenvolvidas em Maker é a possibilidade de integração com outras bibliotecas, permitindo que o desenvolvedor possa utilizar recursos desenvolvidos em outras linguagens dentro de suas aplicações Maker. Existe no site da Softwell uma documentação sobre a integração de bibliotecas de terceiros em suas aplicações Maker, só da uma olhada nesse link: http://suporte.softwell.com.br/maker/manual2_6/pt/recursos_avancados/como_adicionar_componentes_bibliotecas_terceiros.htm

O objetivo desse post será descrever os passos para utilizar um recurso bastante interessante para exibição de imagens dentro de uma página web, é o lightbox, para esse exemplo estou utilizando a API do lightbox2.

Antes de meter a mão na massa vamos falar um pouco sobre um componente do maker que aparentemente não possui tantos recursos, mas que em muitos casos quebra o maior galho, é o MakerLabel, não sei se todos sabem mas esse componente é capaz de interpretar qualquer conteúdo HTML, o segredo dele esta na propriedade "Quebra automática de linha", quando definida com o valor "Sim" esse componente é capaz de interpretar qualquer conteúdo HTML definido na sua propriedade "Descrição".

Neste exemplo estou utilizando 3 componentes MakerLabel com a propriedade "Quebra automatica de linha" definida com o valor "Sim", segue abaixo os valores que definir para propriedade "Descrição" desses componentes respectivamente:

Componente 1:

<a href="openImageStreamFromGalery.do?sys=BLG&formID=2&guid={B790E465-A510-46AD-A0B4-000BA8C592CD}" rel="lightbox[roadtrip]"><img src="openImageStreamFromGalery.do?sys=BLG&formID=2&guid={B790E465-A510-46AD-A0B4-000BA8C592CD}" height="80px" width="80px"/></a>

Componente 2:

<a href="openImageStreamFromGalery.do?sys=BLG&formID=2&guid={EEF836EF-0852-44BB-AD95-9DFE05EE8C6A}" rel="lightbox[roadtrip]"><img src="openImageStreamFromGalery.do?sys=BLG&formID=2&guid={EEF836EF-0852-44BB-AD95-9DFE05EE8C6A}" height="80px" width="80px"/></a>

Componente 3

<a href="openImageStreamFromGalery.do?sys=BLG&formID=2&guid={E13B7CB7-05E9-41E0-8566-7CCAFAEA98A8}" rel="lightbox[roadtrip]"><img src="openImageStreamFromGalery.do?sys=BLG&formID=2&guid={E13B7CB7-05E9-41E0-8566-7CCAFAEA98A8}" height="80px" width="80px"/></a>

Quando em execução o formulário é exibido dessa maneira.

Precise criar também um fluxo que é vinculado ao evento "Ao entrar do formulário", esse fluxo é responsável   por adicionar as bibliotecas utilizadas pelo lightbox2 no formulário. Não sei se todos perceberam, mas no link da imagem coloquei um atributo "rel", nele vocês poderão encontrar o valor "lightbox[roadtrip]", é isso que faz com que as imagens referenciadas por cada link sejam exibidas utilizando lightbox. Outras informações podem ser acrescentadas ao valor desse atributo e estão disponíveis no site do lightbox2.

Foram necessários alguns arquivos relacionados a utilização dessa biblioteca, para criação copiei esses arquivos para os seguintes caminhos.

Arquivos JS

Biblioteca do jQuery: <Raiz do contexto>\lightbox\js\jquery-1.7.2.min.js

Biblioteca do Lightbox2 <Raiz do contexto>\lightbox\js\lightbox

Arquivo CSS

Arquivo de folha de estilo: <Raiz do contexto>\lightbox\css\lightbox.css

Imagens Utilizadas

Imagem carregar: <Raiz do contexto>\images\loading.gif

Imagem do botão fechar: <Raiz do contexto>\images\close.png

Abaixo é possível observar o formulário em execução.

Bom! Muito simples né? Os arquivos desse exemplo podem ser obtidos através dos links abaixo.

FRZ do exemplo (Formulário, Menu, Imagens): https://rapidshare.com/files/2943573553/ExemploLightbox2.FRZ

Arquivos da biblioteca do Lightbox2: http://lokeshdhakar.com/projects/lightbox2/releases/lightbox2.51.zip

Uma abraço e até o próximo post.