Tạo ảnh thumbnail (Image resizing) bằng jQuery

Mặc dầu chúng ta có thể tạo ảnh thumbnail trên phần server (sử dụng PHP và GD) nhưng cũng có nhiều trường hợp chúng ta sẽ cần dùng đến đoạn jQuery sau đây để thu nhỏ ảnh. Nếu các bạn muốn biết tạo ảnh thumbnail bằng PHP thì có thể tham khảo bài viết
Hướng dẫn resize image (thu nhỏ ảnh) đơn giản với PHP.

Các bạn copy đoạn code bên dưới và dán vào trang mà các bạn muốn ảnh tự động thu nhỏ khi duyệt.

$(window).bind("load", function() {
	// IMAGE RESIZE
	$('img').each(function() {
		var maxWidth = 120;
		var maxHeight = 120;
		var ratio = 0;
		var awidth = $(this).awidth();
		var height = $(this).height();
	
		if(awidth > maxWidth){
			ratio = maxWidth / awidth;
			$(this).css("awidth", maxWidth);
			$(this).css("height", height * ratio);
			height = height * ratio;
		}
		var awidth = $(this).awidth();
		var height = $(this).height();
		if(height > maxHeight){
			ratio = maxHeight / height;
			$(this).css("height", maxHeight);
			$(this).css("awidth", awidth * ratio);
			awidth = awidth * ratio;
		}
	});
});

Chúc các bạn thành công !

Chuyên Mục: Javascript

Bài viết được đăng bởi webmaster