Jquery Thumnails和图像编号

我正在使用FancyBox显示构成一本书的大量页面。。我之所以使用Fancybox，是因为它似乎是我尝试过的众多图片中唯一一款能够以合理的方式处理比屏幕大的图片的图库插件

我使用缩略图是因为我希望能够跳过图像，比如从图像1跳到图像30，而不必浏览每个图像，但是缩略图看起来都一样-是否有任何方法可以自定义缩略图以仅显示图像编号。此外，因为图像非常大，有没有一种方法可以为缩略图提供与全尺寸图像不同的url

---

提前感谢您提供的任何帮助

我以前曾收到过该请求，但不幸的是，没有“开箱即用”的方法，您必须手动完成

考虑到您正在使用最新版本的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>';

并使用（如：

/*$.each…*/

）注释掉整个

$.each（）

函数，直到行94+/-

保存并关闭您的文件

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

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

瞧

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

文件。

您是在谈论带有

thummbs

选项的fancybox v2.x吗？是的，如果不清楚，很抱歉谢谢！那个演示绝对完美。我想出了一个办法，切换到使用“内联”模式，而不是图像，在这种情况下，它允许你有一个不同的thumnail（这是出乎意料的），所以我用了一些代码写了一个图片的数字。使用“内联”方法显示图像解决了另一个问题，因为它似乎不会在普通的图库中预加载图像，这在您有大图像时有点麻烦。。它也不能很好地处理图像溢出，但不能抱怨。非常感谢！

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

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

<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>

<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>