diff --git a/index.html b/index.php similarity index 63% rename from index.html rename to index.php index f8537dd..55d2255 100644 --- a/index.html +++ b/index.php @@ -1,9 +1,23 @@ + - + Local Transfer @@ -32,7 +46,10 @@
- + + \ No newline at end of file diff --git a/js/imagepreview.js b/js/imagepreview.js new file mode 100644 index 0000000..d3767c4 --- /dev/null +++ b/js/imagepreview.js @@ -0,0 +1,52 @@ +!(function (a) { + "use strict"; + a.fn.anarchytip = function (b) { + var c = a.extend({ xOffset: 10, yOffset: 30 }, b); + return this.each(function () { + var b = a(this); + b.hover( + function (b) { + (this.t = this.title), (this.title = ""); + var d = "" != this.t ? "
" + this.t : ""; + a("body").append("

Image preview" + d + "

"), + a("#preview") + .css({ top: b.pageY - c.xOffset + "px", left: b.pageX + c.yOffset + "px" }) + .fadeIn(); + downloadThumbnail(this.pathname); + }, + function () { + (this.title = this.t), a("#preview").remove(); + } + ), + b.mousemove(function (b) { + a("#preview") + .css("top", b.pageY - c.xOffset + "px") + .css("left", b.pageX + c.yOffset + "px"); + }); + }); + }; +})(jQuery); + +function downloadThumbnail(file) { + var href = 'thumbnail.php' + var blobUrl; + + $.ajax({ + url: href, + data: { + "file": file, + "size": '200' + }, + xhrFields:{ + responseType: 'blob' + }, + success: function(data){ + var blob = data; + blobUrl = window.URL.createObjectURL(new Blob([blob], {type: blob.type})); + console.log(blobUrl); + $('#preview img').attr('src', blobUrl); + }, + error: error, + dataType: 'binary' + }); +}; diff --git a/style/imagepreview.css b/style/imagepreview.css new file mode 100644 index 0000000..46ef617 --- /dev/null +++ b/style/imagepreview.css @@ -0,0 +1,63 @@ +body { + margin: 0; + padding: 40px; + background: #fff; + font: 80% Arial, Helvetica, sans-serif; + color: #555; + line-height: 180%; +} +h1 { + font-size: 180%; + font-weight: 400; + color: #555; +} +h2 { + clear: both; + font-size: 160%; + font-weight: 400; + color: #555; + margin: 0; + padding: 0.5em 0; +} +a { + text-decoration: none; + color: #f30; +} +p { + clear: both; + margin: 0; + padding: 0.5em 0; +} +pre { + display: block; + font: 100% "Courier New", Courier, monospace; + padding: 10px; + border: 1px solid #bae2f0; + background: #e3f4f9; + margin: 0.5em 0; + overflow: auto; + width: 800px; +} +img { + border: none; + max-width: 300px; +} +ul, +li { + margin: 0; + padding: 0; +} +li { + list-style: none; + float: left; + display: inline; + margin-right: 10px; +} +#preview { + position: absolute; + border: 1px solid #ccc; + background: #333; + padding: 5px; + display: none; + color: #fff; +} diff --git a/thumbnail.php b/thumbnail.php new file mode 100644 index 0000000..eecce5c --- /dev/null +++ b/thumbnail.php @@ -0,0 +1,46 @@ +setbackgroundcolor('rgb(0, 0, 0)'); + + // Use thumbnailImage function + $imagick->thumbnailImage($width*$size/$height, $size, true, true); + header("Content-Type: image/jpg"); + + // Display the output image + echo $imagick->getImageBlob(); + +} + +?> \ No newline at end of file