Fancybox可重用代码

Question

我在一个页面上有多个精美的方框，但我只想创建一个方法来管理所有这些精美的box.Please帮助，提前谢谢

  $(document).ready(function() {
            $("a[rel=example_group]").fancybox({
                'transitionIn'      : 'none',
                'transitionOut'     : 'none',
                'titlePosition'     : 'over',
                'titleFormat'       : function(title, currentArray, currentIndex, currentOpts) {
                    return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
                }
            });


            $("a[rel=example_group_crm]").fancybox({
                'transitionIn'      : 'none',
                'transitionOut'     : 'none',
                'titlePosition'     : 'over',
                'titleFormat'       : function(title, currentArray, currentIndex, currentOpts) {
                    return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
                }
            });

            $("a[rel=example_group_human]").fancybox({
                'transitionIn'      : 'none',
                'transitionOut'     : 'none',
                'titlePosition'     : 'over',
                'titleFormat'       : function(title, currentArray, currentIndex, currentOpts) {
                    return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
                }
            });

 });

Answer 1

有许多方法可以缩短您的代码，例如，您可以向这些链接添加一些类，并使用该类作为选择器。或者您可以使用一些正则表达式来选择具有rel属性的链接，如下所示：

$("a[rel^=example_group]").fancybox({
   // your parameters
});

或者，您可以创建自己的方法，该方法将选择器作为参数接收，然后应用fancyBox。