0

クリック イベントが発生したときに手動で呼び出す Fancybox jQuery プラグインを使用しています。私が直面している問題は、矢印を使用して画像間を移動できるようにするために画像のグループを使用しているときです。この目的のために、グループ内のすべての画像は同じ「rel」属性を持ちます。私が書いた以下のコードではすべてがうまくいくようですが、問題は最初に読み込まれた画像にあります.2番目の画像をクリックしても-最初の画像はアレイを作成しました。

だから私の質問は - クリックしたアイテムが最初のアイテムになり、前のアイテムが配列の最後に移動するように配列を再配置するにはどうすればよいですか - 基本的にアイテムを移動します。

例は次のとおりです。

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 に答える