使用缩略图助手手动打开fancyBox

我想创建一个只有一个预览图片和缩略图助手的图库。 我使用了作者为画廊提供的片段只有一张预览图片然后我添加了显示缩略图助手的代码, 这样 ,但它没有显示缩略图….我想因为当你手动打开fancybox你没有指定缩略图的位置,怎么解决?

您还需要包含fancybox-thumbs CSS和JS文件。 它们包含在helpers目录下的下载中

正如JFK所提到的,你需要在页面DOM中拥有jQuery和所有FancyBox文件!

你可以尝试这样的东西加载FancyBox的元素的点击事件,其ID是“myButton”(对于我的例子)

 $("#myButton").bind("click", function() { var jumpto = 0, //Change to load non zeroth Image data = [ { "href": "http://sofzh.miximages.com/jquery/3174174579_e2620a6c75_o.jpg", "title": "Kongen og Dronningen, Bispen, Norway", "thumbnail": "http://sofzh.miximages.com/jquery/3174174579_0c6a63ca70_s.jpg" }, { "href": "http://sofzh.miximages.com/jquery/8067360578_1c86b97745_b.jpg", "title": "Make my dream come true...", "thumbnail": "http://sofzh.miximages.com/jquery/8067360578_1c86b97745_s.jpg" }, { "href": "http://sofzh.miximages.com/jquery/7104102841_377648a7bb_b.jpg", "title": "Twilight", "thumbnail": "http://sofzh.miximages.com/jquery/7104102841_377648a7bb_s.jpg" } ]; $.fancybox.open(data, { index: jumpto, padding: 10, transitionIn: 'none', transitionOut: 'none', type: 'image', changeFade: 0, mouseWheel: true, helpers: { overlay: { closeClick: false, speedOut: 200, showEarly: true, css: {}, locked: true }, title: { type: 'float' // 'float', 'inside', 'outside' or 'over' }, thumbs: { width: 50, height: 50, source: function (image) { return image.thumbnail; }, position: 'bottom' //'top', 'bottom' } } }); });