fancybox图像计数标题显示

时间:2013-05-21 18:15:55

标签: jquery fancybox

我有一个页面使用fancybox 2.1.4根据各自的rel属性显示多个不同的图片库。

我一直在努力获取当前图片标题中显示的每个图库的图像数量。通过this Stack Overflow post复制JFK描述的方法后,剩余的脚本将被禁用。

我的代码如下。有人可以帮忙吗?

    <script type="text/javascript">
        $(document).ready(function() {
            $(".fancybox").fancybox({
                helpers : {
                    title: {
                        type: 'outside'
                        }
                   }, // helpers
                   afterLoad : function() {
                    this.title = (this.title ? " + this.title + '<br />' : ") + 'Image ' + (this.index + 1) + ' of ' + this.group.length;
                   }                    
                });

            //start fade transition
            (function ($, F) {
                F.transitions.resizeIn = function() {
                    var previous = F.previous,
                        current  = F.current,
                        startPos = previous.wrap.stop(true).position(),
                        endPos   = $.extend({opacity : 1}, current.pos);

                    startPos.width  = previous.wrap.width();
                    startPos.height = previous.wrap.height();

                    previous.wrap.stop(true).trigger('onReset').remove();

                    delete endPos.position;

                    current.inner.hide();

                    current.wrap.css(startPos).animate(endPos, {
                        duration : current.nextSpeed,
                        easing   : current.nextEasing,
                        step     : F.transitions.step,
                        complete : function() {
                            F._afterZoomIn();

                            current.inner.fadeIn();//this rule controls the fadein of the next image
                        }
                    });
                };

            }(jQuery, jQuery.fancybox));

            $(".fancybox")
                /*.attr('rel', 'gallery')// am commenting this out so each gallery only loops through itself versus into the next gallery*/
                .fancybox({
                    nextMethod : 'resizeIn',
                    nextSpeed  : 200,//this rule controls the white flash action that happens just after an image is advanced

                    prevMethod : false,

                    helpers : {
                        title : {
                            type : 'outside'
                        }
                    }
                }); //end fade transition

        });         
    </script>

1 个答案:

答案 0 :(得分:0)

您的脚本问题就在这一行

beforeShow: function () {
    this.title = (this.title ? " + this.title + '<br />' : ") + 'Image ' + (this.index + 1) + ' of ' + this.group.length;
}

您说您关注了我的帖子here,但我的代码中的相同行似乎是:

beforeShow: function () {
    this.title = (this.title ? '' + this.title + '<br />' : '') + 'Image ' + (this.index + 1) + ' of ' + this.group.length;
}

你是否足够敏锐看到差异? ......所以让我们将它们按照相同的顺序并排放置(只有相关部分):

this.title = (this.title ? " + this.title + '<br />' : ")   // you
this.title = (this.title ? '' + this.title + '<br />' : '') // me

我的脚本中的单引号创建了一个空格,而双引号则创建了一个不应该存在的字符串。