Efeito LightBox usando Zend Framework e Dojo

março 28 0 Comentários Categoria: javascript, Zend Framework

Tanto para uma imagem em particular quanto para uma galeria de imagens, o efeito lightbox passa ao mesmo tempo beleza e simplicidade, características cada vez mais desejadas por desenvolvedores web e por seus clientes.

Para criar este efeito utilizarei a biblioteca Dojo, já presente no pacote full do Zend Framework.

O DOJO TOOLKIT é um framework javascript que possui a proposta de proporcionar aplicações web de desenvolvimento rápido e profissional, oferecendo funcionalidades com facilidade para interação com o usuário.
Por ser escrito em javascript pode ser usado em conjunto com várias linguagens de desenvolvimento Web como: PHP, JSP E ASP.

O Zend Framework trás consigo o Dojo Toolkit para apoiar a utilização e o desenvolvimento de soluções out-of-the-box ricas(web 2.0) para a internet.

A distribuição Dojo em si, pode ser encontrada no diretório externals/dojo da distribuição do Zend. Esta é uma distribuição full, que inclui o código fonte Dojo JavaScript completo. Você pode criar um link para este diretório ou copiá-lo para seu diretório javascript. Alternativamente, você pode usar um dos serviços que utilizam e oferecem conteúdo dojo ( AOL CDN e CDN Google).

Vamos ao que interessa:

Nenhuma modificação no bootstrap ou no index.php é necessária.

No arquivo de layout é imprescindível que os ViewHelpers estejam sendo exibidos:

<html >
<head>
<?php

//necessário para exibir os parâmetros enviados pelas views
print $this->headLink();
print $this->headMeta();
print $this->headScript();
print $this->headTitle();

No controller onde você quer utilizar o lightbox:

<?php

Class TesteController extends Zend_Controller_Action{

public function init(){
Zend_Dojo::enableView($this->view);
}

public function indexAction(){

$this->view->dojo()->enable()
->addStylesheetModule('dijit.themes.tundra') // importa o tema tundra para os efeitos
->addStylesheet('http://o.aolcdn.com/dojo/1.2/dojo/resources/dojo.css') //importa o css
->addStylesheet('http://o.aolcdn.com/dojo/1.2/dojox/image/resources/image.css') //css das imagens do lightbox
->requireModule('dojox.image.Lightbox') //pega o modulo lightbox
->setDjConfigOption('parseOnLoad', true); //carrega tudo junto com a página

E agora na View:

<?php

//verifica se o dojo foi abilitado no controller
if ($this->dojo()->isEnabled()){
echo $this->dojo();
}
?>

<!-- exibe apenas uma imagem com o efeito lightbox-->

<a dojoType="dojox.image.Lightbox" title="Legenda da Imagem"  href="caminho/para a imagem em tamanho real/img.jpg"><img src="caminho/para a miniatura da imagem/thumb_img.jpg" alt="Foto"/></a>

<!-- exibe uma galeria de imagens-->

<a dojoType="dojox.image.Lightbox" group="nomeDoGrupo" title="Legenda da Imagem"  href="caminho/para a imagem em tamanho real/img.jpg"><img src="caminho/para a miniatura da imagem/thumb_img.jpg" alt="Foto Um"/></a>

<a dojoType="dojox.image.Lightbox" group="nomeDoGrupo" title="Legenda da Imagem"  href="caminho/para a imagem em tamanho real/img2.jpg"><img src="caminho/para a miniatura da imagem/thumb_img2.jpg" alt="Foto Dois"/></a>

Nota:

Se a página onde o será utilizado o lightbox possuir flash, deve-se verificar se a animação possui o seguinte parâmetro em sua declaração:

<param name="wmode" value="transparent">

Até a próxima!

Referências:

1 – http://framework.zend.com/manual/en/zend.dojo.introduction.html

2 – http://www.jwdutra.com/jwdutra/index.php?option=com_content&view=article&catid=24:frame-javasc&id=20:dojo&Itemid=28

3 – http://docs.dojocampus.org/dojox/image/Lightbox

4 – http://www.zfforums.com/zend-framework-general-discussions-1/general-q-zend-framework-2/super-simple-zend-dojo-lightbox-2059.html

Be Sociable, Share!
&cop