RSSJquery

Plugin Fancy Box của JQuery

Fancybox là một Plugin của jQuery với  chức năng phóng to thu nhỏ cho hình ảnh , nội dung html , Mutimedia cho website của bạn.FancyBox dễ sử dụng và được rất nhiều website sử dụng rộng rãi.

1.  FancyBox  (DEMO)

Fancybox là một Plugin của jQuery với  chức năng phóng to thu nhỏ cho hình ảnh , nội dung html , Mutimedia cho website của bạn.FancyBox dễ sử dụng và được rất nhiều website sử dụng rộng rãi.

2. Tính năng

3. Cách sử dụng

  1. Có thể hiển thị hình ảnh, các phần tử HTML, SWF, Iframes và cũng có thể request bằng ajax.
  2. Tùy biến các thiết lập css dễ dàng.
  3. Nhóm cái item lại với nhau thành 1 group để điều hướng theo kiểu Slide.
  4. Nếu tích hợp Plusgin Mausewheel thì  sẽ điều hướng được với con lăn của chuột.

Trước tiên bạn download plugin Fancybox và demo tại đây  sau đó giải nén ra và copy các file css và javascript vào trong thư mục website của bạn và include Fancybox vào trang html như sau:

<!—Đầu tiên luôn là thư viện jQuery--> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> 
<!—Sử dụng con lăn của chuột (Tùy chọn nên có) --> 
<script type="text/javascript" src="/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script> 
<!—Thư viện css và javascript của Fancybox --> 
<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.3" type="text/css" media="screen" /> 
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.3"></script> 
<!— Thêm các button, thumbnail and/or media --> 
<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" /> 
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script> 
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.5"></script> 
<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-thumbs.css" type="text/css" media="screen" /> 
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-thumbs.js"></script>

Cách sử dụng chỉ một hình ảnh Code Html

<a id="single_1" href="http://farm8.staticflickr.com/7100/6917703112_d18e3e1b95_b.jpg" title="Tiêu đề của hình ảnh">
<img src=http://farm8.staticflickr.com/7100/6917703112_d18e3e1b95_m.jpg alt=""/>
</a>

Hình ảnh nhỏ được bỏ vào trong tag a link href của tag a sẽ là link dẫn đến hình ảnh phóng to, attribute title của thẻ a sẽ là tiêu đề của hình ảnh khi phóng to. Gọi hàm jQuery để thực thi:

$("#single_1").fancybox({ 
      openEffect  : 'elastic', //Hiệu ứng khi hiện hình ảnh lớn('elastic', 'fade' or 'none')
      closeEffect : 'elastic', //Hiệu ứng khi đóng  hình ảnh lớn
      helpers : { 
              overlay : true, //set false nếu disable overlay
            title   : true,//set false nếu disable title
            title : {                      
                       type : 'inside'//('float', 'inside', 'outside' or'over',),
                       position : 'bottom' // 'top' or 'bottom'
            } 
      } 
    }); 

Cách sử dụng một group hình ảnh

<a class="fancybox" rel="gallery1" href="http://farm8.staticflickr.com/7069/7060779347_fbee5aae15_b.jpg" title="morning after[explored] (mariosworld343)"> 
      <img src="http://farm8.staticflickr.com/7069/7060779347_fbee5aae15_m.jpg" alt="" /> 
</a> 
<a class="fancybox" rel="gallery1" href="http://farm8.staticflickr.com/7234/7047458501_46a2203733_b.jpg" title="Self confined... (TVidhya)"> 
      <img src="http://farm8.staticflickr.com/7234/7047458501_46a2203733_m.jpg" alt="" /> 
</a> 

Bạn chỉ cần thêm vào 1 attribute rel của tất cả các tag a mà bạn muốn nhóm chúng lại với nhau giá chị của các rel trong 1 nhóm phải giống nhau.

Gọi hàm jQuery để thực thi:

$(".fancybox").fancybox({ 
      openEffect  : 'elastic', //Hiệu ứng khi hiện hình ảnh lớn('elastic', 'fade' or 'none') 
      closeEffect : 'elastic', //Hiệu ứng khi đóng  hình ảnh lớn 
      helpers : {
               overlay : true, //set false nếu disable overlay
                buttons: {},//thêm button điều hướng cho slide 
                   thumbs      : {// hiển thị ảnh nhỏ trên slide 
                        width : 50, 
                        height      : 50 
                  } 
            title   : true,//set false nếu disable title
            title : {                      
                       type : 'inside'//('float', 'inside', 'outside' or'over',),
                       position : 'bottom' // 'top' or 'bottom'
            } 
      } 
    }); 

Cách sử dụng với ajax, iframe, multimedia

Code HTML

<ul class="list"> 
      <li> 
            <a class="various fancybox.ajax" href="/demo/ajax.php">Ajax</a> 
      </li> 
      <li> 
            <a class="various" data-fancybox-type="iframe" href="/demo/iframe.html">Iframe</a> 
      </li> 
      <li> 
            <a class="various" href="#inline">Inline</a> 
      </li> 
      <li> 
            <a class="various" href="http://www.adobe.com/jp/events/cs3_web_edition_tour/swfs/perform.swf">SWF</a> 
      </li> 
</ul> 
<ul class="list"> 
      <li> 
            <a class="various fancybox.iframe" href="http://www.youtube.com/embed/L9szn1QQfas?autoplay=1">Youtube (iframe)</a> 
      </li> 
      <li> 
            <a class="various fancybox.iframe" href="http://maps.google.com/?output=embed&f=q&source=s_q&hl=en&geocode=&q=London+Eye,+County+Hall,+Westminster+Bridge+Road,+London,+United+Kingdom&hl=lv&ll=51.504155,-0.117749&spn=0.00571,0.016512&sll=56.879635,24.603189&sspn=10.280244,33.815918&vpsrc=6&hq=London+Eye&radius=15000&t=h&z=17">Google maps (iframe)</a> 
      </li> 
      <li> 
            <a class="various" href="/data/non_existing_image.jpg">Non-existing url</a> 
      </li> 
</ul>

Code jQuery để thực thi

$(document).ready(function() { 
      $(".various").fancybox({ 
            maxWidth    : 800,//set chiều rộng  tối đa của box tính bằng px 
            maxHeight   : 600, //set chiều cao tối đa của box 
            width       : '70%', 
            height            : '70%', 
            autoSize    : false,// tự động resize 
            closeClick  : false, // khi click vào ngoài màn hình sẽ đóng box 
            openEffect  : 'none', 
            closeEffect : 'none',
                helpers : { 
                  media : {} 
            } 
 
      }); 
}); 

 

Vậy là bạn đã có thể cấu hình được fancybox cho website của bạn có thêm một tính năng sinh động.

Bạn có thể vào đây thêm tùy chình cho Fancybox của bạn.

Cảm ơn bạn đã theo dõi bài viết, mọi thắc mắc xin để lại bình luận.

Vũ Hữu Triệu

Tags:

Nếu bạn thấy bài viết hữu ích, hãy nhấn +1 và các liên kết chia sẻ để website ngày càng phát triển hơn. Xin cám ơn bạn!

Nếu là khách, bạn phải đăng ký tài khoản và kích hoạt tài khoản để bình luận được hiển thị ở đây.
Thông tin kích hoạt gửi đến mail của bạn.

Tin mới hơn

Tin cũ hơn

Lên trên đầu