0

私は lightGallery を使用しており、ギャラリーの動的作成を使用しています。これは、画像を 1 つだけ生成するコードです。

$(this).lightGallery({
    dynamic:true,
    dynamicEl: [{
        'src':'css/images/pictures/gal_'+id+'/1.jpg',
        'thumb':'css/images/thumbnails/gal_'+id+'/1.jpg'
    }]
});

この id 変数は常に同じですが、たとえば variable から取得した数値をループしたいと考えていますx。したがって、x=4生成されたコードが次のようになるとします。

$(this).lightGallery({
    dynamic:true,
    dynamicEl: [{
        'src':'css/images/pictures/gal_'+id+'/1.jpg', //here's 1
        'thumb':'css/images/thumbnails/gal_'+id+'/1.jpg'
    },{
        'src':'css/images/pictures/gal_'+id+'/2.jpg', //here's 2 and so on
        'thumb':'css/images/thumbnails/gal_'+id+'/2.jpg'
    },{
        'src':'css/images/pictures/gal_'+id+'/3.jpg',
        'thumb':'css/images/thumbnails/gal_'+id+'/3.jpg'
    },{
        'src':'css/images/pictures/gal_'+id+'/4.jpg',
        'thumb':'css/images/thumbnails/gal_'+id+'/4.jpg'
    }]
});

したがって、問題はオブジェクト内に for ループを含める方法だと思います。それが可能であれば、事前に感謝します!

4

3 に答える 3

1

いいえ。オブジェクト定義内に制御構造 (ループなど) を含めることはできません。次のように、最初に画像の配列を作成する必要があります。

var dynamicEl = [];
for (var i = 1; i <= 4; i++) {
  dynamicEl.push({
    'src':'css/images/pictures/gal_' + id + '/'+ i + '.jpg',
    'thumb':'css/images/thumbnails/gal_' + id + '/' + i + '.jpg'
  });
}

そして、それをオブジェクト定義に渡します:

$(this).lightGallery({
    dynamic:true,
    dynamicEl: dynamicEl
});
于 2016-02-29T07:19:36.863 に答える
0

最初にサムを動的に生成するメソッドを作成します

function genThumbs(count, id)
{
   var arr = [];
   for ( var counter = 1; counter <= count; counter++)
   {
      arr.push( {
        'src':'css/images/pictures/gal_'+id+'/' + counter + '.jpg',
        'thumb':'css/images/thumbnails/gal_'+id+'/' + counter + '.jpg'
      } );
   }
   return arr;
}

次に、ギャラリーを呼び出すときに同じものを使用します

$(this).lightGallery({
    dynamic:true,
    dynamicEl: genThumbs(5, id)
});
于 2016-02-29T07:21:55.790 に答える
0

これを試して

var genEls = function(id, count)
{
    var els = [];
    for(i = 1; i <= count; i++)
    {
        els.push({
            'src':'css/images/pictures/gal_'+ id + '/' + i + '.jpg',
            'thumb':'css/images/thumbnails/gal_' + id + '/' + i + '.jpg',
        });
    }
return els;
}   

var id = 3;
var count = 4;
$(this).lightGallery({
    dynamic:true,
    dynamicEl: genEls(id,count);
});

これはできる限りインラインです;）

お役に立てれば ...

于 2016-02-29T07:19:57.323 に答える