Question

如何使Fancybox中的缩略图沿侧面（最好是左侧）而不是水平放置在底部？

谢谢！

Answer 1

jquery.fancybox-thumbs.css

中的

#fancybox-thumbs ul li {
    float: left;
    padding: 1px;
    opacity: 0.5;
}

应该是

#fancybox-thumbs ul li {
    /*float: left;*/
    padding: 1px;
    opacity: 0.5;
}

在jquery.fancybox-thumbs.js替换：

this.list.children().eq(0).outerWidth(true);
this.list.width(this.width * (obj.group.length + 1)).css('left', Math.floor($(window).width() * 0.5 - (obj.index * this.width + this.width * 0.5)));

应该是：

this.width = opts.width 
this.list.width(opts.width+2)

再次在jquery.fancybox-thumbs.js

onUpdate: function (opts, obj) {
            if (this.list) {
                this.list.stop(true).animate({
                    'left': Math.floor($(window).width() * 0.5 - (obj.index * this.width + this.width * 0.5))
                }, 150);
            }
        }

应该（垂直居中缩略图div）：

        onUpdate: function (opts, obj) {
        if (this.list) {
            var listpos=(obj.index+1) * (opts.height+2)-(opts.height+2) * 0.5

            if (listpos < Math.floor($(window).height()*0.5)) {
              var top_=0
            } else { 
              var top_= - (listpos-Math.floor($(window).height()*0.5))
            }




            this.list.stop(true).animate({
                'top': top_ 
            }, 150);
        }
    }

还可以添加到“init”方法来设置缩略图div的宽度（在jquery.fancybox-thumbs.js中）：

在此行之后修复：

this.wrap = $('<div id="fancybox-thumbs"></div>').addClass(opts.position).appendTo('body');

对此：

this.wrap = $('<div id="fancybox-thumbs"></div>').addClass(opts.position).appendTo('body'); $("#fancybox-thumbs").width(opts.width);

同样在init中你可以添加它，鼠标滚轮将滚动tmumbnails（必须包含Jquery mousewheel插件）：

    $("#fancybox-thumbs").mousewheel(function(event, delta) {
              var current_top=parseInt($("#fancybox-thumbs").css('top'), 10)
              if (current_top+delta * 100<=2) {
                 $("#fancybox-thumbs").css('top',current_top+delta * 100)
              }


      event.preventDefault();

   });

Fancybox - 垂直缩略图

1 个答案: