Functions.php中的全局变量然后在Javascript中使用（WordPress）

I'm sorry if this is the wrong place. Actually this has been asked before by another user (although it was not the same question) and it was said that this is a PHP question. Unfortunately I am not good enough in PHP to implement the answer.

Here is the [previous question]:https://wordpress.stackexchange.com/questions/82503/cant-get-options-with-datavariable

I am facing the same problem. In my options, I have a slider's option (animation - fade or slide) and then I want to use the value stored in the option and pass it into Javascript in my function.php.

In the option file I have these codes:

// Slider animation options
        $of_options_slider_animation = array(
            "fade" => __("Fade", "themename"),
            "slide" => __("Slide", "themename")
        );

and

$of_options[] = array(  "name" => __("Slider Animation", "themename"),
                        "desc" => __("Select the type of animation for the slider.", "themename"),
                        "id" => "slider_animation",
                        "std" => "fade",
                        "type" => "radio",
                        "options" => $of_options_slider_animation

Later I would pass the option into a js block of code in functions.php like so:

jQuery('.flexslider').flexslider({
                    controlNav: true,
                    directionNav: true,  
                    prevText: 'Previous',     
                    nextText: 'Next',
                    **animation: "<?php echo $smof_data['slider_animation']; ?>",**
                    animationLoop: false
                    // animation: "slide"
                  });

(please notice the bold-ed part)

However, as you may predict, it doesn't work.

I've tried defining the $smof_data like in the previous question (see link above) but still no luck. Here is what I do:

// Fetch options data
global $smof_data;
$smof_data = of_get_options("slider_animation");

Please help, thanks in advance :)

EDIT:

SMOF link: https://github.com/sy4mil/Options-Framework

I am using a blank / starter theme by underscores.me

Solved it :D I use the variable directly within the Javascript scope. Here is the code (just in case)

function mytheme_flexslider() {

    if (!is_admin()) {

        // Enqueue FlexSlider JavaScript
        wp_register_script('jquery_flexslider', get_template_directory_uri(). '/js/jquery.flexslider-min.js', array('jquery') );
        wp_enqueue_script('jquery_flexslider');

        // Enqueue FlexSlider Stylesheet        
        wp_register_style( 'flexslider-style', get_template_directory_uri() . '/inc/flexslider/flexslider.css', 'all' );
        wp_enqueue_style( 'flexslider-style' );

        // FlexSlider custom settings       
        add_action('wp_footer', 'mytheme_flexslider_settings');

        function mytheme_flexslider_settings() { 
        // Fetch options data
        **global $smof_data;?>**

            <script>

                // Can also be used with $(document).ready()
                // flexslider have a fixed height
                jQuery(window).load(function() {
                  // jQuery('.subhead_shadow_bottom').hide();
                  jQuery('.flexslider').flexslider({
                    controlNav: true,
                    directionNav: true,  
                    prevText: 'Previous',     
                    nextText: 'Next',
                    animation: "<?php echo $smof_data['slider_animation']; ?>",
                    animationLoop: false
                    // animation: "slide"
                  });
                });


                jQuery(document).ready(function() {
                    fixFlexsliderHeight();
                });

                jQuery(window).load(function() {
                    fixFlexsliderHeight();
                }); // BUG: this ends up computing the slide height to the image height, not to the resized height, on page reload

                jQuery(window).resize(function() {
                    fixFlexsliderHeight();
                });


                function fixFlexsliderHeight() {
                    // Set fixed height based on the tallest slide
                    jQuery('.flexslider').each(function(){
                        var sliderHeight = 0;
                        jQuery(this).find('.slides > li').each(function(){
                            slideHeight = jQuery(this).height();
                            if (sliderHeight < slideHeight) {
                                sliderHeight = slideHeight;
                            }
                        });
                        // jQuery(this).find('ul.slides').css({'height' : sliderHeight});
                        // console.log("Fixing slider height to " + sliderHeight);
                    });
                }

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

                //  $('.flexslider').flexslider();
                // });
            </script>
        <?php 
        **// return $smof_data;**
        }

    }
}

add_action('init', 'mytheme_flexslider');

All are working now. Maybe one little question: Do I need to return $smof_data (the second bold-ed part)? It works both ways.. I need to learn more about varible scopes..