jQuery Adaptive Background

Adaptive Background is a jQuery plugin for extracting dominant colors from images and applying it to its parent.

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

1. INCLUDE JS FILES

<script src="js/jquery.js"></script>
<script src="js/jquery.adaptive-backgrounds.min.js"></script>

2. HTML

<img src="/image.jpg" data-adaptive-background='1'>

The script looks for image(s) with the data-adaptive-background attribute:

3. JAVASCRIPT

$(document).ready(function(){
  $.adaptiveBackground.run()
});

4. Using an element with a CSS background image

Instead of using an <img> element nested inside of parent element, AB supports grabbing the dominant color of a background image of a standalone element, then applying the corresponding dominant color as the background color of said element.

Enable this functionality by adding a data property, data-ab-css-background to the element. See the example below:

<div style='background-image: url(/some-image.jpg)' data-adaptive-background='1' data-ab-css-background='1'></div>

example:

var defaults      = {
  selector:             '[data-adaptive-background="1"]',
  parent:               null,
  normalizeTextColor:   false,
  normalizedTextColors:  {
    light:      "#fff",
    dark:       "#000"
  },
  lumaClasses:  {
    light:      "ab-light",
    dark:       "ab-dark"
  }
};
$.adaptiveBackground.run(defaults)

6. METHODS

• $.adaptiveBackground.run(opts) arg: opts (Object) an optional argument to be merged in with the defaults.

7. EVENTS

• ab-color-found Event This event is fired when the dominant color of the image is found. The payload includes the dominant color as well as the color palette contained in the image.

example:

$('img.my-image').on('ab-color-found', function(ev,payload){
  console.log(payload.color);   // The dominant color in the image.
  console.log(payload.palette); // The color palette found in the image.
  console.log(ev);   // The jQuery.Event object
});