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)
cat11024
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 DashboardLayoutEdit HTMLDownload 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"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:
bây giờ bạn hãy bỏ ký tự -h đi. Như vậy, bạn sẽ có:
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:
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

21 comments:

  1. chài ai có cái comment mà cũng nhảy ra cửa sổ, bó tay, mà sao ff k ứng dụng được nhỉ? VA toàn dùng ff k à, ie hư rài nên ít mở lắm T__T

    ReplyDelete
  2. Anh đã thử, chạy cả trên IE, FF, và opera luôn!

    ReplyDelete
  3. ồ, giờ thì đc rồi
    em dùng FF3 beta 2 này

    ReplyDelete
  4. - Em thấy cái này rất là hay, nhưng mà hình như nó cũng làm blog chậm đi tí thì phải.
    - Với những blog về thủ thuật thì dùng cái này ko quan trọng cho lắm, chỉ cần hiện ảnh đơn giản (hình trong bài viết co lại đúng 100%) là được rồi.
    - Còn đối với những blog phóng sự hay trưng bày ảnh thì cái này đúng là....trên cả tuyệt vời!

    ReplyDelete
  5. thực ra nó ko chậm đi bao nhiêu đâu
    đang nghiên cứu cái lightbox bằng jQuery coi có nhanh hơn ko

    ReplyDelete
  6. bai viet cua ban hay lam
    nhung co mot dieu rat kho chiu la cai theme cua ban kinh dzi qua
    nhin mot hoi no dom dom luon
    vay nha
    nho doi theme nha

    ReplyDelete
  7. ok, mình đang chỉnh sửa đây nè, dù lười quá

    ReplyDelete
  8. ok
    hy vọng bạn làm blog nền sáng chữ tối

    như vậy dễ đọc hơn

    30 giây đó mà, phải hong nè gman

    ReplyDelete
  9. Bao giờ thì Gman mới làm cái lightbox bằng JQuery ?? Mình thấy cái đó cũng không khác với Linghtbox của Gman bao nhiêu nhưng thấy nhièu trang dùng quá . Ví dụ như trang addon của firefox , Vowis lại thấy hiển thị hình nhanh .

    ReplyDelete
  10. Mấy file của Gman mình lưu về cho vào host riêng không xài đc gì hết ?? Xài luôn từ host của Gman thì lại thấy bị hết BandWidth hoài :<

    http://ngankvn.fileave.com/Light/lightbox.css
    http://ngankvn.fileave.com/Light/lightbox.js
    http://ngankvn.fileave.com/Light/prototype.js
    http://ngankvn.fileave.com/Light/scriptaculous.js

    ReplyDelete
  11. cho e hỏi là khi show hình lên thì cái nut Next hay Pre hiên sãng luôn chứ ko phải re chuột mới hiện thì làm cách nào vậy.

    ReplyDelete
  12. 2 dòng tạo ra hiệu ứng rê chuột vào trong file
    http://site.gman.googlepages.com/lightbox.css

    là:

    #prevLink:hover, #prevLink:visited:hover { background: url(http://site.gman.googlepages.com/prevlabel.gif) left 15% no-repeat; }

    #nextLink:hover, #nextLink:visited:hover { background: url(http://site.gman.googlepages.com/nextlabel.gif) right 15% no-repeat; }

    bạn chỉ cần bỏ hết mấy cái :hover đi là sẽ không cần rê chuột vào nữa.

    ReplyDelete
  13. Ban oi. ban co the giup minh lam menu ngang nhu ban dc k? minh lam mai ma cha dc http://tuan-min.blogspot.com/ minh muon lam them 5 lien ket nua

    ReplyDelete
  14. cái này không thích ứng với googlechrome thì phải tiện ích này rất hay, cám ơn bạn

    ReplyDelete
  15. Gắn vào blog thì Feature Slide bị ngưng hoạt động thì sửa sao vậy bạn :)

    ReplyDelete
  16. Lightbox giờ có phiên bản tự động roài, ko cần phải chèn từng ảnh nữa :)

    ReplyDelete
  17. THanks for share. It's useful for me.

    ReplyDelete

You can use some HTML tags, such as <b>, <i>, <a>