如何使用的fancybox按钮帮手+的fancybox缩略图帮手？ [英] How to use fancybox button helper + fancybox thumbnail helper?

问题描述

我需要同时放用他们两人（按钮的fancybox助手和缩略图助手）

I need to use both of them simultaniously (fancybox button helper and thumbnail helper)

我可以只使用其中的一个在一个时间

I can only use one of them at a time.

这些各功能的例子：
http://fancyapps.com/fancybox/#examples

已经使用了两个班的尝试：

Already tried using the two classes:

<a class="fancybox-buttons fancybox-thumbs"    

不过，这并不工作...
只有一次，如：

But it doesn't work... only one at a time, like:

<a class="fancybox-buttons"    

或

<a class="fancybox-thumbs"     

这是每个JavaScript的：

These are the javascripts of each:

            /*
            Button helper. Disable animations, hide close button, change title type and content
        */

        $('.fancybox-buttons').fancybox({
            openEffect  : 'none',
            closeEffect : 'none',

            prevEffect : 'none',
            nextEffect : 'none',

            closeBtn  : false,

            helpers : {
                title : {
                    type : 'inside'
                },
                buttons : {}
            },

            afterLoad : function() {
                this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
            }
        });


        /*
            Thumbnail helper. Disable animations, hide close button, arrows and slide to next gallery item if clicked
        */

        $('.fancybox-thumbs').fancybox({
            prevEffect : 'none',
            nextEffect : 'none',

            closeBtn  : false,
            arrows    : false,
            nextClick : true,

            helpers : { 
                thumbs : {
                    width  : 50,
                    height : 50
                }
            }
        });

    });    

感谢

推荐答案

您只需要一个简单的脚本与单个类在<$ C $所以同时使用C> HTML 应该像

You only need a single script to use both so with a single class in your html should work like

<a class="fancybox" ...

那么脚本：

$('.fancybox').fancybox({
 openEffect  : 'none',
 closeEffect : 'none',
 prevEffect : 'none',
 nextEffect : 'none',
 closeBtn  : false,
 arrows    : false,
 nextClick : true,
 helpers : {
  title : {
   type : 'inside'
  },
  buttons : {},
  thumbs : {
   width : 50,
   height : 50
  }
 },
 afterLoad : function() {
  this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
 }
});

这篇关于如何使用的fancybox按钮帮手+的fancybox缩略图帮手？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！