javascript - Passing Variable from PHP function to JS -

i've created first wordpress plugin creates testimonial rotator call callback function placed in theme template files. basic function is..

function thinkup_testimonials(){   if ( is_active_sidebar( 'thinkup-testimonials' ) ) :     echo '<!-- testimonials -->         <div id="thinkup-testimonials" class="flexslider">         <ul class="testimonials slides">';         dynamic_sidebar('thinkup-testimonials');     echo'</ul></div><!-- testimonial section -->';   endif; } 

so users call thinkup_testimonials(); in template , good.

my issue i'd users able control timing between slides in rotator (declared in js file) in simple fashion.

i aiming able have them declare thinkup_testimonials(9000); in templates , set timing 9 secs. following @madara uchicha's guidance this post! decided try #2. echo data page somewhere, , use javascript information dom. i've modified function above so..

function thinkup_testimonials($settime){   if ( is_active_sidebar( 'thinkup-testimonials' ) ) :     echo '<!-- testimonials -->           // creates hidden html element time delay           <input type="hidden" class="tut-timer" value="'. $settime . '">           <div id="thinkup-testimonials" class="flexslider">           <ul class="testimonials slides">';           dynamic_sidebar('thinkup-testimonials');     echo'</ul></div><!-- testimonial section -->';   endif; } 

and js go along now..

jquery( document ).ready(function( $ ) {              var timer = $('input.tut-timer').val();             console.log(timer)              $('#thinkup-testimonials').flexslider({                 slideshow: true,                 animationduration: 200,                 slideshowspeed: 'timer'             });         }); 

while seems @ least pass $settime variable properly, , output console.log() but..

1. i'm getting synchronous xmlhttprequest on main thread deprecated because of detrimental effects end user's experience
2. this variable not seem passed flexslider args.
3. i'd want set default value $settime in php users don't pass value in callback function have basic standard of 5sec. i've tried using if(!isset($settime)){$settime = 5000}; within opening of thinkup_testimonials(); causes fatal errors. pointers on awesome too.

you can see live here http://www.thinkupdesign.ca/testimonials-plugin/

thanks lot can provide!

rather use hidden input, can use data- attributes.

the value returned input string not number, need conscious of type pass value plugin options.

try like:

<ul class="testimonials slides" data-timer="'.$settime.'"> 

then in js

var $slider = $('#thinkup-testimonials'),     timer = +$slider.data('timer');      $slider.flexslider({                 slideshow: true,                 animationduration: 200,                 slideshowspeed: timer /// note using string not variable here     }); 

if want make more flexible users can pass more options attributes , retrieve 1 object using $slider.data() can use extend defaults:

var sliderdefaults={     slideshow: true } var useropts = $.extend( sliderdefaults, $slider.data()); $slider.flexslider(useropts );