Naver Map Wide Gallery - Xem ảnh toàn màn hình cùng lúc

Tiện ích mở rộng Chrome tôi làm vì thấy bức bối khi xem ảnh trên Naver Map

Khi tìm quán ăn ngon hay quán cà phê, tôi thường xuyên dùng Naver Map.

Nhưng mỗi khi xem những địa điểm có nhiều ảnh, tôi luôn gặp cùng một sự bất tiện. Muốn xem ảnh cho tử tế thì phải liên tục cuộn trong một vùng nhỏ, mở một ảnh rồi đóng lại thì lại phải tìm lại vị trí, và cũng khó để so sánh nhanh nhiều ảnh với nhau.

Đặc biệt, với những nơi như điểm du lịch hay quán ăn nổi tiếng có tới hàng trăm bức ảnh, bản thân việc xem ảnh cũng trở thành một công việc khá mệt mỏi.

Vì vậy, tôi bắt đầu làm thử một dự án nhỏ vào cuối tuần với suy nghĩ: "Sao không hiển thị tab ảnh giống như một gallery nhỉ?"

Kết quả là Naver Map Wide Gallery.

Nó hoạt động như thế nào?

Khi vào tab ảnh trong trang chi tiết địa điểm trên phiên bản PC của Naver Map, sẽ có thêm một nút được thêm vào.

Khi nhấn nút đó, thay vì vùng ảnh hiện có, một gallery toàn màn hình sẽ mở ra và bạn có thể duyệt ảnh theo dạng lưới cùng lúc.

Tôi cũng triển khai để các bộ lọc mà Naver Map cung cấp như ảnh do doanh nghiệp đăng, ảnh review, clip, video... vẫn được đồng bộ nguyên vẹn.

Các tính năng đã triển khai

• Gallery toàn màn hình dạng rộng
• Hỗ trợ bộ lọc ảnh / video
• Tải thêm dựa trên cuộn vô hạn
• Điều chỉnh kích thước lưới
• Phóng to ảnh
• Xem thông tin review
• Thoát nhanh bằng ESC

Những điểm tôi chú ý khi phát triển

Mục tiêu là hạn chế tối đa việc làm ảnh hưởng đến UX hiện có của Naver Map.

Không có máy chủ riêng, cũng không gọi API bên ngoài. Mọi thứ chỉ chạy trong trình duyệt, không thu thập hay truyền dữ liệu người dùng.

Ngoài ra, tôi cũng chú ý đến việc phát hiện DOM và xử lý rendering động để nó có thể hoạt động bền vững nhất có thể ngay cả khi cấu trúc bên trong của Naver Map thay đổi.

Sau khi làm xong

Ban đầu đây chỉ là một tiện ích mở rộng nhỏ tôi làm để dùng cá nhân, nhưng khi dùng thử thì tôi thấy khác biệt khá rõ khi tìm những địa điểm có nhiều ảnh.

Nếu có ai giống tôi, đã mệt mỏi vì phải cuộn khi xem ảnh trên Naver Map, rất mong bạn thử dùng và cho tôi feedback.

Chrome Web Store:
https://chromewebstore.google.com/detail/…