Supersized.js how do you call JSON Encoded Data into the settings script

Question

Okay I'm quite a newbie at this but here goes:

I'm using supersized.js on wordpress site to create full size background image slideshows for the front page suffice to say the script is setup and its working now my next problem was to make the script pull the images using wp_attachment

In my functions.php file I created this:

// Get all of the images attached to the current post
// These images will be used in the Supersized homepage gallery
function supersized_get_images($size = 'full') {
    global $post;

    $photos = get_children( array('post_parent' => $post->ID, 'post_status' =>     'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => 'ASC', 'orderby' => 'menu_order ID') );

    $results = array();

    if ($photos) {
        foreach ($photos as $photo) {
        // get the correct URL for the selected size
        $results['image'] = wp_get_attachment_url($photo->ID);
    }
}
// encode into JSON format and pass to javascript supersettings.js
echo json_encode($results); 
}

So anyway (I put the echo ) in because I wanted to see that it was producing the correct JSON format. The output on echo looks like this:

{"image":"http:\/\/pilarcorrias.secondvariety.org\/wp-content\/uploads\/0bcf5aa159739b260a77758c7d33699b.jpg"}

This I'm assuming is right. Supersized has a setting file that looks like this:

jQuery(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          :   3000,   //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        :   500,    //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              :   '/../../../slideshow/', //Default image path

                //Size & Position
                min_width               :   0,      //Min width allowed (in pixels)
                min_height              :   0,      //Min height allowed (in pixels)
                vertical_center         :   1,      //Vertically center background
                horizontal_center       :   1,      //Horizontally center background
                fit_portrait            :   1,      //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    :   1,      //Thumbnail navigation
                slide_counter           :   1,      //Display slide numbers
                slide_captions          :   1,      //Slide caption (Pull from "title" in slides array)
                slides                  :   [       //Slideshow Images
                                                    {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.1/slides/quietchaos-kitty.jpg', title : 'Quiet Chaos by Kitty Gallannaugh', url : 'http://www.nonsensesociety.com/2010/12/kitty-gallannaugh/'},  
                                                    {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.1/slides/wanderers-kitty.jpg', title : 'Wanderers by Kitty Gallannaugh', url : 'http://www.nonsensesociety.com/2010/12/kitty-gallannaugh/'},  
                                                    {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.1/slides/apple-kitty.jpg', title : 'Applewood by Kitty Gallannaugh', url : 'http://www.nonsensesociety.com/2010/12/kitty-gallannaugh/'}  
                                            ]


            }); 
        });

The last line in this file declares the parameter slides and then passes image references to the slideshow. Now I've checked and the slideshow functions perfectly well without the URL and TITLE information, meaning I only need to give it the image object which here is the file URI meaning my bit of JSON should work verbatim. Now that I know I am encoding the PHP array correctly how do I get it into the supersettings.js file above... been searching everywhere but not found something that explains it in a way I can get my tiny brain around. Any help would be much appreciated.

Answer 1

Nice one! Also, if you want to exclude the thumbnail image from your array:

function supersized_get_images($size = 'full') {
global $post;
$thumb_id = get_post_thumbnail_id(get_the_ID()); // gets the post thumbnail ID
$photos = get_children( array('post_parent' => $post->ID, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => 'ASC', 'orderby' => 'menu_order ID', 'exclude' => $thumb_id) );

Answer 2

Otherwise if you won't mix up php json to php to json and so on; if you want a clear way to parse the json file, then do it with getJson.

            jQuery(function($){


            var urltojson = 'getjson.json';




            $.getJSON(urltojson, function(photos){


            $.supersized({



                // Functionality

                slide_interval          :   5000,       // Length between transitions

                transition              :   6,          // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left

                transition_speed        :   1000,       // Speed of transition



                // Components                           

                slide_links             :   'blank',    // Individual links for each slide (Options: false, 'num', 'name', 'blank')

                slides                  :   photos



            });
            });

        });

If Json is fully load, supersized will be start. Thats all without dirty php code in Javascript.

Answer 3

Solved it I'm a numpty - I just put the script in the functions file and called it the wp-footer hook which allowed me to echo the json variables in the script itself. Just for anybody else attempting to used supersized with the Wordpress attachment system here is the code I used in full:

Call attachments and create json array:

// Get all of the images attached to the current post
// These images will be used in the Supersized homepage gallery

function supersized_get_images($size = 'full') {
global $post;

$photos = get_children( array('post_parent' => $post->ID, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => 'ASC', 'orderby' => 'menu_order ID') );

$results = array();

if ($photos) {
    foreach ($photos as $photo) {
    $keys [] = $photo->ID;
    $captions [] = $photo->post_excerpt;
    $descriptions [] = $photo->post_content;
        // get the correct URL for the selected size
        $results[] = array('image' => wp_get_attachment_url($photo->ID, 'full'), 'title' => '', 'url' => get_attachment_link($photo->ID));
    }
}
return str_replace('\/', '/', json_encode($results));
}

Okay so that got the images, created the array and also correctly formatted the URLs stripping the escaped slashes which were appearing like this http:\\/\\/www. Next I had to embed the script in the footer before the body tag so here:

function super_settings() { ?>
<script type="text/javascript">
jQuery(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          :   3000,   //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        :   500,    //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              :   '/../../../slideshow/', //Default image path

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

                //Components
                navigation              :   0,      //Slideshow controls on/off
                thumbnail_navigation    :   1,      //Thumbnail navigation
                slide_counter           :   1,      //Display slide numbers
                slide_captions          :   1,      //Slide caption (Pull from "title" in slides array)
                slides                  :   <?php echo supersized_get_images(); ?>


            }); 
        });

</script>
<?php }
add_action('wp_footer', 'super_settings');

That adds an action to wp_footer which calls the super_settings function embedding the script in the footer and you can see the last line in the script echoes the supersized_get_images() function and outputs the key and value array directly into the javascript.

I'm glad I could answer this myself as its such a noob question I felt embarrassed asking it but I hope this helps people who want to used supersized without having to use an custom upload path in wordpress or mess around with FTP - just use your standard wordpress post gallery. ] All you have to do is include the supersized.js and the settings script on the page where you want the background to appear. Viola! If anyone has improvement they can suggest by all mean post them here.