jQuery plugin zzImgUr - Công cụ upload ảnh tiên tiến cho forumotion
Chức năng
- Tải ảnh không giảm chất lượng nhờ dùng host ImgUr.
- Ảnh sau khi tải lên được cập nhật trực tiếp vào khung soạn thảo.
- Không sử dụng PHP, chỉ dùng HTML5 và javascript, CSS để định dạng.
- Sử dụng dễ dàng 7 định dạng BBcode mặc định, hoặc có thể tùy biến dữ liệu với 7 định dạng link.
- Có thể xóa ảnh, và loại bỏ dữ liệu trong khung soạn thảo dễ dàng.
- Dễ dàng chuyển đổi 2 phương pháp tải ảnh thông dụng từ máy tính và từ liên kết.
- Kiểm soát định dàng, các ảnh trùng lặp và giới hạn 10 ảnh tối đa mỗi lượt, giúp tiết kiệm băng thông (vì mỗi app đăng ký trên ImgUr bị giới hạn).
- Giao diện hiện đại với đầy đủ thông tin tiến trình tải ảnh cơ bản.
Demo
Hướng dẫn
Bước 1
Đăng ký Client ID tại https://api.imgur.com/oauth2/addclient- Application name: Đặt tên app tùy ý
- Authorization type: Chọn dòng thứ 2 hoặc 3
- Authorization callback URL: /
- Application website: Tên miền của diễn đàn bạn
- Email: Điền email của bạn
- Description: Ghi chú cho app
- Hướng dẫn bằng ảnh:
Sau khi đăng ký app thành công, ghi lại Client ID.
Bước 2
Nâng cấp thư viện jQueryACP >> Display >> Templates >> QLTT >> overall_header
Tìm:
- Code:
<script src="{JQUERY_PATH}" type="text/javascript"></script>
- Code:
<script src="//code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
Bước 3
Cài đặt jQuery plugin zzImgUr vào diễn đànACP >> Display >> Pictures and Colors >> Colors >> CSS Stylesheet:
- Code:
/*
* jQuery plugin zzImgUr ver 1.6 by zzbaivong
* http://www.devs.cf/
*/
.imgur_Zzbv,.imgur_Zzbv *{box-sizing:content-box;-moz-boxsizing:content-box;-webkit-box-sizing:content-box;margin:0;padding:0}
.imgur_Zzbv{border:1px solid #333;background:#FFF;height:auto}
.imgur_Zzbv-iconError,.imgur_Zzbv-iconDevs,.imgur_Zzbv-delete,.imgur_Zzbv-remove,.imgur_Zzbv-iconSelect,.imgur_Zzbv-button div img,.imgur_Zzbv-iconComplete,.imgur_Zzbv-iconImage{display:inline-block;background:url(http://i.imgur.com/e9GpBzF.png) no-repeat center center;width:16px;height:16px;float:left;margin:7px!important}
.imgur_Zzbv-iconDevs{background-position:0 0}
.imgur_Zzbv-iconComplete{background-position:-32px -16px}
.imgur_Zzbv-status img{margin:0!important}
.imgur_Zzbv-iconError{background-position:0 -32px}
.imgur_Zzbv-iconSelect{background-position:0 -16px}
.imgur_Zzbv-iconUpload{background-position:-16px -16px}
.imgur_Zzbv-iconReset{background-position:-16px 0}
.imgur_Zzbv-iconImage{background-position:-16px -32px}
.imgur_Zzbv-iconImage.imgur_Zzbv-iconUrl{background-position:-32px -32px}
.imgur_Zzbv-mode{cursor:pointer;width:30px;height:30px;float:left;background-color:#FF475D}
.imgur_Zzbv-mode.imgur_Zzbv-zzURL{background-color:#0B704C}
.imgur_Zzbv-button div{cursor:pointer;background-color:#359BED;border:0;height:30px;display:none;padding:0 10px 0 0}
.imgur_Zzbv-button .imgur_Zzbv-reset{background-color:#01686D}
.imgur_Zzbv-delete,.imgur_Zzbv-remove{background-position:-32px 0;position:absolute;right:3px;top:3px;height:16px;width:16px;text-indent:-9999px;overflow:hidden;background-color:transparent;margin:0}
.imgur_Zzbv-control{position:relative;height:30px;line-height:30px;overflow:hidden;background:#333;color:#FFF}
.imgur_Zzbv-preview{overflow-y:auto;overflow-x:hidden}
.imgur_Zzbv-li{background:#f2f2f2;list-style-type:none;position:relative;height:68px;border-top:1px solid #DDD;overflow:hidden}
.imgur_Zzbv-li:first-child{border-top:0 none}
.imgur_Zzbv-li:nth-child(2n){background:#E7E6E6}
.imgur_Zzbv-li:hover{background:#007CEE;color:#FFF}
.imgur_Zzbv-li.imgur_Zzbv-success{background:#FFFFA1}
.imgur_Zzbv-image{width:100px;overflow:hidden;position:absolute;height:100%}
.imgur_Zzbv-image img{max-width:100%;max-height:100%;position:absolute;top:0;right:0;bottom:0;left:0;margin:auto}
.imgur_Zzbv-info{position:absolute;left:100px;top:0;right:0;height:100%}
.imgur_Zzbv-info > *{white-space:nowrap}
.imgur_Zzbv-dl{line-height:34px}
.imgur_Zzbv-dl > div{height:34px}
.imgur_Zzbv-dt{float:left;width:70px;font-weight:300;font-size:12px}
.imgur_Zzbv input.imgur_Zzbv-input{width:calc(100% - 84px)!important;height:16px!important;line-height:16px!important;margin:8px 0!important;padding:0!important}
.imgur_Zzbv-status{position:absolute;width:16px;height:16px;line-height:16px;left:5px;top:7px;display:none}
.imgur_Zzbv-add{cursor:pointer;position:absolute;width:100px;height:30px;overflow:hidden;background:orange;left:30px;top:0;z-index:10}
.imgur_Zzbv-upload-URL.imgur_Zzbv-add{background:#C100E6}
.imgur_Zzbv-textSelect{position:absolute;width:100%;left:30px;height:30px;line-height:30px}
.imgur_Zzbv-choose{cursor:pointer;z-index:10;opacity:0;filter:alpha(opacity=0);-moz-opacity:0;font-size:300px;height:1000px;right:0;top:0;position:absolute}
.imgur_Zzbv-length{position:absolute;width:50px;text-align:center;top:0;left:50%;margin-left:-25px;display:none}
.imgur_Zzbv-button{position:absolute;width:90px;right:0;top:0;white-space:nowrap;z-index:10}
.imgur_Zzbv-mode:hover,.imgur_Zzbv-button div:hover,.imgur_Zzbv-add:hover{background-color:#666}
.imgur_Zzbv-devs-icon{position:absolute;right:0;top:0;line-height:16px}
.imgur_Zzbv-tip{height:24px;font-size:13px;font-style:italic;line-height:26px}
.imgur_Zzbv-tip img{vertical-align:middle;float:none;margin:-4px 0 0}
.imgur_Zzbv-wrap-progress{background:#FFF;height:3px;border:0;position:absolute;bottom:0;left:-100px;right:0}
.imgur_Zzbv-progress{height:3px;background:red;width:1px}
.imgur_Zzbv-errorURL{color:red}
.imgur_Zzbv input.imgur_Zzbv-imageURL{width:calc(100% - 11px)!important;border:0 none!important;box-shadow:0 0 0 1px #DDD!important;height:16px!important;line-height:16px!important;margin:0 0 0 1px !important}
.imgur_Zzbv-mini .imgur_Zzbv-button,.imgur_Zzbv-mini .imgur_Zzbv-add{width:30px}
.imgur_Zzbv-mini .imgur_Zzbv-info{left:10px}
.imgur_Zzbv-mini .imgur_Zzbv-wrap-progress{left:-10px}
.imgur_Zzbv-upload-URL,.imgur_Zzbv-mini .imgur_Zzbv-image{display:none}
Bước 4
Tạo file javascriptACP >> Modules >> HTML & JAVASCRIPT >> Javascript Codes >> Create a new javascript:
Title * : jQuery plugin zzImgUr ver 1.6
Placement : In all the pages
Javascript Code * :
- Code:
/*!
* jQuery plugin zzImgUr ver 1.6 by zzbaivong
* http://www.devs.cf/
*/
(function ($) {
$.fn.zzImgUr=function(x){var d=$.extend({cliendID:"",mode:"file",format:"o,",css:{width:"100%"},max:10,loading:"./source/images/loading.gif",lang:{noID:"\u1ee8ng d\u1ee5ng ch\u01b0a \u0111\u0103ng k\u00fd",addImage:"Ch\u1ecdn \u1ea3nh",addURL:"Th\u00eam URL",reset:"L\u00e0m m\u1edbi",upload:"T\u1ea3i l\u00ean",choose:"\u0110\u00e3 ch\u1ecdn",waitConnect:"\u0110ang k\u1ebft n\u1ed1i...",waitUpload:"\u0110ang t\u1ea3i l\u00ean...",noteURL:"Nh\u1eadp URL \u1ea3nh v\u00e0o \u0111\u00e2y:",errContact:'<a href="http://www.devs.cf/t131-jq-plugin-jquery-plugin-zzimgur#831" rel="nofollow" target="_blank">Nh\u1ea5n v\u00e0o \u0111\u00e2y</a> \u0111\u1ec3 b\u00e1o l\u1ed7i.',
errURL:"URL kh\u00f4ng truy c\u1eadp \u0111\u01b0\u1ee3c.",errSize:"URL l\u1ed7i ho\u1eb7c k\u00edch th\u01b0\u1edbc qu\u00e1 nh\u1ecf.",errRepeat:"URL kh\u00f4ng h\u1ee3p l\u1ec7 ho\u1eb7c \u0111\u00e3 \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng."},success:function(d,b){},input:function(d){d.click(function(){this.select()})},remove:function(d,b){}},x);return this.each(function(x,b){function e(a){return'<img class="imgur_Zzbv-icon'+a+'" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" height="16" width="16" alt="'+
a+'" />'}function y(){2<z&&$(".imgur_Zzbv-li",b).data("height",34*z).hover(function(){var a=$(this);if($(".imgur_Zzbv-progress",a).length)return!1;a.height(a.data("height"))},function(){$(this).height(68)})}function J(a,c){$(c).css({"background-image":"url("+d.loading+")","background-position":"0 0"});var b=$(c).closest(".imgur_Zzbv-li");$.ajax({url:"https://api.imgur.com/3/image/"+a,headers:{Authorization:"Client-ID "+d.cliendID},type:"DELETE",success:function(a){var b=[];$.each($(".imgur_Zzbv-input",
$(c).parent()),function(a,c){b.push(c.value)});d.remove(b[0],b);$(c).closest(".imgur_Zzbv-li").remove();A();"0"==B.text()&&k.click()},error:function(a){C(b,a)}})}function K(a){var c=new FileReader,l=new Image;c.readAsDataURL(a);c.onload=function(c){l.src=c.target.result;l.onerror=function(){return!1};l.onload=function(){var c=this.src;if(!$(".imgur_Zzbv-image img[src='"+c+"']",b).length){var g=this.width,l=this.height,f=a.name,m=Math.ceil(a.size/1024)+"Kb";h.append('<div class="imgur_Zzbv-li"><div class="imgur_Zzbv-image"><img src="'+
c+'" /></div><div class="imgur_Zzbv-info"><a class="imgur_Zzbv-remove" href="#">Delete</a><div class="imgur_Zzbv-tip">'+e("Complete")+" "+d.lang.choose+'</div><div class="imgur_Zzbv-wrap-progress"><div class="imgur_Zzbv-progress"></div></div><div>'+f+"</div><small><strong>"+g+"x"+l+"</strong> <em>("+m+")</em></small></div></div>");y();$(".imgur_Zzbv-progress",b).length>s&&$(".imgur_Zzbv-li:gt("+(s-1)+")",b).remove();t.text($(".imgur_Zzbv-progress",b).length)}w()}}}function D(a,c,l){var g=$(".imgur_Zzbv-li",
b).eq(a);$(".imgur_Zzbv-tip",g).html('<img src="'+d.loading+'" alt="loading..." /> <span>'+d.lang.waitConnect+"</span>");$.ajax({url:"https://api.imgur.com/3/image",xhr:function(){var a=new window.XMLHttpRequest;a.upload.addEventListener("progress",function(a){a.lengthComputable&&(a=a.loaded/a.total*100+"%",$(".imgur_Zzbv-tip span",g).text(d.lang.waitUpload),$(".imgur_Zzbv-progress",g).animate({width:a}))},!1);return a},method:"POST",headers:{Authorization:"Client-ID "+d.cliendID},data:{image:c,type:l},
success:function(a){$(".imgur_Zzbv-info",g).html(L(a,d.format.split(",")));d.input($(".imgur_Zzbv-input",g));E();g.addClass("imgur_Zzbv-success");setTimeout(function(){g.removeClass("imgur_Zzbv-success")},300);n.html(e("Complete"))},error:function(a){n.html(e("Error"));C(g,a);E()}})}function E(){A();0===$(".imgur_Zzbv-progress",b).length&&k.fadeIn()}function A(){B.text($(".imgur_Zzbv-delete",b).length)}function C(a,c){$(".imgur_Zzbv-info",a).html('<div class=".imgur_Zzbv-dl"><div class=".imgur_Zzbv-dt"></div><div class=".imgur_Zzbv-dd" style="margin-left: 0!important; color: red">'+
c.statusText+'</div></div><div class=".imgur_Zzbv-dl"><div class=".imgur_Zzbv-dt"></div><div class=".imgur_Zzbv-dd" style="margin-left: 0!important">'+d.lang.errContact+"</div></div>")}function M(a,c){var b=a.data.link,d="IMG",e="URL";/o|s|b|t|m|l|h/.test(c)&&(d="img",e="url");return null===c||""===c?b:"o"===c?"["+d+"]"+b+"[/"+d+"]":"["+e+"="+b+"]["+d+"]http://i.imgur.com/"+a.data.id+c+"."+a.data.type.split("/")[1]+"[/"+d+"][/"+e+"]"}function N(a){var c="";switch(a){case "o":c="Original";break;case "s":c=
"Small Square";break;case "b":c="Big Square";break;case "t":c="Small Thumb";break;case "m":c="Medium Thumb";break;case "l":c="Large Thumb";break;case "h":c="Huge Thumb";break;case "c":c="Custom";break;default:c="Direct Link"}return c}function L(a,c){var b="",e=[],f="",h="";$.each(c,function(c,d){var m=d.match(/\{(o|s|b|t|m|l|h)\}/gi);if(null===m)f=d,h=M(a,d);else{var k=d;$.each(m,function(c,b){f=/o|s|b|t|m|l|h/.exec(b)[0];k=k.replace(b,"http://i.imgur.com/"+a.data.id+f+"."+a.data.type.split("/")[1])});
f="c";h=k}e.push(h);m='<a class="imgur_Zzbv-delete" data-delete="'+a.data.deletehash+'" href="#" target="_blank">Delete</a>';0!==c&&(m="");b+=m+'<div class="imgur_Zzbv-dl"><div class="imgur_Zzbv-dt">'+N(f)+':</div><div class="imgur_Zzbv-dd"><input type="text" class="imgur_Zzbv-input" value="'+h+'" readonly="readonly" /></div></div>'});d.success(e[0],e);return b}function w(){p.add(u).fadeIn()}function F(){$(".imgur_Zzbv-choose",b).replaceWith($(".imgur_Zzbv-choose",b).clone())}function G(){220>v.width()?
v.addClass("imgur_Zzbv-mini"):v.removeClass("imgur_Zzbv-mini")}var q='multiple="multiple"',s=d.max;1===s&&(q="");$(this,b).html('<div class="imgur_Zzbv"> <div class="imgur_Zzbv-control"> <div class="imgur_Zzbv-mode">'+e("Image")+'</div> <div class="imgur_Zzbv-status"> <img src="'+d.loading+'" alt="loading..." /> </div> <div class="imgur_Zzbv-upload-computer imgur_Zzbv-add"> '+e("Select")+' <div class="imgur_Zzbv-textSelect">'+d.lang.addImage+'</div> <input type="file" class="imgur_Zzbv-choose" '+
q+' /> </div> <div class="imgur_Zzbv-upload-URL imgur_Zzbv-add"> <div class="imgur_Zzbv-iconSelect"></div> <div class="imgur_Zzbv-textSelect">'+d.lang.addURL+'</div> </div> <div class="imgur_Zzbv-length"> <span class="imgur_Zzbv-complete">0</span> / <span class="imgur_Zzbv-selected">0</span> </div> <div class="imgur_Zzbv-button"> <div class="imgur_Zzbv-reset">'+e("Reset")+d.lang.reset+'</div> <div class="imgur_Zzbv-upload">'+e("Upload")+d.lang.upload+'</div> </div> <a class="imgur_Zzbv-devs-icon" target="_blank" href="http://www.devs.cf/"> '+
e("Devs")+' </a> </div> <div class="imgur_Zzbv-preview"> <div class="imgur_Zzbv-list"></div> </div> </div>');var v=$(".imgur_Zzbv",b),q=$(".imgur_Zzbv-control",b),f=$(".imgur_Zzbv-mode",b),n=$(".imgur_Zzbv-status",b),H=$(".imgur_Zzbv-upload-computer",b),r=$(".imgur_Zzbv-upload-URL",b),I=$(".imgur_Zzbv-add",b),u=$(".imgur_Zzbv-length",b),t=$(".imgur_Zzbv-selected",b),B=$(".imgur_Zzbv-complete",b),k=$(".imgur_Zzbv-reset",b),p=$(".imgur_Zzbv-upload",b),h=$(".imgur_Zzbv-list",b),z=d.format.split(",").length;
v.css(d.css);G();$(window).resize(function(){G()});if(!/[a-z0-9]{15}/.test(d.cliendID))return q.html('<div class="imgur_Zzbv-status" style="display: block;"> '+e("Error")+' </div><div style="text-align: center;">'+d.lang.noID+': <span style="color: red;">cliendID</span><a class="imgur_Zzbv-devs-icon" target="_blank" href="http://www.devs.cf/"> '+e("Devs")+" </a></div>"),!1;"url"==d.mode&&(f.addClass("imgur_Zzbv-zzURL"),I.toggle());q.on("change",".imgur_Zzbv-choose",function(a){if((a=this.files)&&
a[0])for(var c=0;c<a.length;c++)K(a[c],b,d)});p.click(function(){if(f.hasClass("imgur_Zzbv-zzURL")){$(".imgur_Zzbv-imageURL:not('.imgur_Zzbv-ok')",b).closest(".imgur_Zzbv-li").remove();t.text($(".imgur_Zzbv-imageURL",b).length);if(h.is(":empty"))return u.add(p).fadeOut(),!1;$(".imgur_Zzbv-imageURL",b).each(function(a){D(a,this.value,"URL")})}else $(".imgur_Zzbv-image img",b).each(function(a){D(a,this.src.replace(/data:image\/.+;base64\,/,""),"base64")});p.add(f).add(I).add(".imgur_Zzbv-remove",b).fadeOut();
n.fadeIn()});k.click(function(){f.hasClass("imgur_Zzbv-zzURL")?(r.show(),H.hide()):(r.hide(),H.show(),F());h.empty();$("span",u).text(0);n.html('<img src="'+d.loading+'" alt="loading..." />');k.add(p).add(n).add(u).fadeOut();f.fadeIn()});h.on("click",".imgur_Zzbv-delete",function(a){a.preventDefault();J($(this).data("delete"),this)});h.on("click",".imgur_Zzbv-remove",function(a){a.preventDefault();$(this).closest(".imgur_Zzbv-li").remove();a=$(".imgur_Zzbv-progress",b).length;t.text(a);"0"==a&&k.click();
f.hasClass("imgur_Zzbv-zzURL")?10>$(".imgur_Zzbv-imageURL",b).length&&r.fadeIn():F()});r.click(function(){h.prepend('<div class="imgur_Zzbv-li"><div class="imgur_Zzbv-image"></div><div class="imgur_Zzbv-info"><a class="imgur_Zzbv-remove" href="#">Delete</a><div class="imgur_Zzbv-tip">'+d.lang.noteURL+'</div><div class="imgur_Zzbv-wrap-progress"><div class="imgur_Zzbv-progress"></div></div><input class="imgur_Zzbv-imageURL" type="text" /></div></div>');y();w();t.text($(".imgur_Zzbv-progress",b).length);
$(".imgur_Zzbv-imageURL",b).length>=s&&r.hide()});h.on("input",".imgur_Zzbv-imageURL",function(){var a=this.value,c=$(this),f=c.prev().prev();if(/^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([[^\\s]\/]*)*\/?.+\.(jpg|png|gif|jpeg|bmp|apng|tiff|xcf)$/i.test(a)&&!$(".imgur_Zzbv-image img[src='"+a+"']",b).length){c.parent().prev().html('<img src="'+a+'" />');f.html(e("Complete")+" "+a.match(/\w+\.(jpg|png|gif|jpeg|bmp|apng|tiff|xcf)/i)[0]);c.addClass("imgur_Zzbv-ok");var g=c.parent().prev().find("img");
g.error(function(){f.html('<span class="imgur_Zzbv-errorURL">'+e("Error")+" "+d.lang.errURL+"</span>");c.removeClass("imgur_Zzbv-ok")});g.load(function(){1==g.width()&&1==g.height()&&(f.html('<span class="imgur_Zzbv-errorURL">'+e("Error")+" "+d.lang.errSize+"</span>"),c.removeClass("imgur_Zzbv-ok"))});w(b)}else null===a||""===a?(f.html('<span class="imgur_Zzbv-errorURL">'+e("Error")+" "+d.lang.noteURL+"</span>"),c.removeClass("imgur_Zzbv-ok"),c.parent().prev().empty()):(f.html('<span class="imgur_Zzbv-errorURL">'+
e("Error")+" "+d.lang.errRepeat+"</span>"),c.removeClass("imgur_Zzbv-ok"))});f.click(function(){f.toggleClass("imgur_Zzbv-zzURL").children("img").toggleClass("imgur_Zzbv-iconUrl");k.click()})})};
}(jQuery));
$(function () {
$(function () {
$(".sceditor-button-servimg").click(function () {
if (!$(".imgur_Zzbv").length) {
$(".sceditor-servimg, .sceditor-tinypic").zzImgUr({
cliendID: "CLIEND-ID",
loading: "http://i.imgur.com/m3NXDa6.gif",
css: {
width: 400
},
success: function (img) {
$("#text_editor_textarea").sceditor("instance").insert(img);
},
remove: function (img) {
$("#text_editor_textarea").sceditor("instance").val($("#text_editor_textarea").sceditor("instance").val().replace(img, ""));
}
});
$(".sceditor-servimg, .sceditor-tinypic").click(function () {
setTimeout(function () {
$(this).show();
}, 1);
});
}
});
});
});
Thay Client ID tạo ở Bước 1 vào vị trí đánh dấu CLIEND-ID trong code trên (dòng 33).
Xem hướng dẫn tùy chỉnh jQuery plugin zzImgUr tại: https://devs.forumvi.com/t131-jq-plugin-jquery-plugin-zzimgur#831