Estou planejando lançar posts semanais aqui no blog, e duas vezes por semana quando eu fizer uma série como a de Strings no PHP, mas esse post vai em oferecimento especial ao meu amigo @brunosaid que estava com essa necessidade e eu resolvi ajudá-lo. Espero que esse artigo resolva o problema de várias outras pessoas também.
Meu objetivo com esse post é fazer com que possamos adicionar uma imagem em uma caixa modal ( mais conhecida como lightbox) em uma imagem qualquer no Joomla de forma simples e sem precisar programar muito. Para isso, partirei do princípio que seu template está atualizado com o mootools 1.2, caso não saiba atualizar, tenho um outro artigo aqui no site que ensina como fazer.
A primeira coisa a se fazer é escolher qual script de modalbox você vai usar, existem vários pela internet, nesse artigo irei usar o MediaBoxAdvanced, gosto desse modal porque o bicho faz tudo (ou quase tudo…). Feito isso você terá que carregar o script dentro do seu template e isso pode ser feito de duas formas:
1. Usando o framework do Joomla:
$doc = JFactory::getDocument();
$doc->addScript('media/mediabox.js'); // caminho da pasta que vc colocou o script
2. Ou inserindo direto no seu template, logo abaixo da chamada “head” do joomla:
<head> <jdoc:include type="head" /> <script src="/media/mediabox.js" type="text/javascript"></script> </head>
A maioria desses scripts de caixa modal usam do poder do framework em que são desenvolvidos sendo bastante simples serem chamados nas imagens, links, ou seja lá o que você deseja abrir neles, se você ler a porr@ do manual der uma rápida lida na documentação do MediaBox verá o quanto é simples acioná-lo quando e onde for necessário. Como minha intenção é deixar tudo de maneira mais simples possível, colocarei abaixo um código que fará toda a “mágica” pra você:
<script>
window.addEvent("domready", function(){
var images = $$( ".lightimage" );
$each( images, function(e){
var exist = e.getParent( "a" );
if( !exist ){
var a = new Element("a", {
"rel": "lightbox[set22]",
"href": e.get("src"),
"title": e.get("alt")
});
a.wraps(e);
}
});
});
</script>
Pronto, agora, toda imagem no seu site que tiver a classe “lightimage” abrirá em um lightbox.
- Ok Mamura, mas como eu coloco essa classe em uma imagem do meu content ????
Essa é a parte mais fácil, quando você for inserir a imagem no content, abra a aba avançado do gerenciador de imagens, lá haverá uma opção chamada Classes, escreva nela lightimage e pronto, esta imagem abrirar em um lightbox quando for clicada.
gerenciador de imagens do joomla
Belo post mamura, mas onde insiro o bloco de código que você mostrou de javascript? dentro do template ou dentro do modal?
Dentro do template, esse bloco de código vai vasculhar por todo o conteudo alguma marcação com a classe “lightimage” e aplicar nesse elemento a chamada para o script dolighbox
Olá… Já fiz tudo o que diz aqui, no entanto, quando em algum artigo faço inserir imagens não me aparece nada onde seja possivel adicionar classe… :S
Desculpa a ignorancia mas continuo sem saber onde devo colocar este código
window.addEvent(“domready”, function(){
var images = $$( “.lightimage” );
$each( images, function(e){
var exist = e.getParent( “a” );
if( !exist ){
var a = new Element(“a”, {
“rel”: “lightbox[set22]“,
“href”: e.get(“src”),
“title”: e.get(“alt”)
});
a.wraps(e);
}
});
});
Agradecia ajuda
coloca isso no header do template para essa verificação ser feita em todas as páginas, então assim que tiver uma imagem com a classe lightimage ele criará um lightbox.
Boa noite, estou fazendo um site usando esse mediabox, só que no internet explorer ele da alguns problemas, o arquivo swf ele chama, mas a sombra da janela não aparece só em outros navegadores. Já procurei em varios foruns mas é dificil achar, Pode me ajudar?