Question

我正在使用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);
        }       

    });
}

Answer 1

好的 - 因为我无法在任何地方找到答案并且设法创建一个重新排列数组的方法 - 这里也适用于那些遇到同样问题的人：

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);
        }       

    });
}

jQuery数组以特定索引开始，并在数组末尾之前移动

1 个答案: