Question

我正在使用FancyBox来显示构成一本书的大量页面。我使用Fancybox，因为它似乎是myriads中唯一一个处理图像大于屏幕的图库插件办法。

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

提前感谢您的任何帮助

Answer 1

之前我有过这个请求但很遗憾没有办法“开箱即用”，你必须手动完成。

考虑到您使用的是最新版本的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) { ...

并使用javascript multi-line comments syntax（例如：$.each()）注释整个/* $.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与我的CSS内联声明中的line-height相同）

<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

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文件的自定义版本。

缩略图和图像编号

1 个答案: