jQuery bài 5 Tạo thumnail cho ảnh với jQuery lightbox

Hiện tại, có rất nhiều mã nguồn Jquery lightbox như Colorbox, Fancybox các bạn chỉ việc download về và làm theo hướng dẫn là có dc một lightbox đẹp. Tuy nhiên, có thể bạn chỉ làm theo mà ko hiểu được cách thức hoạt động của nó.

Đây là một plugin của jQuery, tạo hiệu ứng xem ảnh phóng to khi click vào thumnail của ảnh trên web. 
Hiệu ứng đẹp, giúp cho trang web của bạn trở nên thú vị hơn. 


Cách sử dụng rất đơn giản: 
1. Nhúng jQuery và Lightbox script vào trang web của bạn: 

CODE


<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="lightbox.js"></script>


Vì lightbox là một plugin của jQuery, nên bạn phải có jQuery mới dùng được lightbox. 

2. Nhúng css của lightbox vào trang web (bạn có thể custom lại css này theo ý mình cho đẹp hơn) 

CODE


<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> 

3. Kiểm tra đường dẫn các hình ảnh trong file css xem có chính xác chưa: prevlabel.gif, loading.gif, closelabel.gif, ... 

4. Thêm thuộc tính class="lightbox" vào bất kì thẻ link nào đề kích hoạt lightbox. 

CODE


mdw #1 

5. Nếu bạn có một tập những hình ảnh có liên quan với nhau, và bạn muốn chúng thành một group, thì bạn cũng làm như bước 4, rồi thêm thẻ rel với giá trị là tên của group, group không giới hạn số lượng ảnh, ví dụ: 

CODE



mdw #1
mdw #2
mdw #3


Để chọn được nhiều mẫu ưng ý hơn các bạn có thể xem ở trên link này, cách thức hoạt động của chúng cũng gần giống nhau và dựa trên các hiệu ứng jQuery, rất đơn giản và dễ hiểu. 

Nếu bạn thích thì có thể download demo bên dưới để xem. Demo của mình đơn giản hơn, chỉ cần bạn đặt chúng trong div với id là 'wizards' thì sẽ thành công mà không cần đánh id cho các thẻ image, vì jQuery selector sẽ chọn hết các thẻ image trong id 'wizards' một cách tự động.