缩略图和图像编号

我正在使用 FancyBox 来显示组成一本书的大量页面。我使用 Fancybox 是因为它似乎是我尝试过的无数图库插件中唯一一个能够以合理的方式处理大于屏幕的图像的插件。

我使用缩略图是因为我希望能够跳过图像，例如从图像 1 到图像 30，而不需要浏览每个图像，但缩略图看起来都一样 - 有什么方法可以自定义缩略图仅显示图像编号。另外，由于图像非常大，是否有办法为其提供与全尺寸图像不同的缩略图用于缩略图？

预先感谢您的任何帮助

我之前有过这样的请求，但不幸的是没有办法“开箱即用”地做到这一点，你必须手动完成。

考虑到您正在使用最新版本的 fancybox (v2.0.5）， 按着这些次序：

1：复制文件jquery.fancybox-thumbs.js (helpers文件夹）并将其重命名为类似jquery.fancybox-thumbs-NO-image.js。我们将修改此文件，同时保留原始文件。

2：编辑新文件（jquery.fancybox-thumbs-NO-image.js）并寻找该行49，其中写着：

list += '<li><a style="width:' + thumbWidth + 'px;height:' + thumbHeight + 'px;" href="javascript:jQuery.fancybox.jumpto(' + n + ');"></a></li>';

并将该行替换为：

list += '<li><a style="width:' + thumbWidth + 'px;height:' + thumbHeight + 'px;" href="javascript:jQuery.fancybox.jumpto(' + n + ');">' + (n+1) + '</a></li>';

3：找线55它说的地方

//Load each thumbnail
$.each(F.group, function (i) { ...

并注释掉整个$.each()函数使用javascript 多行注释语法 http://www.w3schools.com/js/js_comments.asp（喜欢：/* $.each ... */) 一直穿过这条线94 +/-

保存并关闭您的文件。

4：链接到您的 html 文档中的该文件，例如：

<script type="text/javascript" src="fancybox2.0.5/helpers/jquery.fancybox-thumbs-NO-image.js"></script>

而不是原始文件。

5：要向数字添加一些样式，请添加内联 CSS 声明（在加载所有 fancybox css 文件之后），例如：

<style type="text/css">
 #fancybox-thumbs ul li a {
  border: 0 none !important;
  color: #fff !important;
  line-height: 16px;
  text-align: center;
  text-decoration: none;
 }
</style>

6：JavaScript。您可以使用您喜欢的 API 选项。只需注意thumbs选项，我在其中设置与数字大小更好匹配的值（height与line-height例如在我的 CSS 内联声明中）

<script type="text/javascript">
$(document).ready(function() {
 $('.fancybox').fancybox({
  prevEffect : 'fade',
  nextEffect : 'fade',
  afterLoad : function() {
   this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
  },
  helpers: {
   title: {
    type: 'inside'
   },
   thumbs: {
    width   : 16,
    height  : 16
   }
  }
 }); // fancybox
}); // ready
</script>

瞧！See DEMO http://picssel.com/playground/jquery/numbersInsteadofThumbs_27feb12.html

Fancybox v2.0.6 的注释（2012 年 5 月 30 日）:

• 上面的第 2 步指向第 49 行：对于 fancybox v2.0.6 来说应该是第 55 行。
• 步骤 3 指向第 55 行：对于 v2.0.6 应该是第 62 行一直到第 100+/- 行。

后续版本可能会再次移动行号，但基本上您应该寻找相同的信息块。

请记住，我们正在编辑我们自己的定制版本jquery.fancybox-thumbs.js file.