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();
}); Nguồn: nTuts
Tks e
Trả lờiXóanhưng cách nào để ứng dụng cho một video :)
Cảm ơn em, đã hiểu rồi :)
Trả lờiXóaTrước giờ anh dùng media player... ngâm cứu cái này thử :)
@Minh Triếthì, a vào đây nha http://itdl.blogspot.com/2011/08/ung-dung-fancybox-xem-cac-video-tren.html
Trả lờiXóacó cái demo cho anh luôn :)
Nhận xét này đã bị tác giả xóa.
Trả lờiXóa