Cách thu phóng hình ảnh như trung bình
Nền tảng blog Medium sử dụng một hiệu ứng thu phóng hình ảnh tùy chỉnh trên trang blog của họ. Bất cứ khi nào người dùng nhấp vào hình ảnh, nó sẽ tự động phóng to lên kích thước lớn hơn.
Đó là một hiệu ứng tuyệt vời và chắc chắn là duy nhất đối với Trung bình, nhưng nó chưa bao giờ là thứ có thể dễ dàng sao chép.
Bây giờ, với Hộp trung bình kịch bản, nó dễ dàng hơn bao giờ hết. Tập lệnh JS này rất nhẹ và dễ dàng để thêm vào bất kỳ trang web hoặc blog nào.
Nếu bạn muốn xem cách thức hoạt động, bạn có thể truy cập trang demo trực tiếp được tổ chức bởi người sáng tạo Davide Calignano.
Ông đã dành một chút thời gian để chuyển đổi chính xác hiệu ứng chuyển đổi và hiệu ứng hoạt hình để tạo một hình ảnh phản chiếu của zoom hình ảnh của Medium. Toàn bộ thư viện là được viết bằng JavaScript thuần, vì vậy nó không dựa vào bất kỳ 3lần thứ tập lệnh bên như jQuery.
Bạn sẽ cần biết một chút JS để thiết lập nó nhưng chắc chắn bạn không cần phải là một chuyên gia.
Mỗi hình ảnh có thể chụp dữ liệu- * thuộc tính để đặt chiều cao và chiều rộng kích thước đầy đủ, tất cả đều là kéo linh hoạt từ plugin hộp đèn. Mã thiết lập rất đơn giản và nó có thể nhắm mục tiêu hình ảnh, hoặc là container như
Đây là đoạn mã duy nhất bạn cần để chạy plugin:
MediumLightbox ('hình.zoom-effect'); Bên trong chức năng, bạn sẽ vượt qua một bộ chọn cho tất cả các yếu tố (ví dụ:. .hiệu ứng thu phóng lớp học. Lớp này là được xác định cụ thể trong biểu định kiểu MediumLightbox, do đó, tốt nhất là sử dụng điều này trên trang của bạn.
Và, khi đã được thiết lập, bạn đã sẵn sàng!
Trong khu vực nội dung trang của bạn, bạn có thể gói tất cả hình ảnh thành một
Để tải xuống một bản sao của tập lệnh này và bắt đầu, chỉ cần truy cập vào repo GitHub chính. Ở đây, bạn cũng sẽ tìm thấy tài liệu cùng với đoạn mã bạn có thể sao chép để thiết lập nhanh.
