2

I'm trying to create a tumblr page that basically displays images. The structure is something like this:

    <div id="slider">
       <ul id="slidercont">
          <li class="item">
             <div class="caption">CAPTION</div>
             <img src="http://static.tumblr.com/...">
          </li>
          <li class="item">
            <div class="caption">CAPTION</div>
            <img src="http://static.tumblr.com/...">
          </li>
       </ul>
    </div>

I don't know if this is relevant to my question but just in case, I'm using a jquery plugin called FreeWall to display the list as a grid, with these options:

   <script type="text/javascript">
      $(function() {
         var wall = new freewall("#slidercont");
         wall.reset({
            selector: '.item',
            cellH:190,
            cellW:2,
            gutterY: 6,
            gutterX: 6,
            fixSize: 1,
            onResize: function() {
               wall.fitHeight();
            },
         });
         wall.fitHeight();
         $(window).trigger("resize");
      });
   </script>

I'd like to get the dominant color of every image and apply it to the bottom border of each caption div (which is only visible when you hover over the picture). I tried using a script called Color-Thief but I can't get it to work.

I'm pretty much clueless about jquery and javascript, so I'd really appreciate if anyone could tell me a way to do what I want, if there's any.
Thanks!

user3113004
  • 21
  • 1
  • Show how you are including the javascript sources. Also, show your latest attempt at using ColorThief. Nifty find BTW, you should add it to Stumble-Upon. – Mad Physicist Dec 19 '13 at 20:02
  • http://stackoverflow.com/questions/2541481/get-average-color-of-image-via-javascript has alot of answers on "average pixel color" – Shanimal Dec 19 '13 at 20:22
  • One of the answers actually mentions the ColorThief homepage. Which has very basic usage and demo code. https://github.com/lokesh/color-thief – Shanimal Dec 19 '13 at 20:26

1 Answers1

1

Im not sure how you plan to get the images from tumblr, but color thief will not be able to get the image data cross domain. So you have to work out how to serve tumblr images from the domain where this code is hosted.

Otherwise... Here is how you use it. http://jsbin.com/umiworeW/1/edit?html,output

Pretty cool tool.

Shanimal
  • 11,517
  • 7
  • 63
  • 76
  • Well, I have to upload the images and the script via [tumblr's static file uploader](http://www.tumblr.com/themes/upload_static_file) and then add the links on my code. The links both start the same: http://static.tumblr.com/... so I don't know, would that be the problem? – user3113004 Dec 20 '13 at 15:11
  • 1
    For grins I plugged one of the image urls from my tumblr account into the source using the jsbin link to see if it works. They don't have a friendly CORS policy that allows it. So the console returned an error "Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': the canvas has been tainted by cross-origin data." – Shanimal Dec 20 '13 at 18:31
  • there might be server side solutions for this, but I don't know much about the tumblr api. – Shanimal Dec 20 '13 at 18:32
  • @user3113004 You have to use the [Tumblr API](http://www.tumblr.com/docs/en/api/v2#posts) to manipulate the images using javascript like you want, which means you need an API key. They're easy to obtain but I'm afraid it's more work than I think you want to give. Let me know if you have questions – Zach Saucier Dec 22 '13 at 16:30
  • Yeah, too much trouble! Thanks anyway – user3113004 Dec 27 '13 at 01:23