Using Backstretch to generate a slideshow

Question

I have a site where the client wants to add images as a fullscreen slideshow behind the site container. I've used backstretch.js for this and can get it to show up a single image by using straight channel entries but this is no good. I've created a channel just for the images where each entry is a single image file.

 {exp:channel:entries channel="background_images" dynamic="no" orderby="date" sort="desc" status="open"}

  <script>
        $("#stretch").backstretch([
        "{background_images}",
         ], {duration: 5000, fade: 750});
  </script>

{/exp:channel:entries}

I then tried to set up an embed, where I used this code on my embed page:

{exp:channel:entries channel="background_images" dynamic="no" orderby="date" sort="desc" status="open" backspace="1"}"{background_images}",{/exp:channel:entries}

and called in into my template like so:

<script>
$("#stretch").backstretch([
    {embed="en/background_imgs"}
 ], {duration: 5000, fade: 500});
</script>

But using this method, I get a console error:

Type Issue: 'undefined' is not a function (evaluating '$("#stretch").backstretch')

Am I going about this the wrong way? Has anyone implemented this successfully in the past that could give me a little help.

Answer 1

A couple of things here. The best way to see what's actually happening is to look at the source code of your page - that way you can see exactly what the final output of your code is and spot the errors.

Second, when adding inline javascript to an EE template, you need to break serialized arrays (arguments inside curly braces) up over newlines, lest EE try to interpret them as EE variables (which use the same syntax).

Third, your code will leave a trailing comma in the images array, which can trigger JS errors. The backspace parameter can help with that.

I'd use this code:

<script>
    $("#stretch").backstretch(
        [{exp:channel:entries channel="background_images" dynamic="no" status="open" backspace="1" disable="member_data|pagination|categories"}"{background_images}",{/exp:channel:entries}], 
        {
            duration: 5000,
            fade: 750
        }
    );
</script>