0

I've looked around and have found no great solution so far: I would like to add customized javascript from a widget using wp_enqueue_script, but Wordpress seems to be limiting scope to the javascript file I load in, as my javascript file says:

Uncaught TypeError: Object [object Object] has no method 'photogallery'

Here is the output I would like to load in, as if it were its own script via wp_enqueue_script:

<script type = "text/javascript">
            (function ($) {
                "use strict";
                $(function () {
                    var $gallery = $("#gallery").photogallery(
                            "a",
                            {
                                thumbs: <?php echo setBool($instance["hasThumbs"]); ?>,
                                history: <?php echo setBool($instance["historyEnabled"]); ?>,
                                time: <?php echo ($instance["transitionTime"] * 1000); ?>,
                                autoplay: <?php echo setBool($instance["autoplayEnabled"]); ?>,
                                loop: <?php echo setBool($instance["isLooped"]); ?>,
                                counter: <?php echo setBool($instance["hasCounter"]); ?>,
                                zoomable: <?php echo setBool($instance["zoomable"]); ?>,
                                hideFlash: <?php echo setBool($instance["hideFlash"]); ?>
                            }
                        );
                });
            }(jQuery));
        </script>

I know that manually coding the default values in to another js file, and using enqueue_script will work fine, but how do I do this properly, with custom widget values, and not load the required js file twice? I am not interested in complex ajax requests unless it is my only option, as mentioned here.

Thanks in advance.

2

You can either not use wp_enqueue_script (which loads a JS file, where you won't be able to use PHP) and instead simply print the script out on the wp_head or wp_footer hooks.... or you can use wp_localize_script()

wp_enqueue_script( 'some_handle' );

$instance = // not sure how you are fetching this value

$array = array( 'thumbs' => $instance["hasThumbs"], 
                'history' => $instance["historyEnabled"],
                'time' => $instance["transitionTime"] * 1000,
                'autoplay' => $instance["autoplayEnabled"]),
                'loop' => $instance["isLooped"]),
                'counter' => $instance["hasCounter"]),
                'zoomable' => $instance["zoomable"]),
                'hideFlash' => $instance["hideFlash"] );

wp_localize_script( 'some_handle', 'object_name', $array );

and then you'd modify your JS file to pull the values from the JS object called 'object_name' where the object's properties correspond to the array keys from `wp_localize_script'

(function ($) {
                "use strict";
                $(function () {
                    var $gallery = $("#gallery").photogallery(
                            "a",
                            {
                                thumbs: object_name.hasThumbs,
                                history: object_name.history,
                                time: object_name.time,
                                autoplay: object_name.autoplay,
                                loop: object_name.loop,
                                counter: object_name.counter,
                                zoomable: object_name.zoomable,
                                hideFlash: object_name.hideFlash
                            }
                        );
                });
            }(jQuery));
  • Wowwow, cool. I will try and post if this works... – user1429980 Aug 26 '13 at 20:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.