jQuery fancybox

Bài đăng này đã không được cập nhật trong 3 năm

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
            width: 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ả | | ------------- |:-------------: -----| | padding | 15 | khoảng cách giữa hình ảnh bên trong và viền fancybox, có thể được set bằng số nguyên hoặc mảng tương ứng [top, right, bottom, left] | | margin | 20 | khoảng cách tối thiểu giữa viewport và fancybox, được set bằng số nguyên hoặc mảng | | width | 800 | chiều rộng mặc định cho iframe | | height | 600 | chiều rộng mặc định cho iframe | | minWidth | 100 | chiều rộng tối thiểu của fancybox có thể thay đổi | | minHeight | 100 | chiều cao tối thiểu của fancybox có thể thay đổi | | closeBtn | true | Nếu set bằng true thì nút close sẽ được hiển thị| | closeClick | false | Nếu set bằng true thì fancyBox sẽ đóng khi click vào nội dung | | nextClick | false | Nếu set true thì click vào vào nội dung sẽ next sang ảnh tiếp theo | | mouseWheel | true | Sử chuột để next sang ảnh tiếp theo nếu set bằng true | | autoPlay | false | Nếu set bằng true thì slide sẽ tự động chạy khi mở ảnh đầu tiên của gallery | | playSpeed | 3000 | Tốc độ slideshow tính bằng milli giây | | openEffect / closeEffect / nextEffect / prevEffect | 'fade', 'fade', 'elastic', 'elastic' | Các hiệu ứng hình ảnh khi mở/đóng/next/prev | | ... | ... | ... |

2. Ví dụ

Để hiển thị một bộ sưu tập hình ảnh:

<script>
    $(".fancybox")
        .attr('rel', 'gallery')
        .fancybox();
</script>

<a href="large_1.jpg" class="fancybox" rel="gallery" title="Sample title 1"><img src="small_1.jpg" /></a>
<a href="large_2.jpg" class="fancybox" rel="gallery" title="Sample title 2"><img src="small_2.jpg" /></a>

Xem kết quả

Như ví dụ mỗi ảnh ta có một title riêng nhưng cách hiển thị hoàn giống nhau, Fancybox cũng cung cấp cho ta helpers để tùy chỉnh cách hiển thị này:

<script>
    $(".fancybox").fancybox({
        helpers: {
            title : {
                type : 'float' // float là giá trị mặc định, ngoài ra còn có inside, outside, over
            }
        }
    });
</script>

Xem kết quả

Hoặc bạn có thể vô hiệu hóa Title với mã sau:

<script>
    $(".fancybox").fancybox({
        helpers:  {
            title:  null
        }
    });
</script>

Hơn nữa để cho hình ảnh trở nên hấp dẫn hơn, bạn có thể thêm các hiệu ứng khi đóng mở ảnh như sau:

<script>
    $(document).ready(function() {
        $('.fancybox').fancybox({
            openEffect	: 'elastic',
    	    closeEffect	: 'elastic',
        });
    });
</script>

Xem kết quả

3. Kết luận và tham khảo

Fancybox là một plugin tuyệt vời giúp cho các hình ảnh của bạn trở nên hoàn hào nhất góp phần tô điểm thêm cho wesite của bạn.
Trong giới hạn khuôn khổ bài viết mình chỉ giới thiệu phần thể hiện hình ảnh của Fancybox, ngoài ra bạn cũng có thể tham khảo các link bên dưới để biết thêm ngoài hình ảnh Fancybox cũng có thể sử tương tự đối với việc hiển thị video, bản đồ, nội dung html,..
API
Documents & Examples

jQuery

1. Cài đặt và sử dụng

2. Ví dụ

3. Kết luận và tham khảo

Mục lục