Search code examples
jqueryarraysjquery-backstretch

jQuery Backstretch - Create slideshow with images' src attribute

I'm using jQuery Backstretch's slideshow functionality. I'm going to be using it across multiple pages, all with different sets of images. I thought it would make more sense to look through the images in the wrapper element, get the src attributes, and then insert them into the $.backstretch() function.

I've never been good at arrays, but I'd imagine that's what I need to create to get this to work.

I've found an example of how to accomplish this if you're only using one image, but I want to use two or more so I can take advantage of the slideshow functionality.

Here's an example of how it can be accomplished with just one image:

html

<img src="/media/img/test.jpg" id="bgimg" />

js

var imgObj = $("#bgimg");
var imgSrc = imgObj.attr("src");
imgObj.remove(); //remove original image from dom

$.backstretch(imgSrc, {centeredX:true, centeredY:true});

Thanks!

Solution

  • Loop the items with an each function then push them into an array 

    var list = new Array() ;
      $('OBJECT PATH').each(function(){
        list.push($(this).attr("src"));
        $(this).remove();
      });

      $.backstretch(list, {centeredX:true, centeredY:true}) ;