FANCYBOX next imagegallery - fancybox

Question

I would like to add functionality to the fancybox, I replaced the arrows with dots I have added a button to open and close the description: like this:
$(".fancybox").fancybox({
arrows:true,
padding : 0,
beforeShow: function () {
this.title = $(this.element).attr('title');
this.title = '<h4 class="titles">' + this.title + '</h4>'/* + '<div class="description">' + $(this.element).find('img').attr('alt') +'</div>'*/;
this.description = $(this.element).find('img').attr('alt');
this.description ='<div class="description">' + this.description +'</div>';
$(this.description).appendTo(this.inner);
if (this.title) {
// New line
this.title += '';
}
if (this.description) {
// New line
this.description += '';
}
$(".description").hide();
},
afterShow: function() {
$('<div class="expander"></div>').appendTo(this.inner).click(function() {
$(".description").slideToggle("fast");
});
},
helpers : {
title : { type: 'inside' }
},
afterLoad : addLinks,
beforeClose : removeLinks
});
$('.fancybox-media').fancybox({
openEffect : 'none',
closeEffect : 'none',
helpers : {
media : {}
}
});
function addLinks() {
var list = $("#links");
if (!list.length) {
list = $('<ul id="links">');
for (var i = 0; i < this.group.length; i++) {
$('<li data-index="' + i + '"><label></label></li>').click(function() { $.fancybox.jumpto( $(this).data('index'));}).appendTo( list );
}
list.appendTo( 'body' );
}
list.find('li').removeClass('active').eq( this.index ).addClass('active');
}
function removeLinks() {
$("#links").remove();
}
then I define some galleries using the "rel" attribute …
<!-- Start Project -->
<div class="fphotography"> <a href="image1.jpg" class="fancybox" rel="GALLERY1" title="GALLERY1">
<div class="img-wrp"> <img class="scaleimg" src="image1.jpg" width="220" height="140" alt="DESC" />
</div>
</a>
<p class="project-title">TITLE</p>
<div class="hidden">
<a class="fancybox" rel="GALLERY1" title="GALLERY1" href="image1A.jpg" ><img src="#" alt="DESC"/></a>
<a class="fancybox" rel="GALLERY1" title="GALLERY1" href="image1B.jpg" ><img src="#" alt="DESC"/></a>
<a class="fancybox" rel="GALLERY1" title="GALLERY1" href="image1C.jpg" ><img src="#" alt="DESC"/></a>
</div>
</div>
<!-- End Project -->
<!-- Start Project -->
<div class="photography"> <a href="image2.jpg" class="fancybox" rel="GALLERY2" title="GALLERY2">
<div class="img-wrp"> <img class="scaleimg" src="image2.jpg" width="220" height="140" alt="DESC" />
</div>
</a>
<p class="project-title">TITLE</p>
<div class="hidden">
<a class="fancybox" rel="GALLERY2" title="GALLERY2" href="image2A.jpg" ><img src="#" alt="DESC"/></a>
<a class="fancybox" rel="GALLERY2" title="GALLERY2" href="image2B.jpg" ><img src="#" alt="DESC"/></a>
<a class="fancybox" rel="GALLERY2" title="GALLERY2" href="image2C.jpg" ><img src="#" alt="DESC"/></a>
</div>
</div>
<!-- End Project -->
<!-- Start Project -->
<div class="photography"> <a href="image3.jpg" class="fancybox" rel="GALLERY3" title="GALLERY3">
<div class="img-wrp"> <img class="scaleimg" src="image3.jpg" width="220" height="140" alt="DESC" />
</div>
</a>
<p class="project-title">TITLE</p>
<div class="hidden">
<a class="fancybox" rel="GALLERY3" title="GALLERY3" href="image3A.jpg" ><img src="#" alt="DESC"/></a>
<a class="fancybox" rel="GALLERY3" title="GALLERY3" href="image3B.jpg" ><img src="#" alt="DESC"/></a>
<a class="fancybox" rel="GALLERY3" title="GALLERY3" href="image3C.jpg" ><img src="#" alt="DESC"/></a>
</div>
</div>
<!-- End Project -->
Now I would like to add two buttons when the fancy box is open that go to the next or previous gallery.
Does anybody know how to do that? any ideas?
Thany you very much in advantage..