Multiple Instances

[anteksiler]

Is there anyway that we can run multiple instances of BackgroundCheck on the same page?

I tried assigning BackgroundCheck to different variables but to no avail.

[ariona]

have you figure out how to solve this problem? i got the same problem here :cry:

[anteksiler]

Sorry, I have not :(

[ariona]

Well, for i know i just use the same class for every images and targets you want to use backgroundCheck and it's working now. :+1:

[kennethcachia]

You cannot run multiple instances of BackgroundCheck on the same page, but you can either use the approach that @ariona explained above, or use multiple classes in your images and targets attributes.

BackgroundCheck.init({
  targets: '.target-a, .target-b, .target-c',
  images: '.images-a, .images-b'
});

[zagabona]

If your elements are generated, or too abundant to manually write them down, you can use this script (it does what kennethcachia says, be it automatically):

var targets = [];
var images = [];
$('.element-with-bg-IMAGE-to-check-on_REPLACE-ME-with-yours').each(function (index) {
    // Collecting ID
    var image = '#' + $(this).attr('id');
    var target = image + ' .TARGET-with-backgroundcheck-style_REPLACE-ME-with-yours';
    // We need to check if there is bg image on target, otherwise JS will break.
    if ($(this).css('background-image') != 'none') {
        targets.push(target);
        images.push(image);
    }
});

// BackgroundCheck needs a comma separated string to work.
targets = targets.join(', ');
images = images.join(', ');

BackgroundCheck.init({
    targets: targets,
    images: images
});