0

我正在使用 Fancybox jQuery 插件，当点击事件发生时我手动调用它。我面临的问题是当我使用一组图像以便能够使用箭头在它们之间导航时。为此，组中的所有图像都具有相同的“rel”属性。下面的代码似乎一切正常，我已经设法编写了，但问题出在第一个加载的图像上，因为即使我点击第二个图像 - 第一个显示在灯箱中，因为这是第一个索引创建的数组。

所以我的问题是 - 我如何重新排列数组，以便单击的项目将成为第一个，而前面的项目将移动到数组的末尾 - 基本上是移动项目。

示例是：

var thisArray = [ item-1, item-2, item-3 ];
var thisArray = [ item-2, item-3, item-1 ];

我的代码如下（我也已经有了'currentIndex'变量，它返回被点击元素的索引：

lightbox : function(obj) {
    "use strict";
    obj.live('click', function(e) {
        e.preventDefault();
        var thisObj = $(this);

        var thisOptions = {
            beforeLoad  : function() {
                $('body').css('overflow', 'hidden');
            },
            afterClose  : function() {
                $('body').css('overflow', 'auto');
            },              
            scrolling   : 'no',
            fitToView   : true,
            margin      : 0,
            padding     : 0,
            closeBtn    : false,
            closeClick  : true,
            arrows      : true,
            helpers     : {
                title : {
                    type : 'inside'
                },
                overlay : {
                    speedIn  : 0,
                    speedOut : 300,
                    opacity  : 1,
                    css      : {
                        cursor : 'pointer',
                        'background-color' : '#000'
                    },
                    closeClick: true
                }
            }
        };

        var thisAttrRel = thisObj.attr('rel');
        if (thisAttrRel) {
            var thisObjs = $('a[rel='+thisAttrRel+']');
            if (thisObjs.length > 1) {
                var currentIndex = thisObjs.index(thisObj);
                var thisItems = [];
                jQuery.each(thisObjs, function() {
                    var thisHref = $(this).attr('href');
                    var thisTitle = $(this).attr('title');
                    thisItems.push({ 'href' : thisHref, 'title' : thisTitle });
                });
                jQuery.fancybox.open(thisItems, thisOptions);
            }
        } else {
            thisOptions.href = thisObj.attr('href'),
            jQuery.fancybox(thisOptions);
        }       

    });
}
4

1 回答 1

0

好的 - 因为我在任何地方都找不到答案，所以我尝试并设法创建了一种重新排列数组的方法 - 这里适用于那些也遇到同样问题的人：

arrayReArrange : function(thisFirst, thisArray) {
    "use strict";
    if (thisFirst !== 0 && thisArray && thisArray.length > 0) {
        var thisNewArray = [];
        var i = 0;
        var thisIndex = 0;
        while (i < (thisArray.length + thisFirst)) {
            if (thisFirst === i) {
                thisNewArray.push(thisArray[thisIndex]);
            } else if (thisNewArray.length > 0) {
                thisNewArray.push(thisArray[thisIndex]);
            }
            if (thisIndex === (thisArray.length - 1)) {
                thisIndex = 0;
            } else {
                thisIndex++;
            }               
            i++;
        }
        return thisNewArray;
    } else {
        return thisArray;
    }
}

现在我可以从我的 lightbox() 方法中调用它：

lightbox : function(obj) {
    "use strict";
    obj.live('click', function(e) {
        e.preventDefault();
        var thisObj = $(this);

        var thisOptions = {
            beforeLoad  : function() {
                $('body').css('overflow', 'hidden');
            },
            afterClose  : function() {
                $('body').css('overflow', 'auto');
            },              
            scrolling   : 'no',
            fitToView   : true,
            margin      : 0,
            padding     : 0,
            closeBtn    : false,
            closeClick  : true,
            arrows      : true,
            helpers     : {
                title : {
                    type : 'inside'
                },
                overlay : {
                    speedIn  : 0,
                    speedOut : 300,
                    opacity  : 1,
                    css      : {
                        cursor : 'pointer',
                        'background-color' : '#000'
                    },
                    closeClick: true
                }
            }
        };

        var thisAttrRel = thisObj.attr('rel');
        if (thisAttrRel) {
            var thisObjs = $('a[rel='+thisAttrRel+']');
            if (thisObjs.length > 1) {                  
                var thisItems = [];
                jQuery.each(thisObjs, function() {
                    var thisHref = $(this).attr('href');
                    var thisTitle = $(this).attr('title');
                    thisItems.push({ 'href' : thisHref, 'title' : thisTitle });
                });
                var currentIndex = thisObjs.index(thisObj);
                thisItems = systemObject.arrayReArrange(currentIndex, thisItems);
                console.log(thisItems);
                jQuery.fancybox.open(thisItems, thisOptions);
            }
        } else {
            thisOptions.href = thisObj.attr('href'),
            jQuery.fancybox(thisOptions);
        }       

    });
}
于 2012-06-27T14:21:29.363 回答