Khi làm ứng dụng TIME live – Chụp ảnh lấy ngay, anh luôn hướng tới người dùng di động trong tình huống mạng chậm. Vì thế giao diện đơn giản, dễ dùng và tiết kiệm băng thông là những ưu tiên hàng đầu.
Ưu tiên đơn giản, gọn nhẹ
“light weight” là từ khoá đi kèm khi anh tìm kiếm một giải pháp lightbox cho hình ảnh. Sau khi đã thử một giải pháp nhưng không hiệu quả thì anh gặp Featherlight – The ultra slim lightbox với phần mở rộng Featherlight Gallery.
Cấu hình Featherlight Gallery rất đơn giản. Ví dụ $('a.gallery').featherlightGallery( options ) sẽ tìm tất cả các thẻ a có class="gallery", lấy giá trị href là địa chỉ ảnh cần hiển thị rồi cho vào lightbox theo đúng thứ tự. Khi người dùng bấm vào phần tử <a class="gallery" nào thì sẽ hiển thị lightbox với ảnh tương ứng.
Vì đã xác định người dùng có tốc độ kết nối thấp nên anh sẽ cho hiển thị ảnh xem trước ở cỡ nhỏ nhất có thể. Chỉ khi người dùng bấm vào ảnh thì lightbox mới hiển thị ảnh cỡ lớn.
Cũng do vấn đề tốc độ truy cập của người dùng và tránh quả tải cho máy chủ, TIME live sẽ không tải hết các ảnh ngay mà dùng giải pháp “cuộn vô cực” :D, tức là người dùng cuộn trang đến đâu thì hiển thị thêm đến đấy.
Nhưng lại bế tắc vì suy nghĩ phức tạp
Nhưng như vậy thì Featherlight sẽ không có tác dụng với các ảnh được tải thêm. Giải pháp ban đầu là mỗi lần tải thêm ảnh thì gọi lại Featherlight. Nhưng điểm hạn chế vẫn còn đấy bởi lightbox chỉ có những ảnh đang có trên trang. Điều này khiến cho người dùng hiểu nhầm là chỉ có từng đấy ảnh. Và anh không thể mong chờ người dùng đóng lightbox, cuộn trang để tải thêm ảnh mới rồi người dùng lại mở lại lightbox.
Anh muốn là một khi người dùng đã xem lightbox thì trong đó phải có sẵn tất cả các ảnh trong gallery.
Anh Google chán chê và thấy nhiều người cũng gặp vấn đề này mà không có giải pháp. Đã có lúc anh định bỏ Featherlight để thử sức với Photoswipe vì anh biết là Photoswipe cho phép đặt sẵn các slides, nhưng cũng chỉ được 30 phút là thấy bế tắc.
Suy nghĩ đơn giản lại xong
Đến vài ba hôm trước, sau khi đọc lại tài liệu hướng dẫn của Featherlight thì anh khẳng định mình vẫn chỉ là loại chép&dán mã nguồn chứ chả hiểu gì. Hoá ra giải pháp cho vấn đề này quá đơn giản. Ấy là những ảnh chưa đến lượt được hiển thị thì cho vào một danh sách kiểu như này:
<div id="lightbox-cache">
<a class="gallery" href="IMG_0011.JPG"></a>
<a class="gallery" href="IMG_0012.JPG"></a>
...
<a class="gallery" href="IMG_0098.JPG"></a>
<a class="gallery" href="IMG_0099.JPG"></a>
</div>Mỗi lần người dùng cuộn trang để tải thêm ảnh thì cập nhật lại danh sách trên và gọi lại Featherlight. Thế là dù ảnh chưa được tải nhưng cũng đã có mặt trong lightbox theo đúng thứ tự.
Danh sách này là vô hình, được tạo lập trên thiết bị của người dùng nên không liên quan đến tốc độ đường truyền hay máy chủ.
Tận dụng
Một công đôi việc. Featherlight không chỉ để xem ảnh mà anh còn dùng nó để hiển thị nội dung chi tiết khi bấm vào menu và nút chia sẻ. Nhờ vậy mà mọi thứ rất gọn gàng.
