Dynamic content in JavaScipt

If got this full screen background slider (Vegas) on a site thats using Wordpress. Now the slider is called using this script:

<script>
        $("body").vegas({
            delay: 7000,
            timer: false,
            shuffle: true,
            transition: 'fade',
            transitionDuration: 2000,
            slides: [
                { src: "photo01.jpg" },
                { src: "photo02.jpg" },
                { src: "photo03.jpg" },
                { src: "photo04.jpg" }
            ],

            overlay: '01.png'
        });
        </script>

Within Wordpress it is possible to make a loop which "loops" the content that is in that file. What I would like to do is something like this:

....   
    slides: [
                    <?php get_template_part('loop-backgrounds'); ?>
                    { src: "some-file-to-stop-the-backgrounds.jpg" }
                ],
....

The loop-backgrounds would look something like this:

    <?php $loop = new WP_Query( array( 'post_type' => 'backgrounds', 'posts_per_page' => -1, 'orderby'=>'id', 'order' => 'ASC') );
        while ( $loop->have_posts() ) : $loop->the_post(); ?>

        { src: <?php if ( has_post_thumbnail() ) {
                the_post_thumbnail();
            } ;?> },

<?php endwhile; wp_reset_query(); ?>

This some-file-to-stop-the-backgrounds.jpg doesn't have a , at the end so it wouldn't break the code (i think). Is this at all possible?

via Chebli Mohamed