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 ? ‘ ‘ + 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





























