For loop inside object javascript

Question

I'm using lightGallery and I'm using dynamic creation of galleries, this is the code to generate just one image:

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

This id variable is always the same, but I want to loop through a number which I take for example from variable x. So, if x=4 the code generated would look like this:

$(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'
    }]
});

So I guess the question is how to include a for loop inside an object, if that's even possible, thanks in advance!

Sorry if this is a newbie question, I'm not that good with jQuery and javascript :( — Peter Zelak, Feb 29 '16 at 07:17
Create `array` of `objects` before initializing `lightGallery` and then pass the variable which is holding `array` — Rayon, Feb 29 '16 at 07:17

nstoitsev · Answer 1 · 2016-02-29T07:25:58.547

No. It's not possible to have control structures(like loops) inside an object definition. You need to create your array of images first, like this:

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

And then to pass it onto the object definition:

$(this).lightGallery({
    dynamic:true,
    dynamicEl: dynamicEl
});

Dave Amit · Answer 2 · 2016-02-29T07:23:25.977

0

Try this

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

This is as inline as it can get ;)

Hope this helps ...

edited Feb 29 '16 at 07:23

answered Feb 29 '16 at 07:19

Dave Amit

2,299
12
17

I have updated my answer to be more manageable! Please mark it as answer so as other can easily identify what worked for you! Keep up the good work and be awesome! – Dave Amit Feb 29 '16 at 07:24

score 0 · Answer 3 · answered Feb 29 '16 at 07:21

first create a method to dynamically generate thumbs

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

then use the same while calling the gallery

$(this).lightGallery({
    dynamic:true,
    dynamicEl: genThumbs(5, id)
});

For loop inside object javascript

3 Answers3