缩略图和图像编号 [英] Thumnails and Image Numbers

问题描述

我正在使用FancyBox来显示构成一本书的大量页面..我使用Fancybox是因为它似乎是我尝试过的无数种能够处理比屏幕大的图像的唯一图库插件方法.

I am using FancyBox to display a large number of pages that make up a book .. I use Fancybox because it seems to be the only gallery pluggin out of the myriads i have tried which handles images bigger than the screen in a sensible way.

我正在使用缩略图，因为我希望能够在不浏览每个图像的情况下从图像1跳转到图像30，而缩略图却看起来都一样-有什么方法可以自定义缩略图以仅显示图像编号.也是因为图片很大，有没有办法给缩略图使用与全尺寸图片不同的网址?

I am using the thumbnails as i want to be able to jump through the images, say from image 1 to image 30, without going through each image, but the thumbnails all look the same - is there any way of being able to customorise the thumbnail to just show an image number. Also because the images are very large is there a way of giving it a different url to use for the thumbnail than the full size image?

在此先感谢您的帮助

推荐答案

我之前曾有该请求，但不幸的是没有办法开箱即用"，您必须手动执行.

I had that request before but unfortunately there is not a way to do it "out-of-the-box", you have to do it manually.

考虑到您正在使用最新版本的fancybox( v2.0.5 )，请按照以下步骤操作:

Considering that you are using the latest version of fancybox (v2.0.5), follow these steps:

1:复制文件jquery.fancybox-thumbs.js(helpers文件夹)，并使用类似jquery.fancybox-thumbs-NO-image.js的名称重命名.我们将在保留原始文件的同时修改此文件.

1: make a copy of the file jquery.fancybox-thumbs.js (helpers folder) and rename it with something like jquery.fancybox-thumbs-NO-image.js. We will modify this file while keeping the original.

2:编辑新文件(jquery.fancybox-thumbs-NO-image.js)并查找 49 行，其内容为:

2: edit the new file (jquery.fancybox-thumbs-NO-image.js) and look for the line 49, where it says:

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

并用以下内容替换该行:

and replace that line with this:

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

3:在显示为 55 的行中查找

3: look for the line 55 where it says

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

并使用 javascript多行注释语法$.each()函数(例如:/* $.each ... */)一直沿 94 +/-

and comment out the whole $.each() function using the javascript multi-line comments syntax (like: /* $.each ... */ ) all the way through the line 94 +/-

保存并关闭文件.

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

4: link to that file in your html document like:

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

代替原始文件.

5:要为数字添加某种样式，请添加内联CSS声明(在加载所有fancybox css文件之后)，例如:

5: To add some style to your numbers add an inline CSS declaration (after you loaded all the fancybox css files) like:

<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相同)

6: The javascript. You may use your preferred API options. Just notice the thumbs option, where I set values that match better the numbers' size (the height is the same as the line-height in my CSS inline declaration for instance)

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

瞧！ 请参见演示

Fancybox v2.0.6的注释(2012年5月30日):

• 上面的第二步指向第49行:对于fancybox v2.0.6，应位于第55行.
• 第3步指向第55行:对于v2.0.6，应该一直沿第62行穿过100 +/-.

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

Subsequent versions may move the line numbers again but basically you should look for the same chunks of information.

请记住，我们正在编辑jquery.fancybox-thumbs.js文件的自定义版本.

Remember that we are editing our own customized version of the jquery.fancybox-thumbs.js file.

这篇关于缩略图和图像编号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！