Label Cloud

Tuesday, November 13, 2007

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://site.gman.googlepages.com/prototype.js' type='text/javascript'/>
<script src='http://site.gman.googlepages.com/scriptaculous.js?load=effects' type='text/javascript'/>
<script src='http://site.gman.googlepages.com/lightbox.js' type='text/javascript'/>
<link href='http://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:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8BvaWTRs1UGJ8A8rtMgIbRXx_fm3jFSg8QyKP23o1VmgmoEKBk3slyiMNJU3PfHV1dBGjjSW6nqPvULoJcUdOlescmD3ee61VjKaPOso5BKC-QEbb6wicYFGfhXW0v8rWzMLLoRGjaMU/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/AVvXsEi8BvaWTRs1UGJ8A8rtMgIbRXx_fm3jFSg8QyKP23o1VmgmoEKBk3slyiMNJU3PfHV1dBGjjSW6nqPvULoJcUdOlescmD3ee61VjKaPOso5BKC-QEbb6wicYFGfhXW0v8rWzMLLoRGjaMU/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/AVvXsEi8BvaWTRs1UGJ8A8rtMgIbRXx_fm3jFSg8QyKP23o1VmgmoEKBk3slyiMNJU3PfHV1dBGjjSW6nqPvULoJcUdOlescmD3ee61VjKaPOso5BKC-QEbb6wicYFGfhXW0v8rWzMLLoRGjaMU/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

10 comments:

Anonymous said...

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

Anonymous said...

;)), Vân Anh thử chưa?

Anonymous said...

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

Anonymous said...

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

Anonymous said...

- 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!

Anonymous said...

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

Anonymous said...

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

Anonymous said...

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

Anonymous said...

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

Anonymous said...

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 .

Followers