2

I have this code for flexslider Shortcode

add_shortcode('flexslider', function($atts){
global $post;
$ids = explode(',', $atts[ids]);

$uniqid = uniqid();
wp_enqueue_script( 'shortcode_flexslider');
wp_localize_script( 'shortcode_flexslider', 'slider', array('id' => $uniqid)); 

foreach( $ids as $id ) {
    $imgLinks       = wp_get_attachment_image_src($id, large);
    $imgThumb       = wp_get_attachment_image_src($id, thumbnail);

    $slider     .= '<li><img src="'.$imgLinks[0].'">'.$imgCaptionContent.'</li>';
    $carousel   .= '<li><img src="'.$imgThumb[0].'"></li>'; 
}
$structure ='<div id="slider'.$uniqid.'" class="flexslider"><ul class="slides">'
            .$slider.
            '</ul></div>'.

            '<div id="carousel'.$uniqid.'" class="flexslider"><ul class="slides">'
            .$carousel.
            '</ul></div>';   
});

I put uniqid for slider and carousel ids to can put more one flexslider Shortcode in the same post and I localize the uniqid to shortcode_flexslider JS file to find slider and carousel ids

$('#carousel'+slider.id).flexslider({
  //
   asNavFor: '#slider'+slider.id
  //
});

$('#slider'+slider.id).flexslider({
 //
  sync: '#carousel'+slider.id
//
});

The problem is when I put more one flexslider Shortcode in the same post the localized variable slider.id get the last flexslider Shortcode uniqid , so the last flexslider Shortcode is only that works ,how i can pass all flexslider Shortcode uniqid not just the last one?

3

Your ploblem is that wp_localize_script print to the html markup a javascript object similar to:

var slider = {"id":"a_unique_id_here"};

if you call it more times, e.g. using more shortcodes in same page, whati is printend in html markup is

var slider = {"id":"a_unique_id_here"};
var slider = {"id":"another_unique_id_here"};
var slider = {"id":"third_unique_id_here"};

so you are overwriting again and again the same variable.

You need this sort of thing, you should transform the output in something like this:

var slider_ddAsfe2ser = {"id":"a_unique_id_here"};
var slider_fsdgffereR = {"id":"another_unique_id_here"};
var slider_d4frfAd1ej = {"id":"third_unique_id_here"};

I.E. you have to create an unique named variable as settings object for every shorcode.

How? Something like:

add_shortcode('flexslider', function($atts) {
  global $post;
  $ids = explode(',', $atts[ids]);
  $uniqid = uniqid();
  wp_enqueue_script( 'shortcode_flexslider');
  $token = wp_generate_password(32, false, false);
  wp_localize_script( 'shortcode_flexslider', 'slider_' . $token, array('id' => $uniqid));
  foreach( $ids as $id ) {
    // ... your code here ...
  }
  $structure = '<div id="slider' . $uniqid. '" class="flexslider"';
  $structure .= ' data-token="' . $token . '">'; // the token as data attribute
  $structure .= '<ul class="slides">' . $slider . '</ul></div>';
  $structure .= '<div id="carousel' . $uniqid . '" class="flexslider">';
  $structure .= '<ul class="slides">' . $carousel . '</ul></div>'
});

After that in your js:

// cicle all the divs with 'flexslider' class and id that starts with 'slider'
$('div.flexslider[id^="slider"]').each( function() { 
  var $div = $(this); // the sdiv jquery object
  var token = $div.data('token');
  // use the bracket syntax to retrieve the unique named object
  // in the global (window) scope
  var settingObj = window['slider_' + token];
  $div.flexslider({
    //
    sync: '#carousel' + settingObj.id
    //
  });
  $carousel = $( '#carousel' + settingObj.id); // the carousel div jquery object
  $carousel.flexslider({
    //
    asNavFor: '#slider' + settingObj.id
    //
  });
}); // end each cycle
  • I don't understand what window[] do ? – Mohamed Badawy Sep 19 '13 at 17:42
  • There is a variable like: slider_dddf1f5fe5225rdf525fs2sf22sdfAsf = { "id":"a_unique_id_here" };. You have the token part (32 chars after '_'), in a variable: 'token'. So the entire variable name is 'slider_' + token. With window['slider_' + token] you get the value for that variable, because the variable is in the window scope (in php something similar is $_GLOBALS['slider_' + $token]). @MohamedBadawy – gmazzap Sep 19 '13 at 17:59
  • thank you , i also use uniqid() instead wp_generate_password() for variable token,it will be like this slider_dddf1f5fe5225rdf525fs2sf22sdfAsf = { "id":"dddf1f5fe5225rdf525fs2sf22sdfAsf" }; – Mohamed Badawy Sep 19 '13 at 18:07
  • @MohamedBadawy sure better, once you have already a unique id is not a good idea calculate it again. Normally I don't like uniqid() for tokens (In your case I'd used once wp_generate_password), but is just an opinion. – gmazzap Sep 19 '13 at 18:19
  • yes i used wp_generate_password ,it's cute :) – Mohamed Badawy Sep 19 '13 at 18:22
1

Well...

wp_localize_script( 'shortcode_flexslider', 'slider', array('id' => $uniqid)); 
wp_localize_script( 'shortcode_flexslider', 'carousel', array('id' => $uniqid)); 

Or...

wp_localize_script( 
  'shortcode_flexslider', 
  'slider', 
  array(
    'sliderid' => $uniqid,
    'carouselid' => $uniquid
  )
); 

You just need to avoid overwriting the variable, that's all. There are probably other ways to do it, but those two should get you started. I'd prefer the latter.

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.