3

我正在做一个基于fancybox的画廊-实际上我已经修改了字段以实现我所需要的,并且我已经做到了,我发现的最后一个问题是在这部分代码中:

} else {
        fx.prop = 0;

        $(fx).animate({prop: 1}, {
            duration : currentOpts.changeSpeed,
            step : _draw,
            complete : finish_resizing
        });

绘图功能在这里,因此您可以看到:

_draw = function(pos) {
            var dim = {
                width : parseInt(start_pos.width + (final_pos.width - start_pos.width) * pos, 10),
                height : parseInt(start_pos.height + (final_pos.height - start_pos.height) * pos, 10),

                top : parseInt(final_pos.top, 10),
                left : parseInt(final_pos.width, 10)
            };

            if (typeof final_pos.opacity !== 'undefined') {
                dim.opacity = pos < 0.8 ? 0.8 : pos;
            }

            wrap.css(dim);

            content.css({
                'width' : limit.width - currentOpts.padding * 2,
                'height' : limit.height - (titleHeight * pos) - currentOpts.padding * 2
            });
        },

我的问题是如何为NEXTPREV修改_draw函数,或如何设置动画函数。同时禁用不透明度。

我需要类似“可滚动”功能的东西。在 Fancybox 的主图像上(有点像这样http://jquerytools.org/demos/scrollable/

所以我只是无法完成这件事..

幻想盒选项还有其他方法吗?因为我找不到他们。

无论如何,这是原始文件 -
http://demo-store.prestashop.com/js/jquery/jquery.fancybox-1.3.4.js

这些是我所做的更改line 663

_draw = function(pos) {
            var dim = {
                width : parseInt(start_pos.width + (final_pos.width - start_pos.width) * pos, 10),
                height : parseInt(start_pos.height + (final_pos.height - start_pos.height) * pos, 10),

                top : parseInt(final_pos.top, 10),
                left : parseInt(final_pos.width, 10)
            };

            if (typeof final_pos.opacity !== 'undefined') {
                dim.opacity = pos < 0.8 ? 0.8 : pos;
            }

还有这个(但我认为这不会影响它):

$('body').append(
        tmp = $('<div id="fancybox-tmp"></div>'),
        loading = $('<div id="fancybox-loading"><div></div></div>'),
        overlay = $('<div id="fancybox-overlay"></div>'),
        limit = $('<div id="limit"></div>')             
);

wraplimit = $('<div id="wraplimit"></div>').append( limit ).appendTo('body');           
thebox = $('<div id="thebox"></div>').append('<div id="comrigtt"></div>').appendTo( overlay )    
wrap = $('<div id="fancybox-wrap"></div>').append().appendTo( limit );

outer = $('<div id="fancybox-outer"></div>')
.append('<div class="fancybox-bg" id="fancybox-bg-n"></div><div class="fancybox-bg" id="fancybox-bg-ne"></div><div class="fancybox-bg" id="fancybox-bg-e"></div><div class="fancybox-bg" id="fancybox-bg-se"></div><div class="fancybox-bg" id="fancybox-bg-s"></div><div class="fancybox-bg" id="fancybox-bg-sw"></div><div class="fancybox-bg" id="fancybox-bg-w"></div><div class="fancybox-bg" id="fancybox-bg-nw"></div>')
.appendTo( wrap );
4

1 回答 1

0

听起来您想为 next 和 prev 添加与主动画不同的自定义动画?您是否检查过http://fancybox.net/api的文档并使用 next 和 prev 命令...

如果您想要的是您在小提琴中发布的效果,那么我建议您使用以下令人讨厌的 hack,(或放弃 fancybox 并抓住一个开箱即用的支持该效果的工具)。

1)在您的触发器上启用 fancybox 2)使用 jQuery 或其他方法在 div 中创建缩略图,然后将该 div 附加到创建的 fancybox 元素的底部(在正文的底部) 3)连接您创建的缩略图以使用用于下一个/上一个/特定等的现有 fancybox api 4) 避免接触 js 本身。

于 2013-06-05T00:21:51.970 回答