javascript - Fancybox - 垂直的缩略图

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 鼠标滚轮插件）：

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

   });