0

I have a JSON encoded object that has been localized and ultimately will fill-in a JS file for options. The expected output of the options are (the defaults and the explanation of the "type" it is looking for):

jQuery(window).load(function() {
    jQuery('.flexslider').flexslider({
        animation: "fade",              //String: Select your animation type, "fade" or "slide"
        slideDirection: "horizontal",   //String: Select the sliding direction, "horizontal" or "vertical"
        slideshow: true,                //Boolean: Animate slider automatically
        slideshowSpeed: 7000,           //Integer: Set the speed of the slideshow cycling, in milliseconds
        animationDuration: 600,         //Integer: Set the speed of animations, in milliseconds
        directionNav: true,             //Boolean: Create navigation for previous/next navigation? (true/false)
        controlNav: true,               //Boolean: Create navigation for paging control of each clide? Note: Leave true for manualControls usage
        keyboardNav: true,              //Boolean: Allow slider navigating via keyboard left/right keys
        mousewheel: false,              //Boolean: Allow slider navigating via mousewheel
        prevText: "Previous",           //String: Set the text for the "previous" directionNav item
        nextText: "Next",               //String: Set the text for the "next" directionNav item
        pausePlay: false,               //Boolean: Create pause/play dynamic element
        pauseText: 'Pause',             //String: Set the text for the "pause" pausePlay item
        playText: 'Play',               //String: Set the text for the "play" pausePlay item
        randomize: false,               //Boolean: Randomize slide order
        slideToStart: 0,                //Integer: The slide that the slider should start on. Array notation (0 = first slide)
        animationLoop: true,            //Boolean: Should the animation loop? If false, directionNav will received "disable" classes at either end
        pauseOnAction: true,            //Boolean: Pause the slideshow when interacting with control elements, highly recommended.
        pauseOnHover: false,            //Boolean: Pause the slideshow when hovering over slider, then resume when no longer hovering
        controlsContainer: "",          //Selector: Declare which container the navigation elements should be appended too. Default container is the flexSlider element. Example use would be ".flexslider-container", "#container", etc. If the given element is not found, the default action will be taken.
        manualControls: "",             //Selector: Declare custom control navigation. Example would be ".flex-control-nav li" or "#tabs-nav li img", etc. The number of elements in your controlNav should match the number of slides/tabs.
        start: function(){},            //Callback: function(slider) - Fires when the slider loads the first slide
        before: function(){},           //Callback: function(slider) - Fires asynchronously with each slider animation
        after: function(){},            //Callback: function(slider) - Fires after each slider animation completes
        end: function(){}               //Callback: function(slider) - Fires when the slider reaches the last slide (asynchronous)
    });
});

My current HTML output of the JSON encoded object is:

/*<![
    CDATA[
        */varflexslider_vars=[

        ];flexslider_vars={
            "js_animation": "fade",
            "js_slide_direction": "horizontal",
            "js_slideshow": "1",
            "js_slideshow_speed": "7000",
            "js_animation_duration": "600",
            "js_direction_nav": "1",
            "js_control_nav": "1",
            "js_keyboard_nav": "1",
            "js_mousewheel": null,
            "js_prev_text": "Prevous",
            "js_next_text": "Next",
            "js_pause_play": null,
            "js_pause_text": "Pause",
            "js_play_text": "Play",
            "js_randomize": null,
            "js_slide_start": "0",
            "js_animation_loop": "1",
            "js_pause_on_action": "1",
            "js_pause_on_hover": null,
            "js_controls_container": "",
            "js_manual_controls": "",
            "js_start_function": "function(){}",
            "js_before_function": "function(){}",
            "js_after_function": "function(){}",
            "js_end_function": "function(){}"
        };/*
    ]
]>*/

and this is how I am currently (and unsucessfully) adding in those options to the JS file:

jQuery(window).load(function() {
    jQuery('.flexslider').flexslider({
        animation: flexslider_vars.js_animation,              //String: Select your animation type, "fade" or "slide"
        slideDirection: flexslider_vars.js_slide_direction,   //String: Select the sliding direction, "horizontal" or "vertical"
        slideshow: flexslider_vars.js_slideshow,                //Boolean: Animate slider automatically
        slideshowSpeed: flexslider_vars.js_slideshow_speed,           //Integer: Set the speed of the slideshow cycling, in milliseconds
        animationDuration: flexslider_vars.js_animation_duration,         //Integer: Set the speed of animations, in milliseconds
        directionNav: flexslider_vars.js_direction_nav,             //Boolean: Create navigation for previous/next navigation? (true/false)
        controlNav: flexslider_vars.js_control_nav,               //Boolean: Create navigation for paging control of each clide? Note: Leave true for manualControls usage
        keyboardNav: flexslider_vars.js_keyboard_navjs_mousewheel,              //Boolean: Allow slider navigating via keyboard left/right keys
        mousewheel: flexslider_vars.js_mousewheel,              //Boolean: Allow slider navigating via mousewheel
        prevText: flexslider_vars.js_prev_text,           //String: Set the text for the "previous" directionNav item
        nextText: flexslider_vars.js_next_text,               //String: Set the text for the "next" directionNav item
        pausePlay: flexslider_vars.js_pause_play,               //Boolean: Create pause/play dynamic element
        pauseText: flexslider_vars.js_pause_text,             //String: Set the text for the "pause" pausePlay item
        playText: flexslider_vars.js_play_text,               //String: Set the text for the "play" pausePlay item
        randomize: flexslider_vars.js_randomize,               //Boolean: Randomize slide order
        slideToStart: flexslider_vars.js_slide_start,                //Integer: The slide that the slider should start on. Array notation (0 = first slide)
        animationLoop: flexslider_vars.js_animation_loop,            //Boolean: Should the animation loop? If false, directionNav will received "disable" classes at either end
        pauseOnAction: flexslider_vars.js_pause_on_action,            //Boolean: Pause the slideshow when interacting with control elements, highly recommended.
        pauseOnHover: flexslider_vars.js_pause_on_hover,            //Boolean: Pause the slideshow when hovering over slider, then resume when no longer hovering
        controlsContainer: flexslider_vars.js_controls_container,          //Selector: Declare which container the navigation elements should be appended too. Default container is the flexSlider element. Example use would be ".flexslider-container", "#container", etc. If the given element is not found, the default action will be taken.
        manualControls: flexslider_vars.js_manual_controls,             //Selector: Declare custom control navigation. Example would be ".flex-control-nav li" or "#tabs-nav li img", etc. The number of elements in your controlNav should match the number of slides/tabs.
        start: flexslider_vars.js_start_function,            //Callback: function(slider) - Fires when the slider loads the first slide
        before: flexslider_vars.js_before_function,           //Callback: function(slider) - Fires asynchronously with each slider animation
        after: flexslider_vars.js_after_function,            //Callback: function(slider) - Fires after each slider animation completes
        end: flexslider_vars.js_end_function              //Callback: function(slider) - Fires when the slider reaches the last slide (asynchronous)
    });
});

So - the issue is not calling the options themselves (that seems to work fine), it's altering the actual output (a string, boolean, integer, etc) based on the needed values of the JS file, because as of right now, it's doing diddly squat because of it. I'd appreciate any nudges in the right direction. Thanks!

Hunter McMillen
  • 59,865
  • 24
  • 119
  • 170
Zach
  • 1,185
  • 3
  • 24
  • 60
  • What behavior are you seeing, and what do you want to see instead? – Mike Samuel Jun 01 '12 at 13:34
  • 1
    You can't have JSON. JSON has no way to represent functions. What you probably have is a JavaScript objcet literal (see [JSON vs JavaScript Object](http://stackoverflow.com/questions/8294088/javascript-object-vs-json)). – Matt Jun 01 '12 at 13:35
  • Why are you not encoding the data properly? (And as Matt says, you cannot encode functions with JSON). – Felix Kling Jun 01 '12 at 13:36
  • @FelixKling - appreciate some expansion on the comment :) – Zach Jun 01 '12 at 13:37
  • Well, for example `slideshow` should be a boolean but in your JSON it is the string `"1"`. Which means that wherever you get the data from, it is not a boolean at the beginning. You should fix it on that side, so that you have a boolean value in JSON. `{"js_slideshow": true}`. Fix the code that generates the JSON and create the proper data types from the beginning. *edit:* Mmmh, actually it is not even JSON, it is really an object literal. But my suggestion is valid for both. – Felix Kling Jun 01 '12 at 13:38
  • @Matt Appreciate the response -- so if I wanted a string, I could do the following: `animation: JSON.stringify(flexslider_vars.js_animation)`, correct? As far as the functions part (start,before,after,end) at the end of the day, it should really just be passing plain text which is input from an options screen (textarea) -- would that not work left as normal? Thanks. – Zach Jun 01 '12 at 13:39
  • @FelixKling Okay - I can definitely fix that --> from my response to @Matt about "stringifying" JSON, would that do it? The `JSON has no way to represent functions` is confusing me a bit if anyone can expand. Thanks! – Zach Jun 01 '12 at 13:40
  • @Zach: I'm pretty sure you're confusing JSON from Object literals. I advise you to read that link I posted, which should clear the confusion and the comment `JSON has no way to represent functions` will make more sense. In particular read the 2nd point the OP makes in the link, and (my) answer to that point in my answer on the question. – Matt Jun 01 '12 at 13:43
  • 2
    @Zach: `flexslider_vars.js_animation` is already a string. `flexslider` is already an object. You should be able to do `animation: flexslider_vars.js_animation`, but the functions are more tricky as they *are* a string and the booleans are *actually* strings as well; so I'd take Felix's advise and `fix the code that generates the code and create the proper data types from the beginning.` – Matt Jun 01 '12 at 13:46
  • Hi Matt - Thanks for the continued help on this. I'll jump on that right away and report back. Thanks! – Zach Jun 01 '12 at 13:50
  • Hi @Matt Alrighty, so the current HTML output is http://pastebin.com/c7udUnVT which I know is using `1` and `0` instead of `true` and `false` but I've manually entered those into the script and they are working as expected. I verified that parameters that need to accept a string, like `flexslider_vars.js_animation` is working as expected. The next part is figuring out how to `unstringify` them to use things like `1` or `0` (just as I would for `true` or `false`) when passing a boolean or integer. Any pointers there? Thanks again! – Zach Jun 01 '12 at 14:42

0 Answers0