Hướng dẫn sử dụng jQuery Fancybox

Hiện tại, vì công việc quá bận rộn nên mình không còn thời gian để post bài và duy trì nội dung cho blog nữa. Do đó tại thời điểm này, mình quyết định ngừng phát triển blog. Mọi bài viết sẽ vẫn được lưu trữ và mình sẽ cố gắng hỗ trợ tất cả các bạn khi có comment hỏi. Cảm ơn các bạn đã ủng hộ blog suốt thời gian qua !

Fancybox là plugin giúp thể hiện hình ảnh, hoặc video, nhạc theo style của hệ điều hành MAC.

Xem Demo | Tải về

Các chức năng chính:

Tự động thêm bóng vào item khi zoom
Chức năng nhóm một loạt item và tự thêm menu
Tùy biến qua file CSS
Hỗ trợ các kiểu chuyển động với plugin easing

Cách sử dụng

Trước tiên, bạn cần download jQuery và jQuery fancybox. Nếu bạn sử dụng plugin easing, thêm vào trong thẻ <head> như sau: (chú ý đặt thư mục jquery.fancybox cùng cấp với file html)

<!-- FancyBox CSS -->
<link rel="stylesheet" type="text/css" href="jquery.fancybox/jquery.fancybox.css" media="screen" />

<!-- Thư viện jQuery -->
<script type="text/javascript" src="js/jquery.min.js"></script>

<!-- Easing Plugin -->
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>

<!-- Fancybox plugin -->
<script type="text/javascript" src="js/jquery.fancybox-1.2.1.pack.js"></script>

Mã HTML như sau:

- Sử dụng cho 1 ảnh

<a title="Sample title" href="1_b.jpg"><img src="1_s.jpg" /></a>

- Sử dụng cho một nhóm các ảnh

<a rel="group" title="Group title #1" href="2_b.jpg"><img src="2_s.jpg" /></a>
<a rel="group" title="Group title #2" href="3_b.jpg"><img src="3_s.jpg" /></a>
<a rel="group" href="4_b.jpg"><img src="4_s.jpg" /></a>

Và gọi plugin fancybox

$(document).ready(function() {
    $("a").fancybox();
});

Nguồn: nTuts