Modify fancybox html

为了移出.fancybox-outer容器的next和previous按钮，您只需要添加这些CSS规则（在您自己的自定义CSS文件中，在您加载了fancybox CSS文件后）

.fancybox-nav {
    width: 60px;       
}
.fancybox-nav span {
    visibility: visible;
    opacity: 0.5;
}
.fancybox-nav:hover span {
    opacity: 1;
}
.fancybox-next {
    right: -60px;
}
.fancybox-prev {
    left: -60px;
}

​你说的是you have looked around in the documentation but haven't found anything，但上面的内容在fancyapps.com网站上有很好的记录-->http://fancyapps.com/fancybox/#useful检查6号，演示就在这个小提琴中

但不知道你是否会认为这是一个正确的答案。

下面是我如何解决的。我以前不知道你可以在jquery中扩展/替换方法。但是这个新方法将（使用一些基本的css）从右边滑入，从左边滑出。

它将按钮呈现在fancybox外部元素之外，并采用documen的宽度。它可能可以进行大量优化。

jQuery('ul a').fancybox({
    margin: 0,
    openMethod : 'afterZoomIn',
    nextMethod : 'slideIn',
    nextSpeed : 1000,
    prevMethod : 'slideOut',
    prevSpeed : 1000
});

(function ($, F) {
    var getScalar = function(value, dim) {
        var value_ = parseInt(value, 10);
        if (dim && isPercentage(value)) {
            value_ = F.getViewport()[ dim ] / 100 * value_;
        }
        return Math.ceil(value_);
    },
    getValue = function(value, dim) {
        return getScalar(value, dim) + 'px';
    };
    F.transitions.afterZoomIn = function () {
        var current = F.current;
        if (!current) {
            return;
        }
        F.isOpen = F.isOpened = true;
        F.wrap.addClass('fancybox-opened').css('overflow', 'visible');
        F.reposition();
        // Assign a click event
        if (current.closeClick || current.nextClick) {
            F.inner.css('cursor', 'pointer').bind('click.fb', function(e) {
                if (!$(e.target).is('a') && !$(e.target).parent().is('a')) {
                    F[ current.closeClick ? 'close' : 'next' ]();
                }
            });
        }
        // Create a close button
        if (current.closeBtn) {
            $(current.tpl.closeBtn).appendTo('.fancybox-overlay').bind('click.fb', F.close);
        }
        // Create navigation arrows
        if (current.arrows && F.group.length > 1) {
            if (current.loop || current.index > 0) {
                $(current.tpl.prev).appendTo('.fancybox-overlay').bind('click.fb', F.prev);
            }
            if (current.loop || current.index < F.group.length - 1) {
                $(current.tpl.next).appendTo('.fancybox-overlay').bind('click.fb', F.next);
            }
        }
        F.trigger('afterShow');
        // Stop the slideshow if this is the last item
        if (!current.loop && current.index === current.group.length - 1) {
            F.play( false );
        } else if (F.opts.autoPlay && !F.player.isActive) {
            F.opts.autoPlay = false;
            F.play();
        }
    };
    F.transitions.slideIn = function () {
        var current   = F.current,
            effect    = current.nextEffect,
            startPos  = current.pos,
            endPos    = { opacity : 1 },
            direction = F.direction,
            distance  = $(document).width(),
            field;
        startPos.opacity = 0.1;
        field = 'left';
        if (direction === 'right') {
            startPos[ field ] = getValue(getScalar(startPos[ field ]) - distance);
            endPos[ field ]   = '+=' + distance + 'px';
        } else {
            startPos[ field ] = getValue(getScalar(startPos[ field ]) + distance);
            endPos[ field ]   = '-=' + distance + 'px';
        }
        // Workaround for http://bugs.jquery.com/ticket/12273
        if (effect === 'none') {
            F._afterZoomIn();
        } else {
            F.wrap.css(startPos).animate(endPos, {
                duration : current.nextSpeed,
                easing   : current.nextEasing,
                complete : F._afterZoomIn
            });
        }
    };
    F.transitions.slideOut = function () {
        var previous  = F.previous,
            effect    = previous.prevEffect,
            endPos    = { opacity : 0 },
            direction = F.direction,
            distance  = $(document).width();
        if (effect === 'elastic') {
            endPos[ 'left' ] = ( direction === 'left' ? '-' : '+' ) + '=' + distance + 'px';
        }
        previous.wrap.animate(endPos, {
            duration : effect === 'none' ? 0 : previous.prevSpeed,
            easing   : previous.prevEasing,
            complete : function () {
                // $(this).trigger('onReset').remove();
                previous.wrap.trigger('onReset').remove();
            }
        });
    }
}(jQuery, jQuery.fancybox));