Custom post type slideshow background images to insert in a plugin

Question

I have a slideshow which is populated with background images from a custom post type. Here's my code:

<?php
// start the loop
foreach($slider_posts as $post) : setup_postdata($post);
// get image
$thumbnail = wp_get_attachment_image_src(get_post_thumbnail_id(), 'home-slide');
?>

<script type="text/javascript">
        $(function(){

            $.mbBgndGallery.buildGallery({
//              containment:"#wrapper",
                containment:"body",
                timer:5000,
                effTimer:5000,
                controls:"#controls",
                grayScale:false,
                autoStart:true,         

                images:[
                    "<?php echo $thumbnail[0]; ?> "
                ],

            });
        });
    </script>
<?php endforeach; ?>
<?php wp_reset_postdata(); ?>

<?php } ?>

This code displays just one slide image and not all the slide's images!

How can I fix it?

Answer 1

Try moving your foreach into the script tag, as such :

In the images parameter of your javascript :

 //[...]
 images:[
      <?php

      foreach( $slider_posts as $post )
      {

      $thumb = wp_get_attachment_image_src(get_post_thumbnail_id(), 'home-slide');

      echo '"' . $thumb[0] . '",'; //Assuming images are separated by a comma

      }          

      ?>
 ]

You may need to alter the example a bit to get it working properly.

Meta Example

 foreach( $slider_posts as $post )
 {
      $meta = get_post_meta( $post->ID, 'the-meta-field-name', true ); //replace true with false if you want an array of meta field results
 }