custom post type with supersized plugin [closed]

Question

Is not working. Is Showing only just the first image's custom post type.

 <?php
// get custom post type ==> slides
global $post;
$args = array(
    'post_type' =>'slides',
    'numberposts' => -1,
    'orderby' => 'ASC'
);
$slider_posts = get_posts($args);
?>

<?php
    // show slider only if slides exist
    if($slider_posts) {
    ?>

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

                        //Functionality
                        slideshow               :   1,      //Slideshow on/off
                        autoplay                :   1,      //Slideshow starts playing automatically
                        start_slide             :   1,      //Start slide (0 is random)
                        random                  :   0,      //Randomize slide order (Ignores start slide)
                        slide_interval          :   6000,   //Length between transitions
                        transition              :   1,      //0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
                        transition_speed        :   800,    //Speed of transition
                        new_window              :   1,      //Image links open in new window/tab
                        pause_hover             :   0,      //Pause slideshow on hover
                        keyboard_nav            :   1,      //Keyboard navigation on/off
                        performance             :   1,      //0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
                        image_protect           :   1,      //Disables image dragging and right click with Javascript
                        image_path              :   '<?php echo get_template_directory_uri(); ?>/images/', //Default image path

                        //Size & Position
                        min_width               :   0,      //Min width allowed (in pixels)
                        min_height              :   300,        //Min height allowed (in pixels)
                        vertical_center         :   0,      //Vertically center background
                        horizontal_center       :   1,      //Horizontally center background
                        fit_portrait            :   0,      //Portrait images will not exceed browser height
                        fit_landscape           :   0,      //Landscape images will not exceed browser width

                        //Components
                        navigation              :   1,      //Slideshow controls on/off
                                    thumbnail_navigation    :   0,      //Thumbnail navigation
                        slide_counter           :   1,      //Display slide numbers
                        slide_captions          :   1,      //Slide caption (Pull from "title" in slides array)
                        slides                  :   [           // Slideshow Images
                    <?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');
                    ?>

                    {image :"<?php echo $thumbnail[0]; ?> "}


                                ]

                });


        });
    </script>

The same with:

<?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');
    ?>

    {image : echo '"' . $thumb[0] . '",';}                                          

                                            ]

    });

How can I do?

Answer 1

slides                  :   [
    // Slideshow Images
    <?php
    // start the loop
    foreach($slider_posts as $post){
        setup_postdata($post);
        // get image
        if(has_post_thumbnail($post->ID)){
            $thumbnail = wp_get_attachment_image_src(get_post_thumbnail_id(), 'home-slide');
            $images[] = '{image :"'.$thumbnail[0].'"}';
        }
    }
    echo implode(',',$images);
    ?>
]

Issues:

• You started a foreach loop but never closed it
• You never added commas at the end of each image definition leading to JS syntax errors
• You failed to indent correctly, making the above two issues harder to find
• You did not check if the post actually has a featured image to display

In future it would be a good idea to check your Javascript console for errors first, you can access this by pressing f12 in most browsers to bring up the developer tools