如何结合jQuery代码为fancybox 2渐隐效果和使用title-id

Question

我用的是花式盒子2。

我有一些代码，允许我使用data-title-id给在fanybox画廊项目一个标题锚在他们。

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

我的问题是我如何结合这两个脚本，以使他们在同一页面上的功能?

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

<<p>看到strong> 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/

它可能会帮助你:
fanybox，自定义打开过渡
防止'滑落'