2

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

  • The typo might only be in here, and not in your original code, but, for what it's worth, get_template_directory_uri() . /script/' is missing an opening single quote. – Johannes Pille Jul 16 '13 at 8:53
  • you sure it should be slider_vars.animationpeed and not slider_vars.ssspeed? In any case you said what you get but not what are the parameters and/or the expected result. – Mark Kaplun Jul 16 '13 at 9:01
  • If you view source, do you see the slider_vars object? Is it correct? Should point to whether the problem is PHP or JS-related. Why is 'fade' the expected result when 'slide' is in the shortcode? Or is that just a typo? – helgatheviking Jul 16 '13 at 14:11
  • Maybe your values are being passed as strings and not integers to the slider? – gdaniel Jan 30 '14 at 22:18
  • Close reason: "Yes, it was typos, sorry, I've fixed it" - see edits. – kaiser Feb 17 '14 at 23:21