I’ve been trying for hours and tried several answers from here and Google but still no luck.. need help.
I am making a shortcode (slider) and trying to execute a javascript file (for the slider’s script) using parameters taken from shortcode’s attributes.
function slider_default($atts, $content) {
extract(shortcode_atts(array(
"animation" => '',
"animationspeed" => '',
), $atts));
print_r($animation);
print_r($animationspeed);
//irrelevant
wp_enqueue_script('my-script', get_template_directory_uri() . '/script/' . 'custom-script.js');
wp_localize_script('my-script', 'slider_vars', array(
'animation' => $animation,
'ssspeed' => $animationspeed
)
);
and in custom-script.js (it is loaded, and it is the correct file / address):
var $an = slider_vars.animation;
var $sss = slider_vars.ssspeed;
console.log($an);
console.log($sss);
jQuery(window).load(function() {
jQuery('.flexslider').flexslider({
animation: $an,
slideshowSpeed: $sss,
});
});
but it doesn’t work as expected.
print_r($animation) and print_r($animationspeed) results are as expected, but console.log($an) and console.log($sss) results are “fade” (without quotation) and blank, respectively.
What did I do wrong and in case this is not the correct way to achieve it, any pointers of what should I do?
Please help, thanks in advance.
Expected results is:
animation: “fade”, //String: Select your animation type, “fade” or “slide”. Either one, just need to be consistent with the vars below
and
slideshowSpeed: 7000, //Integer: Set the speed of the slideshow cycling, in milliseconds
animationSpeed: 600, //Integer: Set the speed of animations, in milliseconds
So in code, it should be:
jQuery(window).load(function() {
jQuery('.flexslider').flexslider({
animation: "slide",
slideshowSpeed: 600,
});
});
and the shortcode:
[slider animation=slide slideshowspeed=600][/slider]
Hi guys, thanks and sorry for taking so long, I lost my internet connection after posting. Yes, it was typos, sorry, I’ve fixed it (I changed around and even trying things out even when it wasn’t working :P). It wasn’t a typo error, I’ve tried copy pasting and spelling them out.
More comment: Still struggling with my connection (I don’t think this is a CDN-loaded problem BTW, am using a local copy now and the slider actually works, just not as expected). For some reason I can’t leave a comment (“WordPress Answers requires external JavaScript from another domain, which is blocked or failed to load.”), so I will reply here and try to keep up.
@Helga: Yes, it shows and the JS file is loaded correctly (view source-d and clicked it)
It shows (strangely, twice) like this:
/* <![CDATA[ */
var slider_vars = {"animation":"fade","ssspeed":"5000"};
var slider_vars = {"animation":"fade","ssspeed":"4000"};
/* ]]> */
Not sure why it displayed twice, and not sure why it has two different values (maybe this is why ..?)
As for the animation-speed / slideshow speed, I changed things, but I’ve been consistent with the arrangement, slide – slideshowspeed and fade – animationspeed. Just change the value and the JS file (animationSpeed and slideshowSpeed).