Galeria de Fotos LightBox com Dojo (sem escrever código js)

Tenho estado um pouco afastado dos desenvolvimentos WEB, por que em fevereiro deste ano mudei o foco do meu trabalho ao entrar na área de TI de uma empresa, mas agora tenho um laboratório de experiências para incrementar e colocar coisinhas “Jasvascriptáveis”, trata-se da página www.ligazimmermann.com.br . Como o próprio nome pode informar, o intuito do site é ser um informativo sobre a liga da família Zimmermann. Ok continuando com WEB development… Se eu sonhasse a alguns anos atrás que um dia seria tão fácil colocar efeitos legais em um página de internet. Vibrava com o resultado de semanas de programação Javascript para adicionar um menu-pop up, ou fazer um sistema de ordenar fotos. Pois bem… hoje existe um recurso poderoso para fazer coisas “fantáhhhdicas” sem sequer escrever uma linha de Javascript. Volto (é claro…) a bater na tecla do Dojo, pois nesta semana adicionei na página de eventos (http://www.ligazimmermann.com.br/?imnu=2) do site uma galeria de fotos usando uma das ferramentas presentes no Dojo: o widget LightBox . LightBox é uma forma de apresentar imagens em um quadro modal, ou seja, ele toma conta de toda a tela do browser e não permite que as demais áreas do site estejam acessíveis, e já incorpora controles de avanço e retrocesso do grupo de imagens.

O efeito é legal, porém não é o que mais me impressiona, o que causa realmente impacto para o WEB designer é a facilidade de adicionar este recurso. Precisamos lembrar que o Dojo é uma biblioteca Javascript gratuíta que tem como principal vantagem não precisar programar recursos básicos. Basta configurar os requisitos mínimos e adicionar tag’s HTML marcadas como pertencentes a algum utilitário (widget) Dojo, e ele fará o restante do trabalho encima destas tags.

No caso em questão, eu já tinha efetuado todas as configurações para que funcionassem os “Tooltips” na página. E para adicionar o widget “LightBox” basicamente precisei incluir 2 linhas, uma invocando o arquivo: Javascript “dojox/image/Lightbox.js” e outra para adicionar o CSS que deixa no LightBox tudo em seu lugar: “dojox/image/resources/image.css”. Vamos ver aqui na íntegra todas as configurações que estão na página em questão.

Analisando os ítens da receita…

Na linha abaixo invoca o núcleo da biblioteca “dojo.js”, e configura pra não mostrar o debug na página (isDebug:false), e para que o Dojo procure por tag’s com Wigets ao carregar toda a página (parseOnLoad: true)

<script type=“text/javascript”
src=“/dojo-release-1.1.1/dojo/dojo.js”
djConfig=“isDebug:false, parseOnLoad: true”></script>

Agora devem ser especificadas configurações como os includes necessários e configuração da classe css que será utilizada, o Dojo possui algumas “skins” que vc pode escolher para modificar a aparência de seus widgets. No caso ficamos com “tundra”.

<script type=“text/javascript”>
//aplica classe CSS “tundra” na TAG body do site
dojo.addOnLoad(function(){dojo.addClass(dojo.body(),“tundra”);});
dojo.require(“dijit.Tooltip”);//include para o Tooltip
dojo.require(“dojo.parser”);//este deve estar sempre
</script>

E como estamos falando do LightBox, aqui se adiciona o javascript da biblioteca que é responsável pelo recurso:

<script type=“text/javascript”
src
=“/dojo-release-1.1.1/dojox/image/Lightbox.js”></script>

No que tange a Javascript até aqui tá concluído, agora vamos aos arquivos css básicos da página mais os que que pertencem ao dojo. Ah e já falei sobre @import usado para linkar o arquivos css em outro artigo do Ahã… Programando…, é uma forma de carregar os arquivos CSS com um código mais limpo .

<style type=“text/css”>
@import url(“/css/style.css”);
@import url(“/dojo-release-1.1.1/dijit/themes/tundra/tundra.css”);
@import url(“/dojo-release-1.1.1/dojo/resources/dojo.css”);
@import url(“/dojo-release-1.1.1/dojox/image/resources/image.css”);
</style>

O último @import feito é para o CSS utilizado pelo widget LightBox.

Feitooo, agora temos todos os recursos prontos para serem utilizados, quantas linhas de código Javascript serão necessárias para adicionar as fotos? Nenhuma! Pera aê… não tem que criar os eventos onclick ou coisa parecida para navegar entre as fotos? Nope! Como escrevi em linhas atrás, o Dojo fará tudo por vc se ele encontrar um tag HTML que pertenca a um brinquedo dele (Widget). Assim fica fácil incluir quantas fotos forem necessárias e com um código HTML limpíssimo:

<a href=“fotos_ev2004/z2004f1.jpg”
dojoType
=“dojox.image.Lightbox”
group
=“group1”
title=“Entrada no Ginasi&atilde;o”>Foto 1</a>

Tudo explicadinho nos mínimos detalhes…

A tag <a> é básica para links, o atributo href de um link tradicional recebe o endereço URL para o qual vc quer apontar. Mas aqui o novo atributo: dojoType, define que esta tag <a> deixa de ser uma tag tradicional para se tornar um widget Dojo, que em nosso caso será o da classe “dojox.image.Lightbox“.

O atributo group serve para indicar que a foto representada pela tag <a> pertence a um grupo, de forma que todas as fotos que pertencem a este devem ser identificadas com o mesmo nome de grupo. Assim se existirem na página 20 fotos em 2 grupos, ou seja 10 fotos para cada grupo, o LightBox saberá que quando estiver navegando nas fotos do primeiro grupo não deverá invadir a lista de fotos do segundo grupo.

E por fim o atributo title onde deve ser especificado um comentário sobre a foto. Se quiser dá pra incrementar o visual e entre <a> e </a> colocar um <img> com um thumb da foto, fica massa!

É isso… se quiser ver o LlightBox funcionando visite o link: http://www.ligazimmermann.com.br/?imnu=2

Reforcei aqui a idéia de que não precisa nem programar para usar a maioria dos widgets Dojo, mas quero deixar claro que não ignoro o fato de que o Dojo ofereça suporte a programação de recursos avançados. O que é ótimo para quem quer tornar as coisas mais dinâmicas, tratando eventos, ligando widgets com outras funcionalidades… etc. Basta investigar e ver que o Dojo é forte nesta parte também, inclusive existe uma lista das classes da API Dojo que pode ser conhecida no link: http://api.dojotoolkit.org/jsdoc/dojo.

Abraço e até o próximo artigo!

[15/01/2009 – Edição problema grave no wordpress]  – Ao copiar trechos de código, dos posts do Ahã Programando, substitua todas as aspas redigitando-as. Pois o WordPress substitui as aspas originais por algumas que são inúteis em programação. E os testes acabam não funcionando, deixando os entusiastas da programação web frustrados.  Não desista! Tente novamente 🙂

Advertisements

Tags: , , ,

6 Responses to “Galeria de Fotos LightBox com Dojo (sem escrever código js)”

  1. William Says:

    Olá, eu estou com a versão atualizada do Dojo, e eu fiz os passos, só não apareceu o fundo preto e as setas de controle das fotos, isso sou eu que coloco ou já deveria ter vindo na CSS ou no JS ?

    • Leonir Zimmermann Says:

      Olá Willian, eu ainda não testei a versão + nova do dojo (1.2.3), mas o sintoma que vc descreve indica problemas com o link para o CSS do light box que está em: dojox/image/resources/image.css, veja que no exemplo do artigo está assim: @import url(“/zimmermann/dojo-release-1.1.1/dojox/image/resources/image.css”); Verifique o import deste arquivo na página, e também certifique-se da existência dele no pacote dojo que vc baixou.

  2. Rebeka Says:

    Oi Leonir, gostaria de parabeniza-lo pela iniciativa pois foi o unico tutorial decente que encontrei em portugues falando sobre o assunto …
    baixei a versao 1.1.1 porem nao funcionou, ao clicar na foto ela abre em uma nova pagina, nao aparece o fundo preto nem as setas..o que fazer ? Grata

    • Leonir Zimmermann Says:

      Olá Rebeka, agradeço pela visita como pelo comentário. O problema que vc descreveu é semelhante ao comentado pelo Willian, porém, tendo respondido ao comentário dele não fiquei sabendo se deu certo ou não. Mas me parece um probleminha com a url do CSS, veja (código fonte) que na página usada para exemplificar a utilização do lightbox os arquivos CSS são importados assim:

      @import url(“/css/style.css”);
      @import url(“/admin/css/form.css”);
      @import url(“/dojo-release-1.1.1/dijit/themes/tundra/tundra.css”);
      @import url(“/dojo-release-1.1.1/dojo/resources/dojo.css”);
      @import url(“/dojo-release-1.1.1/dojox/image/resources/image.css”);

      Note que 3 destes arquivos pertencem ao Dojo, e o último é utilizado pelo widget LightBox. O principal arquivo que não pode faltar para o funcionamento do LightBox é o image.css, o tundra.css ajuda nos acabamentos. Verifique se algum deles está faltando, e em caso negativo, verifique se o link para carregar cada um destes css’s está correto. Aguardo por sua resposta confirmando se funcionou.

      Obrigado.

  3. Calebe Says:

    MUITO BOM o tutorial … é o numero 1 no google
    Grande Linium

  4. filipe Says:

    boa muito bom

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: