Question

I originally thought this was a WordPress issue – but realize after hours of attempts – this might be a more general JavaScript question

I’ve been struggling with this for a few hours and am hoping that you can point me in the right direction. I’ve been using this tutorial to help me understand how wp_localize_script works (this is a WordPress function that allows you to pass PHP variables to JS files). First, I enqueued my script as such:

function of_load_scripts() {

    if (!is_admin()) {

        if(is_front_page()) {
            global $post;
            wp_register_script('supersized.shutter', get_template_directory_uri().'/js/mylibs/supersized.shutter.min.js', 'jquery');
            wp_enqueue_script('supersized.shutter');
            wp_register_script('shutter_home', get_template_directory_uri().'/js/shutter-home.js', 'jquery');
            wp_enqueue_script('shutter_home');
        }

        $tester = get_field('text');

        // Add some parameters for the JS.
        wp_localize_script(
            'shutter_home',
            'shutter',
            array(
                'testerjs' => $tester
            )
        );
    }

}
add_action('wp_print_scripts', 'of_load_scripts');

I’ve verified this is outputting to the HTML source of the page:

<script type='text/javascript'>
/* <![CDATA[ */
var shutter = {"testerjs":"This is a test value"};
/* ]]> */
</script>

Then, in my shutter-home.js file, I have the following:

jQuery(document).ready(function($) {

    var testerjs = shutter.testerjs;
    alert(testerjs);

    $.supersized({

        // Functionality
        slideshow               :   1,          // Slideshow on/off
        autoplay                :   1,          // Slideshow starts playing automatically
        start_slide             :   1,          // Start slide (0 is random)
        stop_loop               :   0,          // Pauses slideshow on last slide
        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        :   700,        // 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             :   0,          // 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
        image_protect           :   0,          // Disables image dragging and right click with Javascript

        // 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_always              :   0,          // Image will never exceed browser width or height (Ignores min. dimensions)
        fit_portrait            :   1,          // Portrait images will not exceed browser height
        fit_landscape           :   0,          // Landscape images will not exceed browser width

        // Components                           
        slide_links             :   'blank',    // Individual links for each slide (Options: false, 'num', 'name', 'blank')
        thumb_links             :   1,          // Individual thumb links for each slide
        thumbnail_navigation    :   0,          // Thumbnail navigation

        // Components                           
        slides                  :   [           // Slideshow Images
                                        {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-1.jpg', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-1.jpg'},
                                        {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-2.jpg', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-2.jpg'},  
                                        {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-3.jpg', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-3.jpg'},
                                        {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-1.jpg', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-1.jpg'},
                                        {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-2.jpg', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-2.jpg'},
                                        {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-3.jpg', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-3.jpg'},
                                        {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-1.jpg', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-1.jpg'},
                                        {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-2.jpg', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-2.jpg'},
                                        {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-2.jpg', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-2.jpg'},
                                        {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-2.jpg', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-2.jpg'},
                                        {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-2.jpg', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-2.jpg'},
                                        {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-3.jpg', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-3.jpg'}
                                    ],
        // Theme
        progress_bar            :   0           // Slide bar that shows duration until next transition

    });

});

which correctly just outputs This is a test value (as I did a quick alert()). The problem I’m having is passing this value within the $.supersized function (specifically in the slides area in the image position). This may be a general JS question – but how would I go about sticking in that testerjs variable into that area? I’ve tried things like:

{image : ''+ testerjs + '', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-1.jpg'},

with no dice. Any help would be greatly appreciated!

testerjs is just an example variable – it would normally hold an image URL – so just used for example purposes

Answer 1

If you can’t just pass an array of objects to be built as a JavaScript object by the wp_localize_script function and pass that as the slides parameter you could build up your array of URLs in php such as

$slides = array(
  array('image' => 'http://...', 'thumb' => 'http://...'),
  array('image' => 'http://...', 'thumb' => 'http://...'),
  array('image' => 'http://...', 'thumb' => 'http://...')
);

json_encode this array which will then give you the data structure you require for the slides parameter in your JavaScript.

wp_localize_script(
  'shutter_home',
  'shutter',
  array( 'slides' => json_encode($slides) )
);

Then you should just be able to parse this and use it as the slides parameter of the object passed to the $.supersized function.

slides: $.parseJSON(shutter.slides.replace('"', '"')

Best bet would be to do the parsing before using the resulting object so that you can catch any errors that may occur with possibly malformed JSON.

---

edit: Corrected code from snippet provided in comments.

You are appending each image/thumb object as a string so these will be strings still in the js. Also you had a couple of syntax errors in the JavaScript for the slides parameter (missing parenthesis and a semi-colon) and I removed the unnecessary string replacement.

// php
$imageArray = array();
if(get_field('image_container')) {
    while(the_repeater_field('image_container')) {
        $imageSource = wp_get_attachment_image_src(get_sub_field('image'), 'full');
        $thumbSource = wp_get_attachment_image_src(get_sub_field('image'), 'background_thumb');
        array_push($imageArray, array('image'=> $imageSource[0], 'thumb' => $thumbSource[0]));
    }
}

$imageOutput = json_encode($imageArray);

// Add some parameters for the JS.
wp_localize_script(
    'shutter_home',
    'shutter',
    array(
        'imageOutputjs' => $imageOutput
    )
);

//js
slides : $.parseJSON(shutter.imageOutputjs)