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.