drag and drop image list

use on fazzle

by secretgspot

HTML

<div id="container">

    <div id="drop_it_like_its_hot" class="center linear">
      <h2>Drop image files here from your desktop</h2>
      <span>( try multiple files )</span>
    </div>
    <div id="totalFileSize"></div>
    <div id="thumbnails"></div>
</div>
  <script type="text/html" id="thumbnail_template">
    <div class="thumbnail">
      <div class="image shadow" style="-webkit-transform: rotateZ(<%= file.rotate %>deg) ">
        <img src="<%= file.src %>" alt="<%= file.name %>" title="<%= file.name %>" />
        <div class="title"><%= file.name %></div>
        <div class="details"><%= file.type %> @ <%= Math.round(file.fileSize / 1024) %> KB</div>
      </div>
    </div>
  </script>

CSS

.linear {
  background: -webkit-gradient(linear, left bottom, left top,
                               from(#eee), color-stop(0.25, #fff),
                               to(#eee), color-stop(0.75, #fff));
}
.shadow {
  -moz-box-shadow: 3px 3px 10px #666666;
  -webkit-box-shadow: 3px 3px 10px #666666;
  box-shadow: 3px 3px 10px #666666;
}
.center {
  display : -webkit-box;
  display : -moz-box;
  display : box;
  -webkit-box-orient : vertical;
  -webkit-box-pack : center;
  -webkit-box-align : center;
  -moz-box-orient : vertical;
  -moz-box-pack : center;
  -moz-box-align : center;
  box-orient: vertical;
  box-pack: center;
  box-align: center;
}
#thumbnails {
  margin: 6px;
}
.thumbnail {
  display: inline-block;
  text-align: center;
  -webkit-transition: all 0.5s ease-in-out;
     -moz-transition: all 0.5s ease-in-out;
       -o-transition: all 0.5s ease-in-out;
          transition: all 0.5s ease-in-out;
}
.thumbnail .image {
  border: 1px solid #ccc;
  padding: 6px;
  background-color: #fff;
}
.thumbnail .title {
  margin-bottom: 5px;
  font-family: Lobster, Helvetica, sans-serif;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100px;
  margin: 5px auto;
}
.thumbnail img {
  border: 1px solid #ccc;
  height: 100px;
}
.thumbnail .details {
  font-family: Molengo, Helvetica, sans-serif;
  font-size: 10pt;
}
#totalFileSize {
  font-family: Molengo, Helvetica, sans-serif;
  text-align: center;
  margin: 10px 0 50px 0;
}
#drop_it_like_its_hot {
  height: 200px;
  width: 100%;
  border-radius: 10px;
  border: 2px dashed #ccc;
  color: #336699;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
#drop_it_like_its_hot.rounded {
  -webkit-box-shadow: inset 0px 0px 50px #777;
  -moz-box-shadow: inset 0px 0px 50px #777;
  box-shadow: inset 0px 0px 50px #777;

}

JavaScript

// Simple JavaScript Templating
    // John Resig - http://ejohn.org/ - MIT Licensed
    (function(){
      var cache = {};

      this.tmpl = function tmpl(str, data){
        // Figure out if we're getting a template, or if we need to
        // load the template - and be sure to cache the result.
        var fn = !/\W/.test(str) ?
          cache[str] = cache[str] ||
            tmpl(document.getElementById(str).innerHTML) :

          // Generate a reusable function that will serve as a template
          // generator (and which will be cached).
          new Function("obj",
            "var p=[],print=function(){p.push.apply(p,arguments);};" +

            // Introduce the data as local variables using with(){}
            "with(obj){p.push('" +

            // Convert the template into pure JavaScript
            str
              .replace(/[\r\t\n]/g, " ")
              .split("<%").join("\t")
              .replace(/((^|%>)[^\t]*)'/g, "$1\r")
              .replace(/\t=(.*?)%>/g, "',$1,'")
              .split("\t").join("');")
              .split("%>").join("p.push('")
              .split("\r").join("\\'")
          + "');}return p.join('');");

        // Provide some basic currying to the user
        return data ? fn( data ) : fn;
      };
    })();

    Element.prototype.hasClassName = function(name) {
      return new RegExp("(?:^|\\s+)" + name + "(?:\\s+|$)").test(this.className);
    };

    Element.prototype.addClassName = function(name) {
      if (!this.hasClassName(name)) {
        var c = this.className;
        this.className = c ? [c, name].join(' ') : name;
      }
    };

    Element.prototype.removeClassName = function(name) {
      if (this.hasClassName(name)) {
        var c = this.className;
        this.className = c.replace(
            new RegExp("(?:^|\\s+)" + name + "(?:\\s+|$)", "g"), "");
      }
    };
    
    
    // insertAdjacentHTML(), insertAdjacentText() and insertAdjacentElement 
    // for Netscape 6/Mozilla by Thor...