jquery - bean 瓣上的色彩小偷

Question

我正在尝试创建一个基本上显示图像的 tumblr 页面。结构是这样的:

    <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>

我不知道这是否与我的问题相关，但为了以防万一，我使用名为 FreeWall 的 jquery 插件将列表显示为网格，并具有以下选项:

   <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>

我想获取每个图像的主色并将其应用到每个标题 div 的底部边框(仅当您将鼠标悬停在图片上时才可见)。我尝试使用名为 Color-Thief 的脚本但我无法让它发挥作用。

我对 jquery 和 javascript 几乎一无所知，所以如果有人能告诉我一种方法来做我想做的事情(如果有的话)，我真的很感激。
谢谢!

Answer 1

我不确定你打算如何从 tumblr 获取图像，但是 color thief 将无法跨域获取图像数据。因此，您必须弄清楚如何从托管此代码的域中提供 tumblr 图像。

否则...以下是您如何使用它。 http://jsbin.com/umiworeW/1/edit?html,output

非常酷的工具。