Adicionar paginador no Modal jQuery.FancyBox
Salve galera !!
‘De bobeira’ por aqui, aproveitei o tempo para estudar um pouco do fancybox.
É uma ótima opção de modal, e possui uma API bem clara, e de fácil utilização.
O callback, nos possibilita fazer mágica. Desenvolvi um script rápido, aproveitando o método publico jQuery.fancybox.pos(), para criar um paginador entre as fotos da galeria.
Usei o titleFormat: http://fancybox.net/blog.
function formatTitle(title, currentArray, currentIndex, currentOpts) {
return '<div id="tip7-title"><span class="fb_pager">'+pager( currentArray, currentIndex )+'Imagem ' + (currentIndex + 1) + ' de ' + currentArray.length + '</span><span><a href="javascript:;" onclick="$.fancybox.close();"><img src="/data/closelabel.gif" /></a></span>' + (title && title.length ? '<p>' + title + '</p>' : '' ) + '</div>';
}
function pager( currentArray, currentIndex ){
var p = '<p class="pageItem">';
for( var i=1; i<=currentArray.length; i++ )
{
var active = ( currentIndex==(i-1) ) ? 'class="active"' : ''
p += '<a href="#" rel="'+(i-1)+'"'+active+'>'+i+'</a>';
}
return p+'</p>';
}
jQuery(document).ready(function(){
jQuery('.pageItem a').live('click', function( e ){
e.preventDefault();
jQuery.fancybox.pos( jQuery( this ).attr('rel') );
});
});
Esse é o código adicional, e então no momento de instanciar o plugin, basta declarar que vamos usar o callback, e a function que deverá ser chamada:
jQuery('.gallery').fancybox({
titleFormat : formatTitle
});
é isso. =)