NextGen Gallery com Fancybox

Essa extenção do plugin do WordPress NextGen Gallery permite que você, altere a forma de visualização padrão do [nggallery id=2], onde ele lista todas as imagens para uma interface mais usual.

Ao escolher a imagens que serão listadas.

Ele irá lista as imagens nesta  maneira. 

Ao clicar na imagem, ela será exibida com esse layout.

Com o Fancybox você pode melhorar a exibição de suas imagens.
A visualização  e navegação da sua lista de imagens se torna mais amigável ao usuário.

Para fazer a integração do NextGenGallery com o Fancybox você precisa:

Tenha no seu projeto WordPress os plugins nextgen-galery, e também inclua o pacote do fancybox

Dentro do diretório plugins/nextgen-gallery/view , abra o arquivo gallery.php.
Substitua o foreach do php por esse novo  foreach

<!– Thumbnails –>

<?php foreach ( $images as $image ) : ?>

<!– O rel=”" do link irá conter a informação de qual galeria pertence essa foto –>

<a href=”<?php echo $image->imageURL ?>” title=”<?php echo $image->description ?>” rel=”gallery-<?php echo $gallery->anchor; ?>” class=”molde-photo” >

<?php if ( !$image->hidden ) { ?>

<img title=”<?php echo $image->alttext ?>” alt=”<?php echo $image->alttext ?>” src=”<?php echo $image->thumbnailURL ?>” <?php echo $image->size ?> />

<?php } ?>
</a>

<?php if ( $image->hidden ) continue; ?>
<?php if ( $gallery->columns > 0 && ++$i % $gallery->columns == 0 ) { ?><br style=”clear: both” />
<?php } ?>

<?php endforeach; ?>

No final do arquivo acrescente o código

<script>
jQuery(document).ready(function(){

mostraPhoto(<?php echo ‘”a[rel=gallery-'.$gallery->anchor.']“‘;?>);
});

</script>

Essa função mostraPhoto contém o script para rodar o FancyBox

/**
* FancyBox
* @param obj referencia a imagem da galeria que foi clicada
*/

function mostraPhoto(obj){

jQuery(obj).fancybox({

‘transitionIn’ : ‘none’,

‘transitionOut’ : ‘none’,

‘titlePosition’ : ‘over’,

‘titleFormat’ : function(title, currentArray, currentIndex, currentOpts) {

return ‘<span id=”fancybox-title-over”>Image ‘ + (currentIndex + 1) + ‘ / ‘ + currentArray.length + (title.length ? ‘ &nbsp; ‘ + title : ”) + ‘</span>’;

}

});
}

Lembrando que a extenção do FancyBox deve ser incluidas nas páginas que o javascript será usado

<script type=”text/javascript” src=”<?php echo BASEURL;?>wp-content/plugins/fancybox/jquery.mousewheel-3.0.4.pack.js”></script>

<script type=”text/javascript” src=”<?php echo BASEURL;?>wp-content/plugins/fancybox/jquery.fancybox-1.3.4.pack.js”></script>

<link rel=”stylesheet” type=”text/css” href=”<?php echo BASEURL;?>wp-content/plugins/fancybox/jquery.fancybox-1.3.4.css” media=”screen” />

(Obs: a constante BASEURL se refere a minha URL do site) ;

Link para Download do Código

Deixar um comentário

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 / Modificar )

Imagem do Twitter

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

Facebook photo

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

Connecting to %s