Javascript Plugin For Adaptive Image Background Color – Adaptive Backgrounds

Category: Color , Javascript | January 8, 2014
Author: benhowdle89
Views Total: 3,290
Official Page: Go to website
Last Update: January 8, 2014
License: MIT

Preview:

Javascript Plugin For Adaptive Image Background Color – Adaptive Backgrounds

Description:

Adaptive Backgrounds is a standalone javascript plugin combined with RGBaster.js that allows to extract the dominant color from an image and apply it to the background of its parent element. Without having to include jQuery library. Adaptive Backgrounds plugin will scan your HTML for all images with the data-adaptive-background attribute and apply it’s dominant color to the image’s parent element’s background.

Basic Usage:

Create a container and insert an image with the data-adaptive-background attribute in it.

<div class="imgWrap"> 
<img class="center" src="1.jpg" data-adaptive-background="1" /> 
</div>

Include adaptive-backgrounds.js script at the end of your html document.

<script type="text/javascript" src="adaptive-backgrounds.js"></script>

Call the function and you’re done.

<script type="text/javascript">
AdaptiveBackgrounds();
</script>

You Might Be Interested In:


Leave a Reply