I am building a WordPress website where I want a fullscreen homepage background slider. I really like the jQuery backstretch plugin here: https://github.com/srobbin/jquery-backstretch
(If you take a quick peek at how it works there, choose the second on the Demo dropdown.)
To make the plugin work you need to use this JS snippet:
<script>
$.backstretch([
"http://dl.dropbox.com/u/515046/www/outside.jpg"
, "http://dl.dropbox.com/u/515046/www/garfield-interior.jpg"
, "http://dl.dropbox.com/u/515046/www/cheers.jpg"
], {duration: 3000, fade: 750});
</script>
As you can see, the images need to be declared within the JS. I need to be able to upload as many images as I want, run a loop to get the URL's for each image then display them. I will need to pass these via PHP.
The PHP snippet for getting each image will be: <?php the_field('background_image'); ?>
How can I alter the script to run a loop and get the image/s via PHP?
Thanks in advance
Edit:
This is the loop to display all of my images using ACF plugin and the options page add-on: '
<ul>
<?php while(has_sub_field('slider_images','option')): ?>
<li><img src="<?php the_sub_field('slider_image'); ?>" /></li>
<?php endwhile; ?>
</ul>
<?php endif; ?>'