1. 程式人生 > >[jQuery外掛] fancyBox:適合移動端以及PC端的彈層+照片瀏覽外掛

[jQuery外掛] fancyBox:適合移動端以及PC端的彈層+照片瀏覽外掛

使用說明:

一、引入必要的檔案

<link href="css/jquery.fancybox.css" rel="stylesheet" type="text/css">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="js/jquery.fancybox.pack.js"></script>

二、寫上啟動程式碼

<script>
    $(document).ready(function() {
$('.fancybox').fancybox(); });
</script>

三、在需要呼叫的位置寫上樣式以及對應的連結地址,適用於圖片、隱藏層、內嵌iframe等

//Ajax:
<a href="/example.html" class="fancybox fancybox.ajax">Example</a>
//or
<a href="/example.html" class="fancybox" data-fancybox-type="ajax">Example</a>

//Iframe:
<a href="example.html"
class="fancybox fancybox.iframe">Example</a> //Inline (will display an element with `id="example"`) <a href="#example" class="fancybox">Example</a> //SWF: <a href="example.swf" class="fancybox">Example</a> //Image: <a class="fancybox" rel="group" href="big_image_1.jpg"
><img src="small_image_1.jpg" alt="" /></a>