Specify targets to refresh

[ghost]

Hi,

I've tried supplying both a string and a jQuery object to the refresh method, but it just throws "... is not a target".

I have three flexslider sliders on my page, and I'm needing to find a way to specify each slider individually so that clicking on a nav anchor which calls refresh doesn't apply it's classes to the wrong slider, which is what's happening.

[kennethcachia]

Hi!

.refresh(target) can be used if target is an Element, it does not work with strings or jQuery objects.

You can try the following instead of using refresh():

// on click
BackgroundCheck.set('targets', '.specific-slider-targets');
BackgroundCheck.set('images', '.specific-slider-images');

which automatically calls refresh() and the new targets and images are checked.

[ghost]

Hi Kenneth,

Thanks for the suggestion, I gave it a try:

var entry_images = [];
    post_entry_images = $(".entry-panel-image").each(function (index, el) {
      entry_images.push({index: index, el: $(el), id: $(el).data("id")});
      that = el;
      $(this).flexslider($.extend(default_flexslider_options,{
        start: function () {
          $(".entry-panel").matchHeight(true);
          BackgroundCheck.init({
            targets: '.flex-control-paging li a',
            images: '.flex-viewport img'
          });
        },
        after: function () {
          console.log(entry_images[index]["id"]);
          BackgroundCheck.set('targets', '#entry-panel-'+entry_images[index]["id"]+' .flex-control-paging li a');
          BackgroundCheck.set('images', '#entry-panel-'+entry_images[index]["id"]+' .flex-viewport img');
        }
      }));
    });

But it's still targeting the wrong slider, instead of the one that's being interacted with.

[ghost]

Hi Kenneth, did you have any other thoughts on this?

[kennethcachia]

Hm, do you have an online version of the above that I can debug properly?

[ghost]

Sure, it's here: http://ecospinltd.com/press-and-media

[kennethcachia]

Try the following:

Initialize BackgroundCheck once after all the sliders are initialized:

BackgroundCheck.init({
  images: '.slide img',
  targets: '.flex-control-nav a'
});

Then, add the following to each slider's after callback:

BackgroundCheck.refresh();

[ghost]

Just tried it, and it's still targeting the wrong slider on occasion, applying the evaluated styles of the clicked slider onto what seems to always be the previous slider in the DOM.

[kennethcachia]

Hm. Let's try restricting images to the currently active ones.

Initialize BackgroundCheck as follows:

BackgroundCheck.init({
  images:  '.flex-active-slide img',
  targets: '.flex-control-nav a'
});

Don't set images and targets in your after() callback function, just do a refresh:

BackgroundCheck.refresh();

I'm doing the following manually on your site after each slide transition, and it works:

BackgroundCheck.set('targets', '.flex-control-nav a');
BackgroundCheck.set('images', '.flex-active-slide img');

[ghost]

Thanks for the suggestion, but still no luck i'm afraid :(

http://ecospinltd.com/press-and-media

I tried it with and without the:

'#entry-panel-'+entry_images[index]["id"]+'

string too.

[kennethcachia]

Sorry, my bad. You need to set images again after a transition as .flex-active-slide shifts from one container to another.

The above init part still holds, just change the code within the after() callback function to:

BackgroundCheck.set('images', '.flex-active-slide img');

Let me know if it works.

[ghost]

Sorry for late reply - seems to have done the trick, thanks!

[kennethcachia]

No problem!