Adaptive Backgrounds: jQuery Plugin To Extract Dominant Color

Adaptive Backgrounds: jQuery Plugin To Extract Dominant Color


SHARE & COMMENT

Today, we are introducing Adaptive Backgrounds. A simple jQuery plugin to extract the dominant color of an image and apply it to the background of its parent element. This plugin built by Brian Gonzales, get the dominant color of an image and places it as the background color of its parent. As Adaptive Backgrounds works with the nearest parent by default, you can have multiple different backgrounds on the same page. It creates an ambience related to the media displayed, enhancing the viewing experience.

There is no limit on how this can be implemented on your website. For example, let’s assume you are a marketing agency where you design logos, corporate branding, print jobs, etc; and you would like to show all your work in an elegant way. You will have all images showing your work in different orientations (landscape/portrait), different sizes, and maybe different shapes. Using Adaptive Backgrounds, you can avoid all the work of having to modify all the images to accommodate to your portfolio design, and simply include the images inside of a parent element and this awesome plugin will take care of the rest.

This an example of what it can be done with Adaptive Backgrounds:

MondayJS-icon
MondayJS-icon
MondayJS-icon
MondayJS-icon
MondayJS-icon
MondayJS-icon
MondayJS-icon
MondayJS-icon
MondayJS-icon
MondayJS-icon
MondayJS-icon
MondayJS-icon

 

 

Pretty impressive, huh? Now, it is time for you to put into practice and create awesome projects! This is how:

Bringing it into effect is absolutely simple and straight-forward. The first thing you’ll do is to add jQuery and include the script into your project.

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

After you added all the libraries necessary, it’s time to run the script:

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

From now on, the script keeps looking for images carrying the data attribute data-adaptive-background. This attribute gets attached to your regular img:

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

That’s it! You have now a working project; images will load, Adaptive Backgrounds will analyze them and search for the dominant color, extract it, and automatically color the background of its parent using the dominant color of each individual image.

Although this Adaptive Backgrounds does a really good job with default settings, it also allows the user to send an optional argument to the run() method, and it will be merged with the defaults.

These are the default options:

  • selector String (default: ‘img[data-adaptive-background=”1″]’) a CSS selector which denotes which images to grab/process. Ideally, this selector would start with img, to ensure we only grab and try to process actual images.
  • parent falsy (default: null) a CSS selector which denotes which parent to apply the background color to. By default, the color is applied to the parent one level up the DOM tree.
  • normalizeTextColor boolean (default: false) option to normalize the color of the parent text if background color is too dark or too light
  • normalizedTextColors Object Literal (default: {dark: ‘#000’, light: ‘#fff’}) text colors used when background is either too dark/light

If you want to override some (of all) of the defaults values, you simply call the run method, passing in any options you’d like to override.

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)

Final Thought

Create the correct ambience for the user is always a difficult goal in web design and I think we are in presence of a great plugin that not only it helps with this goal, but also establishes a structure in design while browsing a site. It is easy to use and to apply to our projects. You just add a data attribute to the elements you want to apply this effect and done.

Please, share your thoughts with us. We would like to hear your opinion and see this plugin in your next projects. HAPPY MONDAY!

Reference

 

 

SHARE & COMMENT