1

adaneoによる前/次のボタンを備えたこの素晴らしい画像スライダーに基づいて、この回答は次のとおりです：画像ギャラリーの次と前のボタン

彼の JSFiddle はここにあり、1 つのページで 2 つの別々のギャラリーで作業する必要があることを除いて、私が必要とすることを実行します: http://jsfiddle.net/adeneo/5VEeH/3/

これは私の分岐した JSFiddle です。これは、マークアップを複製すること以外はあまり行っていません: http://jsfiddle.net/cbp9T/1/

1 ページで 2 回使用できるように書き直すにはどうすればよいでしょうか。全体を独自の関数にして、最後に変数値を削除してから、2番目のギャラリーの新しいセレクターを使用して新しい関数に複製しますか? または？

このような問題に答える JSFiddles への提案/リンクは、非常に感謝しています。

4

1 に答える 1

2

display、、、、の一意の ID を作成し、CSS でnextそれぞれのスタイルprevを設定する必要があります。img-listdisplay

デモ

(function($) {
    $.fn.extend({
        gallerify: function(o) {
            return this.each(function() {
                var $this = "#" + this.id;
                var E = $("a", o.imgList), N = 0, T = E.length-1;
                $($this).html('<img src="'+$(E[N]).attr('href')+'" />');
                var btns = o.next.concat(",",o.prev);
                $(btns).on('click', function() {
                    var A = this.id == (o.next).substr(1,o.next.length),X=A?T:0,Y=A?0:T,Z=A?N+1:N-1;N=N==X?Y:Z;
                    $($this).html('<img src="'+$(E[N]).attr('href')+'" />');
                });
                E.on('click', function(e) {
                    var S = $(this).attr('href');
                    $($this).html('<img src="'+S+'" />');
                    e.preventDefault();
                });
            });
        }
    });
})(jQuery);


$("#display").gallerify({imgList:'#img-list',next:'#next',prev:'#prev'});
$("#display2").gallerify({imgList:'#img-list2',next:'#next2',prev:'#prev2'});
于 2012-08-03T18:26:12.220 に答える