jQuery fancybox
Fancybox là plugin jQuery cung cấp chức năng phóng to thu nhỏ hình ảnh, hiển thị nội dung html và đa phương tiện trên website theo phong cách mac. Đây là một plugin đơn giản, dễ dàng sử dụng và tùy chỉnh theo mục đích. Trước tiên ta sẽ xem một ví dụ cơ bản để hiểu chức năng chính của Fancybox: ...
Fancybox là plugin jQuery cung cấp chức năng phóng to thu nhỏ hình ảnh, hiển thị nội dung html và đa phương tiện trên website theo phong cách mac. Đây là một plugin đơn giản, dễ dàng sử dụng và tùy chỉnh theo mục đích.
Trước tiên ta sẽ xem một ví dụ cơ bản để hiểu chức năng chính của Fancybox:
- Không dùng Fancybox:
| Picture1 | Picture2 | Picture3 |
|---|---|---|
 |
|
|
- Dùng Fancybox: (Bạn hãy click vào hình ảnh để thấy sự khác biệt)
| Picture1 | Picture2 | Picture3 |
|---|---|---|
|
|
|
Đến đây hẳn là bạn đã thấy rõ công dụng của việc dùng Fancybox cho website của bạn, đây cũng chính là lý do mà tôi muốn giới thiệu Fancybox trong bài viết này.
1. Cài đặt và sử dụng
Để bắt đầu, bạn tải về các plugin tại đây, giải nén nó và include vào ứng dụng của bạn:
<head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <link rel="stylesheet" href="/fancybox/jquery.fancybox.css" type="text/css" media="screen" /> <script type="text/javascript" src="/fancybox/jquery.fancybox.pack.js"></script> </head>
Lưu ý: bạn nhớ tại thư viện jQuery
Tiếp theo bạn thêm class fancybox cho hình ảnh cần hiển thị:
<a href="large_image.jpg" class="fancybox" title="Sample title"><img src="small_image.jpg" /></a>
Sau đó chỉ cần thêm script để gọi Fancybox plugin:
<script> $(document).ready(function() { $('.fancybox').fancybox(); }); </script>
Hoặc bạn cũng áp dụng script sau cho toàn bộ hình ảnh của bạn:
<script> $("a[href$='.jpg'],a[href$='.jpeg'],a[href$='.png'],a[href$='.gif']").attr('rel', 'gallery').fancybox(); </script>
Thuộc tính attr('rel', 'gallery') sẽ có tác dụng trong trường hợp bạn muốn hiện thị một bộ sư tập ảnh, ta sẽ xem ví dụ ở phần sau.
Với cách gọi .fancybox(); như trên các giá trị mặc định sẽ được tải, bạn hoàn toàn có thể thêm những tùy chọn cho phù hợp với ứng dụng của bạn: Ví Dụ:
<script> $(document).ready(function() { $('.fancybox').fancybox({ padding : 0, // default 15 margin: 0, // default 20 awidth: 560, // default 800 height: 340, // default 600 opacity: true, // default false ... }); }); </script>
Một số tùy chọn cơ bản:
| Tên | Giá trị mặc định | Mô tả |
| ------------- |:-------------
