#037 – Farbmanipulation

Als wir uns mit der Integration von CMS-Funktionen für den Homepage-Slider beschäftigten, haben wir jedem Homepage-Slide ein benutzerdefiniertes Feld mit einer Farbauswahl hinzugefügt. Das gibt uns Zugriff auf diese Farbe, wo immer wir sie benötigen. Im Template werden wir jeden Slide in ein <div> mit einem data-*-Attribut verpacken, in das wir diesen Farbwert dank der API von Advanced Custom Fields einfügen.

<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 gibt uns auch ein Ereignis, das ausgelöst wird, wenn der Slide wechselt. So können wir jetzt die „aktuell aktive“ Farbe für diesen Slide abrufen, wenn wir sie brauchen.

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

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

  // Do stuff with the color!

});

Wir könnten diese Farbe nehmen und sie mit jQuery auf beliebige Weise auf Elemente anwenden. Wir gehen noch einen Schritt weiter und hellen/dunkeln die Farbe auf und wenden sie dann rundherum an.