How to add Lokesh Dhakar’s Color Theif Jquery to your projects

Finding it difficult to add Lokesh Dhakar’s Color Thief Jquery plugin to your project? Don’t worry I am here to help you. I am not going to tell you how this script is going to work. That is programmer’s duty to understand the script and if possible modify it accordingly. I will simply tell you how to make it work on your project the easy-way like simply copy and paste. I will also tell you some important changes that you can make to this Color Thief script.

At first I too found it hard to make it work on one of my project. But after digging into it I found it easy. Lets get started.

Color Thief Demo
Download Color Thief Files

Easy way of getting things done:

Paste the following code before </body>

<div id="main" role="main"></div>

<script>window.jQuery || document.write('<script src="js/libs/jquery-1.6.2.min.js"><\/script>')</script>
<script src="js/libs/jquery.imagesloaded.js"></script>
<script src="js/libs/jquery.lettering.js"></script> <!-- this library may not be required -->
<script src="js/libs/mustache.js"></script>

<script src="js/libs/quantize.js"></script>
<script src="js/color-thief.js"></script>

<!-- Using Mustache templating -->
<script id='template' type='text/x-mustache'>
  {{#images}}
  <div class="imageSection clearfix {{class}} ">
    <div class="imageWrap">
      <img class="targetImage" src="img/{{file}}" data-colorcount="{{colorCount}}" />
    </div>
    <div class="colors">
      <div class="function dominantColor clearfix">
        <h3>Dominant Color</h3>
        <div class="swatches clearfix"></div>
      </div>
      <div class="function medianCutPalette clearfix">
        <h3>Palette</h3>
        <div class="swatches clearfix"></div>
      </div>
    </div>
  </div>
  {{/images}}
</script>

<script>
$(document).ready(function(){

  // Use mustache.js templating to create layout
  
  var imageArray = { images: [
    {"file": "3.jpg"},
    {"file": "4.jpg"},  
    {"file": "5.jpg"}, 
    {"file": "logo1.png"},
    {"file": "icon1.png", "colorCount": "4", "class": "fbIcon"}  
  ]};

	var html = Mustache.to_html($('#template').html(), imageArray);
	$('#main').append(html);

  // Use lettering.js to give letter by letter styling control for the h1 title
  $("h1").lettering();

	
  // Once images are loaded, loop through each one, getting dominant color
  // and palette and displaying them.
  $('img').imagesLoaded(function(){
	
    $('img').each(function(index){

      var imageSection = $(this).closest('.imageSection'),
          swatchEl;

      // Dominant Color
	    var dominantColor = getDominantColor(this);
	
			swatchEl = $('<div>', {
				'class': 'swatch'
			}).css('background-color','rgba('+dominantColor.r+','+dominantColor.g+ ','+dominantColor.b+', 1)');
			imageSection.find('.dominantColor .swatches').append(swatchEl);



      // Palette
      var colorCount = $(this).attr('data-colorcount')? $(this).data('colorcount'): 10;
	    var medianPalette = createPalette(this, colorCount);

			var medianCutPalette = imageSection.find('.medianCutPalette .swatches');
      $.each(medianPalette, function(index, value){
				swatchEl = $('<div>', {
					'class': 'swatch'
				}).css('background-color','rgba('+value[0]+','+value[1]+ ','+value[2]+', 1)');
				medianCutPalette.append(swatchEl);
			});

		});

	});
});
  
</script>

Change the paths for all JS files and make sure images are in img/images.jpg folder. Run the script and there you go. The script works like charm.

Lets look deeper into the code:

In the Jquery code ( which starts with $(document).ready(function(){ ) you can see that images are added in array. Place your own image names there.

The below div tag is where the whole content (images and color palettes) is displayed. So place this div tag where ever you want in your page to display images and color palette.

<div id="main" role="main"> </div>

This is it guys if you are have any doubts, or you are unable to implement this in your PHP project just leave a comment below.