briangonzalez / jquery.adaptive-backgrounds.js

🦎 A jQuery plugin for extracting the dominant color from images and applying the color to their parent.
http://briangonzalez.github.io/jquery.adaptive-backgrounds.js/
6.54k stars 454 forks source link

Question on setting selector based on parent div class #46

Closed macsupport closed 6 years ago

macsupport commented 8 years ago

I want to show the background image color using data-adaptive-background data-ab-css-background only when the parent div has a class .is-selected but I'm having an issue setting the selector to do this. Is this possible with this setting or is there another way to do this?

selector: '.is-selected [data-adaptive-background]',

AlfredJKwack commented 7 years ago

@macsupport. I can confirm this does indeed behave quite oddly. Could you use another element or class to select with alongside .is-selected instead of the [data-adaptive-background]?

@briangonzalez. I think this may also point to a bug, or at least unexpected behaviour. Check this codePen. Essentially, if we set the data-ab-css-background tag, then the module completely ignores the parent property. In #L124 it basically states that if we CSS background image is used, we don't look for a parent and the current element is in fact the parent.

AlfredJKwack commented 7 years ago

@macsupport Could you pull a more recent build? I've tested it again (and updated the codePen) and now it seems to work.

Taking the following html

<div class="is-selected">
    <div class="cssBg" data-adaptive-background data-ab-css-background > 
        is-selected CSS Background
    </div>
</div>
<div>
    <div class="cssBg" data-adaptive-background data-ab-css-background >
        !is-selected CSS Background
    </div>
</div>

With this JS code

$.adaptiveBackground.run({
    selector: '.is-selected [data-adaptive-background]'
});

And CSS like:

.cssBg{
  padding: 20px;
  width: 256px;
  height: 256px;
  background: no-repeat center center url( ___something useful here ___ );
}

Should give you two images for which only one has the background color set.