Global Variable in Functions.php Then Use in Javascript (WordPress)

Question

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

Answer 1

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..