FANCYBOX下一个imagegallery

Question

我想在fancybox中添加功能，我用点替换箭头我添加了一个按钮来打开和关闭描述：像这样：

        $(".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();    
        }

然后我使用“rel”属性定义了一些画廊...

  <!-- 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 -->

现在我想在打开花式框时添加两个按钮，这些按钮会转到下一个或上一个图库。

有人知道怎么做吗？任何想法？

很有利于你..