Thu Phóng Hình Ảnh (Lightbox / Ghost Zoom)

Tính năng Lightbox (hay Ghost Zoom) của theme TanaFlows là một giải pháp thu phóng hình ảnh cao cấp được tích hợp sẵn.

Khi người đọc nhấp vào một hình ảnh trong bài viết, hình ảnh đó sẽ phóng to chiếm trọn màn hình trên một nền tối mờ sang trọng, giúp họ tập trung hoàn toàn vào các chi tiết nhỏ nhất mà không bị phân tâm.

Các lợi ích và cơ chế hoạt động

Hệ thống hoạt động ngầm để mang lại trải nghiệm xem ảnh chất lượng cao thông qua các cơ chế sau:

1. Trải nghiệm thu phóng điện ảnh mượt mà (Cinematic Zooming)

• Chuyển động tự nhiên: Thay vì mở ảnh trong một cửa sổ bật lên (popup) thô cứng hoặc một tab mới, Lightbox sử dụng công nghệ đồ họa Web Animations API nguyên bản để “kéo” bức ảnh từ vị trí gốc ra giữa màn hình. Hiệu ứng thu phóng diễn ra trong 300 mili-giây với đường cong chuyển động tự nhiên (cubic-bezier(0.4, 0, 0.2, 1)) mang lại cảm giác cực kỳ êm ái.
• Khoảng đệm an toàn: Ảnh khi phóng to sẽ tự động được tính toán kích thước dựa trên khung hình trình duyệt thực tế, đồng thời chừa lại 10% khoảng đệm an toàn ở các cạnh để bức ảnh không bị dính sát viền màn hình, giữ được tính thẩm mỹ cao.

2. Tải ảnh chất lượng cao thông minh (High-Res Swapping)

Để trang web của bạn tải nhanh nhất có thể, mặc định các bài viết Ghost sẽ sử dụng ảnh đã được nén giảm dung lượng. Tuy nhiên, khi người dùng cần zoom ảnh:

• Lightbox sẽ lập tức phóng to phiên bản ảnh nén hiện tại trước để người dùng thấy ảnh ngay mà không phải chờ đợi.
• Song song đó, hệ thống tự động tải ngầm phiên bản ảnh gốc sắc nét nhất (Original Quality) từ máy chủ.
• Ngay khi ảnh chất lượng cao tải xong, nó sẽ được thay thế trơn tru vào vị trí ảnh đang phóng to mà không làm người dùng bị gián đoạn hay nhận ra bất kỳ vết gợn nào.

3. Tương tác trực quan & Tiện dụng tối đa (UX Hardening)

Hệ thống cung cấp nhiều cách phản hồi cực kỳ trực quan và tinh tế để người đọc dễ dàng tương tác:

• Chỉ báo con trỏ: Khi di chuột qua hình ảnh có thể zoom, con trỏ chuột sẽ tự động chuyển thành hình kính lúp cộng (zoom-in), và chuyển thành kính lúp trừ (zoom-out) khi ảnh đang phóng to.
• Thoát zoom dễ dàng: Người đọc có thể quay lại bài viết bằng nhiều cách vô cùng tự nhiên:
  1. Nhấp chuột vào bất kỳ đâu trên màn hình (vào ảnh hoặc vùng tối mờ bên ngoài).
  2. Nhấn phím Escape trên bàn phím.
  3. Tự động đóng khi cuộn trang: Nếu bạn đang xem ảnh phóng to mà cuộn trang đi tiếp (quá 50 pixel), ảnh sẽ tự động thu nhỏ êm ái về vị trí cũ trong bài viết.
  4. Tự động đóng khi thay đổi kích thước trình duyệt (Resize) để không bị méo hay vỡ giao diện.

4. Tối ưu hiệu năng & Pin thiết bị

• Siêu nhẹ: Tính năng này được viết bằng JavaScript thuần túy (Vanilla JS), hoàn toàn không sử dụng bất kỳ thư viện ngoài nào, giúp giảm thiểu tối đa dung lượng tải trang.
• Tối ưu phần cứng: Sử dụng thuộc tính willChange để báo trước cho card đồ họa (GPU) của máy tính hỗ trợ xử lý hiệu ứng, triệt tiêu hoàn toàn hiện tượng giật hình.