Applying to another div other than the parent? about jquery.adaptive-backgrounds.js HOT 8 CLOSED

Never mind. Got it working great. For any one else looking this snippet worked well for me.
$('.class-of-img-selector').on('ab-color-found', function(ev,payload){ $(".class-of-div").css({ backgroundColor: payload.color }); });

from jquery.adaptive-backgrounds.js.

You can do this with option :

parent: 'your-class-name',

from jquery.adaptive-backgrounds.js.

I am trying to apply this on the parent div for flexslider2 (http://flexslider.woothemes.com/basic-slider-with-caption.html). I have flexslider wrapped in section="featured"

Desired goal is for each slide image the section background to change color. I have tried both above mentioned but the background only works for one image and doesn't change for each slide. Any ideas how to get this working?

from jquery.adaptive-backgrounds.js.

Hi @f1ss1on,

Let me check if I understood you correctly. You got it working, ie. the background colour of the featured section matches the dominant color as required, but only for the first image. It never updates afterwards. Is that correct?

Would you happen to have a demo we can see somewhere? jsFiddle or codePen are great for this.

At any rate, if my understanding above is correct, I think you'll want to look into the properties of flexslider for some way to trigger the adaptive backgrounds at the right times. A quick check of the flexslider docs tells me there are a couple to choose from (eg. before;after).

Give that a shot and let us know how it pans out.

from jquery.adaptive-backgrounds.js.

Hi @AlfredJKwack
Sorry for the late response.

I put up a pen @ []https://codepen.io/f1ss1on/pen/pwoGJL

For $parent I put $(#featured). This is the section wrapper for flexslider. Currently the background of the section only stays gray. I would like that to change with each slide.

Currently on my local setup the section tag looks like the following. (it's the background of the 3rd image)

<section id="featured" class="dyn-bg ab-light" data-ab-yaq="234.979" style="background-color: rgb(240, 233, 232);">

from jquery.adaptive-backgrounds.js.

Hi,

I've loaded a new codePen for this. I think it does what you need.

The trick is to have AD run first. When it does, it sets a property data-ab-color on each of the images. This property contains the rgb(x,y,z) value that we need. We then use this value every time FlexSlider advances to a new slide to set the background as we like.

Below is the example in its full glory. It's far from optimised. You'll probably want to deal with blending values, transitions and other such niceties. The background changes can be quite harsh, especially since in your example, the background is static vis-a-vis the slider...

$(document).ready(function() {

  // Run Adaptive background 
  $.adaptiveBackground.run({
    parent: '1'   //don't make it do anything to the background
  });

  // Run FlexSlider
  $('.flexslider').flexslider({

    animation: "slide",
    
    start: function(slider){
      $('body').removeClass('loading');
      $('.flexslider').resize();

      //Find the current slide and it's image
    
      var thisSlide = slider.slides.eq(slider.currentSlide);
      var thisImg = $(thisSlide).find("img");
    
      //Take the data-ab-color property that AD set and apply it to the parent.
      $('#featured').css({ background: $(thisImg).attr('data-ab-color') });
    
    },
    
    before: function(slider) {
    
      // Find the current slide and it's image
      var animateSlide = slider.slides.eq(slider.animatingTo);
      var thisImg = $(animateSlide).find("img");
    
      //Take the data-ab-color property that AD set and apply it to the parent.
      $('#featured').css({ background: $(thisImg).attr('data-ab-color') });
    
    }
  });
}); 

Good luck with the implementation.

As a side-note: one thing to remember about codePen and other such tools are the CORS rules. If you load images and code needs to create a canvas from them it will fail. This is why you'll see base64 encoded images instead of what you put in.

from jquery.adaptive-backgrounds.js.

Brilliant! That worked! Thanks you!

from jquery.adaptive-backgrounds.js.

My pleasure. Glad you got what you needed.

from jquery.adaptive-backgrounds.js.