Question

I’m working with the CrossSlide jQuery plugin and the documentation shows the following code:

<script>
  $(function() {
    $('#slideshow').crossSlide({
      sleep: 2,
      fade: 1
    }, [
      { src: 'picture1.jpg' },
      { src: 'picture2.jpg' },
      { src: 'picture3.jpg' },
      { src: 'picture4.jpg' }
    ])
  });
</script>

What I want to do is pass in an array of object with src property instead of manually passing in the pictures. I have been able to create an object but I’m not sure if there is a way do that.

Does Javascript provide any method/ways of taking the object and having it, probably at runtime, expand or the like?

If you think there is another plugin I should look into instead, I’m open to suggestions.

Answer 1

If I understand your question correctly, which others have said is confusing, you want to dynamically create the Array of objects with src properties. I’m assuming you’ll be storing these images in a database and want a way to dynamically get them and add them to the slide show. One way to do that is something like this:

var data = [];

function buildImagesArray(array) {
  // get the images you want from somewhere, like a database perhaps?
  var images = methodToGoGetImages();
  // iterate over the images
  images.forEach(function (img) {
    // create new objects with a src property
    var imageObj = {};
    // add the path of the image as the value of the src property
    imageObj.src = img.url;

    // push this object into the data Array
    array.push(imageObj);
  };

}

buildImagesArray(data);

$(function() {
  $('#slideshow').crossSlide({
    sleep: 2,
    fade: 1
   }, data)
});

I’ve left some implementation details out for brevity but hopefully you get the idea.