04/10/2018, 20:18

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 ...

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 !

Tags: học jquery jQuery code resize image thumbnail

Chuyên Mục: Javascript

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

Bài liên quan

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 ...

Hoàng Hải Đăng viết 20:18 ngày 04/10/2018

Tạo chức năng tăng giảm kích thước font chữ bằng JQuery

Có thể một vài bạn sẽ nghĩ ngay rằng chức năng này không cần thiết nữa, nhất là khi chúng ta có thể phóng to thu nhỏ ngay trên trình duyệt. Tuy nhiên cách đó sẽ phá hỏng những thiết kế của các bạn. Trong bài viết này, mình sẽ chỉ tập trung vào phần javascript, còn phần HTML và CSS chỉ là phần cơ ...

Trịnh Tiến Mạnh viết 20:14 ngày 04/10/2018

Tạo chức năng đo độ bảo mật của Password bằng jQuery

Bảo mật web đang ngày càng trở thành vấn đề quan trọng nhất cho việc quản lý website. Nếu các bạn đang có ý định tự tay xây dựng hệ thống cho phép người dùng có thể tạo password, thì chức năng hiển thị thông báo độ mạnh bảo mật đối với password mà họ vừa mới nhập luôn luôn là một chức năng hữu ích ...

Tạ Quốc Bảo viết 20:13 ngày 04/10/2018

Hiệu ứng chuyển ảnh đen trắng sang màu bằng jQuery và HTML5

Trước đây để tạo hiệu ứng chuyển màu như thế này , chúng ta cần phải chuẩn bị 2 tấm hình, một có màu đen trắng và một có màu nguyên thủy. Nhưng giờ đây, với sự xuất hiện của HTML5 canvas, bạn có thể nhân bản ảnh gốc và tạo ra một ảnh đen trắng trực tiếp một cách đơn giản và nhanh chóng. Mình hy ...

Tạ Quốc Bảo viết 20:12 ngày 04/10/2018

Tạo slideshow cho trang thiết kế nội thất bằng jQuery và CSS3

Slideshow mà mình giới thiệu cho các bạn trong bài viết này không chỉ dành riêng cho những trang thiết kế nội thất mà còn dùng chung cho những trang muốn trình diễn sản phẩm trên trang chủ. Xem Demo | Download HTML Để thực hiện được slideshow này, trước tiên các bạn chèn các file ...

Vũ Văn Thanh viết 20:10 ngày 04/10/2018
0