Question

我正在使用精美的盒子2.

我有一些代码允许我使用data-title-id为fancybox中的图库项目添加锚点。

我还想使用另一段代码来更改fancybox gallery图像的动画，因为它们会转换为下一张或上一张图像。

我的问题是如何将这两个脚本组合在一起才能在同一页面上运行？两者都在下面。

 $(".fancybox")
    .fancybox({
    beforeLoad: function () {
        var el, id = $(this.element).data('title-id');

        if (id) {
            el = $('#' + id);

            if (el.length) {
                this.title = el.html();
            }
        }
    }
});


(function ($, F) {
    F.transitions.resizeIn = function () {
        var previous = F.previous,
            current = F.current,
            startPos = previous.wrap.stop(true).position(),
            endPos = $.extend({
                opacity: 1
            }, current.pos);

        startPos.width = previous.wrap.width();
        startPos.height = previous.wrap.height();

        previous.wrap.stop(true).trigger('onReset').remove();

        delete endPos.position;

        current.inner.hide();

        current.wrap.css(startPos).animate(endPos, {
            duration: current.nextSpeed,
            easing: current.nextEasing,
            step: F.transitions.step,
            complete: function () {
                F._afterZoomIn();

                current.inner.fadeIn("fast");
            }
        });
    };

}(jQuery, jQuery.fancybox));

$(".fancybox")
    .attr('rel', 'gallery')
    .fancybox({
    nextMethod: 'resizeIn',
    nextSpeed: 250,

    prevMethod: false,

    helpers: {
        title: {
            type: 'inside'
        }
    }
});

Answer 1

您不需要将选择器$(".fancybox")绑定到fancybox两次，而是将两个脚本中的所有选项组合在一起，例如

(function ($, F) {
    F.transitions.resizeIn = function () {
        var previous = F.previous,
            current = F.current,
            startPos = previous.wrap.stop(true).position(),
            endPos = $.extend({
                opacity: 1
            }, current.pos);
        startPos.width = previous.wrap.width();
        startPos.height = previous.wrap.height();
        previous.wrap.stop(true).trigger('onReset').remove();
        delete endPos.position;
        current.inner.hide();
        current.wrap.css(startPos).animate(endPos, {
            duration: current.nextSpeed,
            easing: current.nextEasing,
            step: F.transitions.step,
            complete: function () {
                F._afterZoomIn();
                current.inner.fadeIn("fast");
            }
        });
    };
}(jQuery, jQuery.fancybox));

$(".fancybox")
    .attr('rel', 'gallery')
    .fancybox({
    nextMethod: 'resizeIn',
    nextSpeed: 250,
    prevMethod: false,
    helpers: {
        title: {
            type: 'inside'
        }
    },
    beforeLoad: function () {
        var el, id = $(this.element).data('title-id');
        console.log(id);
        if (id) {
            el = $('#' + id);

            if (el.length) {
                this.title = el.html();
            }
        }
    }
});

参见 JSFIDDLE

Answer 2

试试这个：

$(".fancybox").fancybox({
        beforeLoad: function() {
            var el, id = $(this.element).data('title-id');

            if (id) {
                el = $('#' + id);

                if (el.length) {
                    this.title = el.html();
                }
            }         

        },
     openEffect: 'none',
     prevEffect: 'slideUp',
     nextEffect: 'slideDown'
    });



(function ($, F) {
    F.transitions.slideUp = function() {
       F.wrap.slideUp();
    };

    F.transitions.slideDown = function() {
       F.wrap.slideDown();
    };

}(jQuery, jQuery.fancybox));

如果你想要如你所说的淡化效果，只需使用：

$(".fancybox").fancybox({
        beforeLoad: function() {
            var el, id = $(this.element).data('title-id');

            if (id) {
                el = $('#' + id);

                if (el.length) {
                    this.title = el.html();
                }
            }         

        },
     openEffect: 'fade',
     prevEffect: 'fade',
     nextEffect: 'fade'
    });

淡化效果示例： http://jsfiddle.net/ouadie/eeXde/

它可能对你有帮助：
Fancybox, Custom Open Transition
Prevent the 'slide down' effect in Fancybox

如何结合fancybox 2 fadein效果的jQuery代码并使用title-id？

2 个答案: