Setinha, botões de próximo (next) e anterior (prev) no plugin NextGen do WordPress

• Home-
• plugin, wordpress/
• autor: Adriano Meira /
• publicado em: 14/07/2013

Olá pessoal, hoje vamos falar um pouco de Plugins do WordPress, vamos falar sobre o NextGen um plugin muito bacana e muito utilizado para dar uma força ao WordPress na hora de montar galerias de fotos.

Neste link vocês podem ver mais detalhes sobre ele e baixa-lo. Este plugin permite que você crie galerias de fotos e com um código coloque-as dentro do seu conteúdo do WordPress, na versão atual do WordPress (versão 3.5.2) ele já tem um sistema de galerias que eu ainda não utilizei todos os seus recursos ainda, por isso vamos usar o plugin do  NextGen.

Dos tipos de galeria que ele fornece, vamos focar aqui no tipo “Slidshow”, ele permite que crie uma galeria de imagem e elas ficam passando em looping como se fosse um banner, muito útil para quem quer colocar uma galeria no meio do conteúdo do seu conteúdo do site

O problema é que de forma nativa, o plugin não possui as famosas “setinhas” de passar para as próximas fotos, ou também conhecido como os botões de prev e next. Esta função de próximo e anterior é somente possível se clicarmos nas imagens.

Atenção: As solução envolve mexermos direto no plugin, por isso aconselho atualizar para a versão mais nova (versão 1.9.13) e depois disso NÃO FAZER ATUALIZAÇÕES, caso faça repita os passos da atualização com cuidado e atenção, pois o fabricante pode mudar a forma de montar o plugin. E mantenha um backup da sua versão.

Bom agora que temos o plugin atualizado, e se quiser pode instala-lo no seu WordPress, vamos aos códigos. Ao abrir a pasta de Plugins que em geral fica  em: wp-content/plugins/ você vai ver as pastas de cada plugin abra a pasta “nextgen-gallery” aqui está todos os arquivos do plugin, vamos começar.

1) Alterar o arquivo nggallery.php

Abra o arquivo “nggallery.php”, que fica na raiz do plugin, e na linha 360, temos a instrução do PHP que chama o javascript jQuery Cycle, que faz o ciclo de imagens funcionar. no original temos a seguinte instrução:

wp_register_script('jquery-cycle', NGGALLERY_URLPATH .'js/jquery.cycle.all.min.js', array('jquery'), '2.9995');

Vamos mudar a chamada de “jquery.cycle.all.min.js” para ” jquery.cycle.all.js” ficando assim:

wp_register_script('jquery-cycle', NGGALLERY_URLPATH .'js/jquery.cycle.all.js', array('jquery'), '2.9995');

Agora vamos abrir este arquivo para alterar algumas coisas.

2) Alterar o arquivo jquery.cycle.all.js

Abra o arquivo “jquery.cycle.all.js”, que fica na pasta js, e na linha 993, onde temos a instrução “next: null” mude para “next: ‘#next'” e na linha 1002 temos a instrução “prev: null”, mude-a para “prev: #prev”.

Isto servirá para que ao colocarmos as setinhas o plugin do jQuery procure os elementos de ID prev e next para passar as fotos.

Dica Importante! Se você já tem uma galeria no seu site que use esses elementos de ID, a dica é colocar nomes diferentes como por exemplo “next: ‘#nextgemNEXT'” e “prev: #nextgenPREV”. Assim você evita conflito com outros elementos do seu site, mas lembre-se de guardar estes nomes de ID que iremos utiliza-los mais tarde.

3) Alterar o arquivo ngg.slideshow.min.js

Abra o arquivo “ngg.slideshow.min.js”, que fica na pasta js, aqui vamos fazer uma alteração simples mas como o código esta todo em uma linha tenha muita atenção.
Procure pela seguinte instrução:

timeout:s.timeout,next:obj,before:jCycle_onBefor

Veja que temos aqui três instruções de código, vamos remover a do meio que é “next:obj”, isso mesmo deletar este código, logo este mesmo trecho de código ficará assim:

timeout:s.timeout,before:jCycle_onBefor

Agora vamos montar o HTML os botões de próximo e anterior.

4) Alterar o arquivo nggfunctions.php

Abra o arquivo “nggfunctions.php”, que fica na raiz do plugin, e a partir da linha 121 temos as instruções do PHP de onde montar a galeria do tipo slideshow. Você pode mudar a estrutura aqui como desejar, para este nosso exemplo vamos criar uma DIV que envolva tudo e dentro dela teremos a DIV monta a galeria e a DIV de controle com as setinhas (botões de prev e next), por isso muita atenção na hora de mudar as coisas por aqui.

Dica Importante! Mantenha um backup deste arquivo caso algo saia errado.

Primeiramente vamos colocar a DIV de controle, eu estou usando nomes de CSS bem específicos para que não conflite com outros CSS do meu site. veja que na linha 135 temos o retorno da montagem desta galeria, antes disso vamos acrescentar o código abaixo:

/*** Início dos Botões de Próximo e Anterior ***/
 $out .= '<div>';
        $out .= '<a id="prev" class="nexgen-controls nexgen-prev">Previous</a>';
        $out .= '<a id="next" class="nexgen-controls nexgen-next">Next</a>';
 $out .= '</div>';
 /*** Fim dos Botões de Próximo e Anterior ***/

E depois deste código temos que ter o retorno

return $out;

Para facilitar veja a imagem abaixo de como vai ficar esta primeira etapa

Agora já temos as setinhas de próximo e anterior, um detalhe importante aqui, no arquivo “js/jquery.cycle.all.js” definimos quem é o ID que vai ser clicado se tiver mudado o nome no arquivo no link coloque-o. por exemplo: Se mudamos os nomes para “next: ‘#nextgemNEXT'” e “prev: #nextgenPREV” os links deverão ser:

$out .= '<a id="nextgemPREV" class="nexgen-controls nexgen-prev">Previous</a>';
$out .= '<a id="nextgemNEXT">Next</a>';

Lembre-se de não deixar mesmos ID para instruçoes em javscript (jQuery) para não dar conflito.

Bom só isso é suficiente para que possa funcionar, daí basta colocar um CSS e pronto, mas digamos que você queira que as “setinhas” fiquem em cima das fotos, ai fica um adica, coloque uma DIV que envolva as fotos e o controle (botões de prev e next), assim você pode colocar uma instrução de CSS para que cada elemento se comporte independentemente de onde seja aplicado. Por exemplo, estamos escrevendo uma matéria nos eu blog e em uma coluna na esquerda queira colocar uma galeria de fotos pequenas com o passador, se deixarmos da forma que está acima teremos as fotos e abaixo delas as “setinhas” e se posicionarmos ela com CSS teremos problemas, com uma DIV em volta de tudo temos mais controle disso.

Para isso na linha 120, deste mesmo arquivo, vamos colocar uma DIV com uma classe como mostra o código abaixo:

$out  = '<div class="nexgen-content">';

E na linha seguinte onde temos:

$out  = '<div id="' . $anchor . '" style="height:' . $height . 'px;width:' . $width . 'px;">';

Vamos colocar um ponto final no começo do sinal de igual (.=), ficando assim

$out  .= '<div id="' . $anchor . '" style="height:' . $height . 'px;width:' . $width . 'px;">';

E na linha 143, antes do “return $out”, vamos fechar esta DIV colocando a instrução:

$out .= '</div>';

Então temos já uma estrutura de HTML bem marcada para trabalharmos melhor o CSS desta galeria, veja na imagem abaixo como ficou o código para facilitar para você.

Prontinho, se você rodar uma galeria você vai ver que aparecerá escrito próximo e anterior como colocamos na estrutura nova, você pode customizar com CSS da forma que quiser agora, veja abaixo um exemplo de código de CSS para customizar.

.nexgen-content{position:relative;}
	.nexgen-controls-nav{}
	.nexgen-controls-nav .nexgen-controls{
		display:block;
		text-indent:9999em;
		position:absolute;
		z-index:99999;
		width:30px !important;
		height:30px !important;
		text-height:-9999em;
		top:45%;
	}
		.nexgen-controls-nav .nexgen-prev{
			left:5px;
			background:url(../images/nav_left.png) no-repeat 0 0;
		}
		.nexgen-controls-nav .nexgen-next{
			right:5px !important;
			background:url(images/nav_right.png) no-repeat 0 0 !important;
		}

Nota: Aqui eu usei uma imagem para cada botão, você pode fazer como quiser. Eu também coloquei direto no código de CSS do meu WordPress o arquivo style.css, abaixo está o download do plugin já ajustado com as “setinhas”, mas lembre-se do que disse no começo sobre atualizações, eu não me responsabilizo por atualizações nem problemas no seu blog, aqui é apenas para lhe mostrar uma solução que eu encontrei. Neste exemplo o ajuste de CSS fica no arquivo “css/nggallery.css” a partir da linha 405, mude como quiser ou coloque direto no seu arquivo “style.css”

Bom é isso ai pessoal, dúvidas, sugestões, críticas, etc deixem os comentários ai na postagem, até a mais!

 

---

Tweet