0

我正在使用 lightGallery，我正在使用动态创建画廊，这是只生成一张图像的代码：

$(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

尝试这个

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 回答
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 回答