Comments (12)
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.
from background-check.
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.
from background-check.
Hi Kenneth, did you have any other thoughts on this?
from background-check.
Hm, do you have an online version of the above that I can debug properly?
from background-check.
Sure, it's here: http://ecospinltd.com/press-and-media
from background-check.
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();
from background-check.
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.
from background-check.
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');
from background-check.
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.
from background-check.
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.
from background-check.
Sorry for late reply - seems to have done the trick, thanks!
from background-check.
No problem!
from background-check.
Related Issues (20)
- Images not being targeted in FF53
- Unable to get image data from canvas because the canvas has been tainted by cross-origin data. HOT 2
- Target: Check not only image but any background?
- Using with FullPage.js HOT 1
- HTML-Element containing image with overflow:hidden; - invisibility of image is ignored
- is there a way to detect after? HOT 1
- Classes not added to element HOT 1
- cross origin not working.
- Finding image, but not sorting HOT 1
- Cross origin demo not working HOT 1
- Owl carousel not working with background-check
- Error: Area too small but image is there
- Uncaught [object HTMLDivElement] is not a target HOT 1
- Janky Colour Swapping HOT 2
- Edit color sensibility
- Doesn't seem to work HOT 2
- Not able to detect specific area of image
- The canvas has been tainted by cross-origin data. HOT 7
- Nested/Child elements with classname HOT 2
- For God's sake - update it!
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from background-check.