javascript - 修改fancybox html

Question

是否可以自定义fancybox HTML 代码？
我想移出 .fancybox-outer 之外的下一个和上一个按钮

Answer 1

为了移出容器的next和previous按钮.fancybox-outer，您只需要添加这些 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 check No. 6，demo就在这个fiddle

...但想知道您是否会将其视为正确答案。

Answer 2

这是我解决它的方法。我以前不知道您可以扩展/替换 jquery 中的方法。但是这种新方法将（使用一些基本的 css）从右侧滑入并从左侧滑出。

它将按钮呈现在 fancybox-outer 元素之外，并占用文档的宽度。它可能可以优化很多。

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));