jQuery fancybox

Đăng bởi Neo trong mục Hướng dẫn vào 07 tháng 1, 2010 | Comments
Xem Demo Tải về

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.

(tại thời điểm viết bài, trang fancybox.net không truy cập được nên tôi đưa demo lên trang vannyneo.com)

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:

<p>
    Sử dụng cho 1 ảnh <br />

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

<p>
    Sử dụng cho một nhóm các ảnh <br />

    <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>
</p>

Và gọi plugin fancybox

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

Bạn có thích bài viết này?

Neo's picture

Neo

Nhìn mặt trời từ năm 1984 nhưng tới tận 2002 mới được thấy cái máy tính đầu tiên của mình. Đầu năm 2007 thì quyết định theo cái nghề cao quý là thiết kế web Big Grin. Hiện mình đang sống tại Hà Nội. Sở thích: làm website và giúp đỡ mọi người phát triển website theo chiều hướng tốt đẹp hơn.

Trang chủ - Twitter