0

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

我有一些代码允许我使用 data-title-id 为 fancybox 中的画廊项目提供一个带有锚点的标题。

我还想使用另一段代码来改变fancybox画廊图像的动画，因为它们过渡到下一个或上一个图像。

我的问题是如何组合这两个脚本以使它们在同一页面上运行？两者都在下面。

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

2 回答 2

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

于 2013-06-21T23:40:36.240 回答
0

试试这个：

$(".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，自定义打开过渡
防止 Fancybox 中的“向下滑动”效果

于 2013-06-21T09:10:58.440 回答