#037 – Color Manipulation

Back when we were messing with giving CMS abilities to the homepage slider, we gave a custom field to each homepage slide a color picker. That gives us access to that color wherever we need it. In the template, we’ll wrap each slide in a <div> with a data-* attribute where we plunk that color value courtesy of Advanced Custom Field’s API.

<div class="rsContent" data-main-color="<?php the_field('color'); ?>">
  <a data-value="hi" class="rsImg" href="<?php echo $slideImage[url]; ?>"></a>
</div>

Royal Slider also gives us an event that fires when the slide changes. So now we can grab the “currently active” color for that slide when we need it:

slider.ev.on('rsAfterSlideChange', function(event) {

  var mainColor = $(".rsActiveSlide")
    .find(".rsContent")
    .data("main-color");

  // Do stuff with the color!

});

We could take that color and apply it to elements in any way we want with jQuery. We take it a step further and lighten/darken the color and then apply it around.