Insert an array of images in another array-CodePudding

I have been trying to dynamically insert an array of images and thumbnails into the js gallery but have been having trouble loading data via javascript. I have an array of images and thumbnails that I put in my array called imgArray. Cant seem insert the imgArray in the data array dynamically how the fotorama docs say to show my images in the gallery. Any help is greatly appreciated.

https://fotorama.io/docs/4/initialization/

var imgArray = [];
for ( img in images ) {
        imgArray.push('{img:"'   images[img].medium   '", thumb:"'   images[img].medium   '"}');
    }

/* imgArray now has below data
{img:"https://dl5zpyw5k3jeb.cloudfront.net/photos/pets/56517207/1/?bust=1659229627&width=300", thumb:"https://dl5zpyw5k3jeb.cloudfront.net/photos/pets/56517207/1/?bust=1659229627&width=300"},
{img:"https://dl5zpyw5k3jeb.cloudfront.net/photos/pets/56517207/2/?bust=1659229629&width=300", thumb:"https://dl5zpyw5k3jeb.cloudfront.net/photos/pets/56517207/2/?bust=1659229629&width=300"}
 */ 


$('.fotorama').fotorama({
    data: [
        //Need to get imgArray in here
      ]
  });

CodePudding user response：

Are you expecting something like this

var imgArray = [];
let images = {family:
    {
        medium:'medium',
        thumb:'thumb'
        },
   employ:{
        medium:'medium',
        thumb:'thumb'
        }
};
for ( img in images ) {
    //Checks if object has any pptys
    if(Object.keys(images[img]).length){
       imgArray.push({img: images[img].medium , thumb: images[img].thumb});
    }
}

$('.fotorama').fotorama({
  data: imgArray 
 });
console.log(imgArray)

As per your code you are just creating an array of string instead of array of objects.