jQuery Backstretch and PHP

2 Views

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.)

Read More

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; ?>'
Post Views: 2

Related posts

Leave a Reply

2 comments

  1. I managed to do it with the following code:

            <?php 

        $images = get_field('bg_images','option');

            if ($images): 

                foreach($images as $image): ?>

                <?php $imageList .= '"'. $image['url'] .'",'; ?>

            <?php endforeach;
            endif;

        $imageList = rtrim($imageList, ',');

    ?>

        <script>            
    $.backstretch([ 
          <?php echo $imageList; ?>
      ], {duration: 3000, fade: 750});
   </script>

    Thanks for the help @mcNab

  2. It depends on how these images are associated with posts/options, that is not clear from your question. The PHP you’ve suggested there looks like an option attached to an individual page rather than array full of images. However for the sake of your example let’s assume that you want to pull the background image out of the first 5 posts in a custom post type called home_slider and use those;

            <?php

            $imgList = '';

            $homeslider_query = new WP_Query(array('post_type' => 'home_slider', 'numberposts' => '5', 'orderby' => 'menu_order', 'order' => 'ASC' ));

            if ( $homeslider_query->have_posts() ) :  
                while ($homeslider_query->have_posts()) : $homeslider_query->the_post(); 

                    // Build your list of images
                    $imgList .= '"'. the_field('background_image') .'",';

                endwhile;
            endif;

            // Trim trailing comma from list
            $imgList = rtrim($imgList, ',');

        ?>

    Now, as you have the script tags there that tells me the JS is in the page itself, probably the head, rather than a .js file so;

            <script>            
        $.backstretch([ 
              <?php echo $imgList; ?>
          ], {duration: 3000, fade: 750});
        </script>