Thumnails and Image Numbers

问题

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.

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?

Thanks you in advance for any help

回答1:

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.

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

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: 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: look for the line 55 where it says

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

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

save and close your file.

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>

instead of the original file.

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

And voila!. See DEMO

NOTES for Fancybox v2.0.6 (May 30, 2012):

The step No. 2 above points to the line 49 : For fancybox v2.0.6 should be line 55.
The step No 3 points to the line 55 : For v2.0.6 should be line 62 all the way through the line 100+/-.

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

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

来源：https://stackoverflow.com/questions/9462951/thumnails-and-image-numbers

标签

jquery

fancybox