Hiệu ứng Lightbox

Lâu quá không viết về hack trong Blogger rồi. Hôm nay mình xin viết 1 bài về hiệu ứng Lightbox.
Chú ý: hiệu ứng chỉ chạy tốt trên nền Internet Explorer. Người dùng Firefox có thể không xem đc hiệu ứng này.

Trước hết Lightbox là thế nào?

Đơn giản, Lightbox là một dạng cải tiến từ popup. Nó giống Popup là nó cũng bật ra (pop up), "đè" lên phần còn lại của trang web. Nhưng khác Popup ở một điểm cơ bản, nó không mở ra cửa sổ nào mới mà là một khung chứa (container) ngay trong trang web hiện tại.

Xem mẫu sau: (click vào tấm hình nhỏ phía dưới, chỉ với IE mà thôi)

Bạn đã thấy hiệu ứng rồi đấy. Trên cả tuyệt vời phải không?

Hướng dẫn Cài đặt

Phiên bản: 2.03.2
tác giả đầu tiên: Lokesh Dhakar
Thiết lập phù hợp cho Blogger: Gman
Đưa 4 dòng code sau vào phần head trong template của bạn.
Hãy nhớ backup trước khi làm:
Vào Dashboard → Layout → Edit HTML → Download Full Template.


<script src='http://bloggerhosting.appspot.com/serve/site.gman.googlepages.com/prototype.js' type='text/javascript'/>
<script src='http://bloggerhosting.appspot.com/serve/site.gman.googlepages.com/scriptaculous.js?load=effects' type='text/javascript'/>
<script src='http://bloggerhosting.appspot.com/serve/site.gman.googlepages.com/lightbox.js' type='text/javascript'/>
<link href='http://bloggerhosting.appspot.com/serve/site.gman.googlepages.com/lightbox.css' media='screen' rel='stylesheet' type='text/css'/>


Save Template lại

Sử dụng thế nào?

Cực kỳ đơn giản, sau khi bạn upload một tấm hình vào bài viết. Nó sẽ có đoạn code với dạng như sau:

<a href="Địa_chỉ_thật_của_ảnh"><img src="địa_chỉ_hình_thu_nhỏ_(thumbnail)"></a>

Bây giờ bạn hay thêm vào thẻ <a> 2 thuộc tính là title="Tên_hình" và rel="lightbox" (tên hình có thể bỏ qua). Và bạn có đc đoạn code mới như sau:

<a title="Tên_hình" href="Địa_chỉ_thật_của_ảnh" rel="lightbox"><img src="địa_chỉ_hình_thu_nhỏ_(thumbnail)"></a>

Vậy là xong. Từ nay, khi người xem click vào tấm hình nào có thuộc tính rel="lightbox" thì hiệu ứng Lightbox sẽ xuất hiện.

Muốn thoát khỏi lightbox, chỉ cần bấm ra vùng bên ngoài ảnh. Ngoài ra bạn cũng có thể bấm nút Close x hay phím tắt X từ bàn phím.

Nhiều hình cùng nhóm

Lightbox 2 có thể đưa nhiều hình vào một nhóm để dễ dàng chuyển từ hình này sang hình khác. Muốn vậy, bạn chỉ cần sửa thành rel="lightbox[tên_nhóm]" ở mỗi ảnh trong nhóm.
Việc di chuyển trong nhóm có thể thực hiện bằng 3 cách:

1. Dùng phím mũi trên ← và →.
   
2. Dùng phím N (next) và P (previous)
   
3. Nhấn chuột vào nửa bên trái hay nửa bên phải của tấm hình

Chú ý:

Địa chỉ hình thu nhỏ cũng có thể chính là địa chỉ thật của ảnh.

Với Blogger, khi bạn upload hình lên từ máy (không phải chèn hình có sãn trên mạng) thì tự động nó đưa ra link hình thật và cả link hình thumbnail. Nhưng, link thật đó đc định nghĩa để không thể mở trực tiếp từ trang blogspot.com (vì lý do bảo mật). Vì vậy, muốn dùng lightbox trong trường hợp này, bạn phải sửa lại đôi chút trong link full-size:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg44_fp1qDu3uEJvKONIPTpdeabScf5SSxU3cqFb-bEUZfC-g7EXO9vRzJJKr4iJuSOsWxnk92RnHN2m1uvwuuoEEH9TwdrQQaCYeAG10gugbPjeG2bZ-3nWeqFymYpY4mR7yxG3wUJLes/s1600-h/tumlumtala.PNG

bây giờ bạn hãy bỏ ký tự -h đi. Như vậy, bạn sẽ có:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg44_fp1qDu3uEJvKONIPTpdeabScf5SSxU3cqFb-bEUZfC-g7EXO9vRzJJKr4iJuSOsWxnk92RnHN2m1uvwuuoEEH9TwdrQQaCYeAG10gugbPjeG2bZ-3nWeqFymYpY4mR7yxG3wUJLes/s1600/tumlumtala.PNG

Nếu quan tâm hơn tới người xem, trong trường hợp màn hình của họ không đủ rộng để xem toàn bộ chiều ngang tấm hình. Khi đó lightbox sẽ là trở ngại. Để khắc phục tình huống này. Bạn có thể thay link full-size lại thành:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg44_fp1qDu3uEJvKONIPTpdeabScf5SSxU3cqFb-bEUZfC-g7EXO9vRzJJKr4iJuSOsWxnk92RnHN2m1uvwuuoEEH9TwdrQQaCYeAG10gugbPjeG2bZ-3nWeqFymYpY4mR7yxG3wUJLes/s800/tumlumtala.PNG

cũng có thể dùng s640, s320,... thay cho s800 đó chính là số pixel chiều ngang tối đa của hình (1600 là full size)

Chúc bạn thành công