bebadboy87
30-09-2008, 05:01 AM
Lightbox là 1 code web khá hay của Lokesh Dhakar phát triển - nó cho ta cái nhìn đặc biệt hơn về một bức hình quan tâm.
Bước 1 : Cài Đặt
Lightbox 2 sử dụng Prototype Framework và thư viện Scriptaculous Effects. Bạn cần phải nhúng 3 file Javascript vào phía trên phần Header web của bạn:
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
Nhúng thêm file Lightbox CSS
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
Kiểm tra file CSS và chắc chắn rằng file prev.gif và next.gif files ở đúng đường dẫn. Kèm đó xem thêm file loading.gif và close.gif files as referenced near the top of the lightbox.js file are in the right location.
Bước 2 : Sử dụng
Thêm thuộc tính rel="lightbox" vào mỗi link cần sử dụng lightbox.
Ví dụ :
<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
Ghi chú: Vẫn có thể sử dung thẻ title để ghi chú nếu bạn muốn.
Nếu bạn có nhiều ảnh và muốn hiện số thứ tự cũng như cho phép người dùng next đến bức ảnh tiếp theo khi đang xem ảnh phía trước thì chỉ cần thêm nhóm tên - chỉ cần nhóm đó cùng 1 tên.
Ví dụ:
<a href="images/image-1.jpg" rel="lightbox[hht]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[hht]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[hht]">image #3</a>
Không giới hạn số ảnh trong 1 Nhóm tên.
Demo : kick vào bất cứ bức ảnh nào ở HHT - nó tuy không phải là lightbox nhưng nó kế thừa và có những điểm khá tương đồng với lightbox
Download Lightbox 2 (http://www.lokeshdhakar.com/projects/lightbox2/releases/lightbox2.04.zip)
- Teppi | hoahoctro.com -
Bước 1 : Cài Đặt
Lightbox 2 sử dụng Prototype Framework và thư viện Scriptaculous Effects. Bạn cần phải nhúng 3 file Javascript vào phía trên phần Header web của bạn:
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
Nhúng thêm file Lightbox CSS
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
Kiểm tra file CSS và chắc chắn rằng file prev.gif và next.gif files ở đúng đường dẫn. Kèm đó xem thêm file loading.gif và close.gif files as referenced near the top of the lightbox.js file are in the right location.
Bước 2 : Sử dụng
Thêm thuộc tính rel="lightbox" vào mỗi link cần sử dụng lightbox.
Ví dụ :
<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
Ghi chú: Vẫn có thể sử dung thẻ title để ghi chú nếu bạn muốn.
Nếu bạn có nhiều ảnh và muốn hiện số thứ tự cũng như cho phép người dùng next đến bức ảnh tiếp theo khi đang xem ảnh phía trước thì chỉ cần thêm nhóm tên - chỉ cần nhóm đó cùng 1 tên.
Ví dụ:
<a href="images/image-1.jpg" rel="lightbox[hht]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[hht]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[hht]">image #3</a>
Không giới hạn số ảnh trong 1 Nhóm tên.
Demo : kick vào bất cứ bức ảnh nào ở HHT - nó tuy không phải là lightbox nhưng nó kế thừa và có những điểm khá tương đồng với lightbox
Download Lightbox 2 (http://www.lokeshdhakar.com/projects/lightbox2/releases/lightbox2.04.zip)
- Teppi | hoahoctro.com -