NextGEN Gallery com SexyLightBox: sua galeria de imagens mais sexy

É fato que o plugin NextGEN Gallery do WordPress é o melhor quando o assunto é gerenciamento de galerias de imagens. Com NextGEN Gallery é possível criar galerias facilmente, acrescentar/retirar imagens em modo batch (é possível enviar um arquivo .zip e ele “abre” as imagens numa galeria), dá pra criar álbuns, copiar/transferir imagens entre galerias, inserir marca d’água automaticamente, enfim, o NextGEN Gallery é bem conhecido na comunidade WordPress e certamente está no “Top 5″ de plugins!

Existe, também, apesar não ser tão conhecido, um script à “lightbox” muito bonito e interessante: SexyLightBox. Como é possível ver em sua página, o efeito que ele oferece é bem interessante e, de certa maneira, diferenciado dos outros lightboxes que encontramos por aí (ênfase ao fato de as imagens serem apresentadas em tamanho completo respeitando a resolução do navegador do visitante).

Aproveitando que o NextGEN Gallery oferece a possibilidade de se utilizar script de terceiros para a exibição de suas galerias e somado ao fato de que o SexyLightBox é realmente interessante… NextGEN Gallery + SexyLightBox = Galerias de Imagens Sexy!

Baixando, instalando e configurando NextGEN Gallery

O primeiro passo é baixar e instalar NextGEN Gallery no seu WordPress. Devido ao fato de eles serem de “naturezas” diferentes (o primeiro é um plugin do WordPress; o segundo é um script que pode ser usado em qualquer tipo de site), a maneira de instalar e usar cada um deles é diferente.

Para o NextGEN Gallery, devido ao fato de ser um plugin do WordPress, a instalação é aquela, mesma, que já estamos acostumados:

• Baixar o NextGEN Gallery;
• Descompactar em sua pasta wp-content/plugins;
• Habilitar o plugin.

Depois, perceba que aparece em seus menus um novo módulo, “Gallery”, com subopções para controle do NextGen.

É possível traduzir as opções para vários idiomas, inclusive Língua Portuguesa. Baixe o pacote Portuguese / Brazilian Português [pt_BR] nas traduções oficiais e faça upload do arquivo .mo para wp-content/plugins/nextgen-gallery/lang e, automaticamente, os menus serão traduzidos.

Painel NextGen Gallery em Língua Portuguesa

Para já preparar o NextGen para trabalhar com o SexyLightBox, acesse em seu painel WordPress Galeria > Opções > Efeitos e altere as opções para:

• Efeito Javascript para miniaturas: Personalizado;
• Linha de código do link: rel=”sexylightbox”.

Baixando, instalando e configurando SexyLighbox

Vá até o site oficial do SexyLighbox para fazer download do SexyLightbox. Depois, é preciso subir a pasta descompactada para o servidor.

Não sei você, mas eu costumo criar uma pasta “js” dentro do meu tema para tudo ficar organizado e eu poder usar as funções de caminho relativo do WordPress tranquilamente. Então, uma estrutura que eu usaria para o caso seria wp-content/themes/MEU-TEMA/js/sexy-lightbox-2.3 (essa é a versão mais atual no dia de publicação deste artigo).

Agora é o momento de chamar o SexyLightbox para que funcione em seu tema. Há muitas maneiras diferentes de mexer com chamadas a scripts no WordPress; no caso, vou mostrar uma delas e, em artigos futuros, vou comentando sobre as outras (essa é a deixa para você assinar o feed do desenvolvimento para web).

Uma coisa importante é que o SexyLighbox não é feito para ser usado em standalone, ele deve estar associado a jQuery ou Mootools. Obviamente vamos usar jQuery para o serviço!  ;-)

Então, o código com as respectivas chamadas a scripts e folhas de estilo fica assim:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="<?php print get_bloginfo('template_url') ?>/js/sexy-lightbox-2.3/jQuery/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="<?php print get_bloginfo('template_url') ?>/js/sexy-lightbox-2.3/jQuery/sexylightbox.v2.3.jquery.js"></script>
<link rel="stylesheet" href="<?php print get_bloginfo('template_url') ?>/js/sexy-lightbox-2.3/jQuery/sexylightbox.css" type="text/css" media="all" />
<script type="text/javascript">
$(document).ready(function(){
    SexyLightbox.initialize({color:'white', imagesdir: '<?php print get_bloginfo('template_url') ?>/js/sexy-lightbox-2.3/jQuery/sexyimages'});
});
</script>

Perceba que alguns parâmetros foram passados na inicialização do script do SexyLightbox. O grande “trunfo” é usar o parâmetro imagesdir, porque na documentação está errado!

Personalizando seu SexyLighbox

Uma coisa muito boa é que há uma pasta “PSDs” no SexyLighbox para que cada um posso personalizar a aparência como quiser. Então, você pode alterar a cor de fundo, texto, alterar os elementos (setinhas, etc) e usar da forma que você quiser. Então quando você alterar a cor de fundo para o SexyLighbox ficar com a identidade visual de seu site, você vai perceber que a parte do meio da moldura ainda permanece intacta. No caso, você deve fazer um pequeno acréscimo de CSS em seu arquivo padrão (pode ser ao final):

#SLB-Contenido {
border-color:#HEXADECIMAL !important;
}

Agora você tem galerias Sexy!

Com isso, agora você galerias de imagens automatizadas e sexy! Para tirar melhor proveito disso, estude a documentação do NextGen Gallery (além dos fóruns, os tutoriais sobre NextGen de David Potter devem ajudar) e do SexyLightbox para incrementar/customizar ainda mais as galerias de imagens de seu site para que fiquem práticas, bonitas e com excelente performance.

E capriche nas imagens! ;-)