zzImgUr 1.6

KHCN · 1 zzImgUr 1.6 - Upload ảnh lên ImgUr dùng HTML5 25/10/2014, 5:30 pm

KHCN

Thành viên xuất sắc

Bài viết : 613
Uy tín : 35
Tham gia : 24/04/2012
Phương châm : Con người là số 1

zzImgUr ^{Ver 1.6}
Tác giả: Zzbaivong

Chức năng:

Tải ảnh không giảm chất lượng nhờ dùng host ImgUr.
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.
Ảnh sau khi tải lên có thể cập nhật trực tiếp vào khung soạn thảo.
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.
Giao diện hiện đại với đầy đủ thông tin tiến trình tải ảnh.
Tự chuyển về giao diện mini khi chiều rộng hẹp hơn 220px.
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).

Thông tin cập nhật:

http://jsfiddle.net/baivong/NvrQX/embedded/result,js,html/

Demo: http://goo.gl/mjYR0f

Download: http://goo.gl/fLc7Yp

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:

Bước 2: Cài đặt:
jQuery plugin zzImgUr hoạt động tốt với thư viện jQuery phiên bản 1.9.1 hoặc cao hơn.

Code::  <link rel="stylesheet" href="./source/zzImgUr.css" type="text/css" media="screen" />  <script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>  <script type="text/javascript" src="./source/zzImgUr.js"></script>

Bước 3: Sử dụng

Gọi hàm zzImgUr với tham số tối thiểu là Client ID đã đăng ký ở Bước 1.

Code:: $(selector).zzImgUr({ cliendID: "CLIEND-ID" });

Trong code trên selector sẽ là nơi công cụ upload được gắn vào.

THAM SỐ	PHÂN LOẠI	GHI CHÚ
cliendID	string	Đây là tham số bắt buộc. Đăng ký tại https://api.imgur.com/oauth2/addclient
mode	string	Chế độ tải ảnh mặc định, người dùng vẫn có thể chuyển đổi chế độ tải ảnh bằng nút chức năng. Dùng "url" cho chế độ tải ảnh từ liên kết.
format	string	Có 7 định dạng BBcode mặc định o\|s\|b\|t\|m\|l\|h và null. Xem thêm hướng dẫn tùy biến bên dưới.
css	object	Thiết đặt css cho công cụ upload.
max	number	Giới hạn số lượng ảnh tải lên trong 1 lượt.
loading	image URL	Biểu tượng đang tải, hiển thị khi đang tải ảnh.
lang	object	Tùy chỉnh ngôn ngữ cho các thông báo
success	function	Hàm chạy sau khi tải ảnh xong
input	function	Hàm chạy sau khi tạo input
remove	function	Hàm chạy sau khi ảnh xóa thành công

Các tham số mặc định:

Code:: $(selector).zzImgUr({ cliendID: "CLIEND-ID", mode: "file", format: "o,", css: { width: "100%" }, max: 10, loading: "./source/images/loading.gif", lang: { noID: "Ứng dụng chưa đăng ký", addImage: "Chọn ảnh", addURL: "Thêm URL", reset: "Làm mới", upload: "Tải lên", choose: "Đã chọn", waitConnect: "Đang kết nối...", waitUpload: "Đang tải lên...", noteURL: "Nhập URL ảnh vào đây:", errContact: '<a href="http://devs.forumvi.com/t131-jq-plugin-jquery-plugin-zzimgur#831" rel="nofollow" target="_blank">Nhấn vào đây</a> để báo lỗi.', errURL: "URL không truy cập được.", errSize: "URL lỗi hoặc kích thước quá nhỏ.", errRepeat: "URL không hợp lệ hoặc đã được sử dụng." }, success: function (firstVal, arrVal) { }, input: function (arrInput) { arrInput.click(function () { this.select(); }); }, remove: function (firstVal, arrVal) { } });

Hướng dẫn tùy biến định dạng ảnh:

Bảng thống kê định dạng ảnh:

Có 7 giá trị BBcode mặc định tương ứng với 7 hậu tố.
Khi bạn sử dụng riêng từng tên hậu tố, định dạng ảnh sẽ là BBcode với URL là ảnh gốc, còn IMG tương ứng với hậu tố, trừ hậu tố o.

Code:: format = "s" // Ví dụ: [url=http://i.imgur.com/YtCJ2HJs.jpg][img]http://i.imgur.com/YtCJ2HJ.jpg[/img][/url]

Hậu tố o, định dạng ảnh sẽ là BBcode IMG cho ảnh gốc.

Code:: format = "o" // Ví dụ: [img]http://i.imgur.com/YtCJ2HJ.jpg[/img]

Nếu bạn không đặt hậu tố, tức là null, thì định dạng sẽ là URL ảnh gốc.

Code:: format = "" // Ví dụ: http://i.imgur.com/YtCJ2HJ.jpg

Sử dụng hậu tố IN HOA để xuất định dạng BBcode IN HOA.

Code:: format = "O" // Ví dụ: [IMG]http://i.imgur.com/YtCJ2HJ.jpg[/IMG]

Để xuất ra nhiều định dạng ảnh, bạn dùng dấu , để ngăn cách giữa các định dạng.

Code:: format = "s, o" // Ví dụ: [url=http://i.imgur.com/YtCJ2HJs.jpg][img]http://i.imgur.com/YtCJ2HJ.jpg[/img][/url] và [img]http://i.imgur.com/YtCJ2HJ.jpg[/img]

Code:: format = "S, O" // Ví dụ: [URL=http://i.imgur.com/YtCJ2HJs.jpg][IMG]http://i.imgur.com/YtCJ2HJ.jpg[/IMG][/URL] và [IMG]http://i.imgur.com/YtCJ2HJ.jpg[/URL]

Để tùy biến, bạn đặt hậu tố vào giữa 2 dấu ngoặc nhọn. Lúc này nó sẽ là URL tương ứng với hậu tố đó.

Code:: format = "<a class='lightbox' href='{o}'><img src='{l}' alt='640x640' /></a>, <img src='{h}' alt='1024x1024' />" // Ví dụ: <a class='lightbox' href='http://i.imgur.com/YtCJ2HJ.jpg'><img src='http://i.imgur.com/YtCJ2HJl.jpg' alt='640x640' /></a> và <img src='http://i.imgur.com/YtCJ2HJh.jpg' alt='1024x1024' />

Lưu ý: Khi bạn sử dụng từ 2 định dạng ở lên, khi tải xong, sẽ hiển thị 2 định dạng đầu tiên, rê chuột vào để hiện toàn bộ.

Hướng dẫn truy xuất dữ liệu:

Bạn cần quan tâm đến 2 function success và remove.

Code:: success: function (firstVal, arrVal) {} // Thực hiện sau khi tải ảnh hoàn tất remove: function (firstVal, arrVal) {} // Thực hiện sau khi xóa ảnh hoàn tất

Dữ liệu ảnh sau khi tải và sau khi xóa sẽ tương ứng với tùy biến định dạng (format).

firstVal: Giá trị đầu tiên
arrVal: Mảng (array) chứa tất cả các giá trị. Có nghĩa là:

Code:

firstVal == arrVal[0]

Xem ví dụ: http://jsfiddle.net/baivong/cSLgW/

Nguồn: Zzbaivong

HẬU TỐ	TÊN	KÍCH THƯỚC	GIỮ TỈ LỆ ẢNH
s	Small Square	90x90	Không
b	Big Square	160x160	Không
t	Small Yesumbnail	160x160	Có
m	Medium Thumbnail	320x320	Có
l	Large Thumbnail	640x640	Có
h	Huge Thumbnail	1024x1024	Có
o	Original	Không đổi	Có

1 zzImgUr 1.6 - Upload ảnh lên ImgUr dùng HTML5 25/10/2014, 5:30 pm

KHCN