jquery fancybox插件

发表于

Fancybox是一款基于jquery开发的类Lightbox插件。支持对放大的图片添加阴影效果，对于一组相关的图片添加导航操作按纽。

Fancybox 是一款很绚丽的 jquery 弹出层展示插件，该lightbox除了能够展示图片之外，还可以展示iframed内容， 通过css自定义外观。

How to use

1.First, make sure you are using valid DOCTYPE

This is required for FancyBox to look and function correctly.

2.Include necessary JS files

Loading jQuery from CDN (Content Delivery Network) is recommended

1
2
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>

Optional - Add transitions as jQuery by default supports only “swing” and “linear”

1
<script type="text/javascript" src="/fancybox/jquery.easing-1.4.pack.js"></script>

Optional - Enable “mouse-wheel” to navigate throught gallery items

1
<script type="text/javascript" src="/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>

3.Add FancyBox CSS file

Don`t forget to change background image paths if CSS file is not in the same directory.
Also, check src paths for AlphaImageLoader as they are relative to the HTML document, while regular CSS background images are relative to the CSS document (read more).

1
<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />

4.Create a link element

Images

1
<a id="single_image" href="image_big.jpg"><img src="image_small.jpg" alt=""/></a>

Inline content

1
2
<a id="inline" href="#data">This shows content of element who has id="data"</a>
<div style="display:none"><div id="data">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div></div>

Iframe

1
<a href="http://www.example?iframe">This goes to iframe</a>

or

1
<a class="iframe" href="http://www.example">This goes to iframe</a>

Ajax

1
<a href="http://www.example/data.php">This takes content using ajax</a>

Optional - Use the title attribute for anchors if you want to show a caption
Note - You may want to set hideOnContentClick to false if you display iframed or inline content and it containts clickable elements (for example - play buttons for movies, links to other pages)

5.Fire plugin using jQuery selector

If you are not familiar with jQuery, please, read this tutorial for beginners
Sample examples:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$(document).ready(function() {
    /* This is basic - uses default settings */
    $("a#single_image").fancybox();
    /* Using custom settings */
    $("a#inline").fancybox({
        'hideOnContentClick': true
    });
    /* Apply fancybox to multiple items */
    $("a.group").fancybox({
        'transitionIn'  :   'elastic',
        'transitionOut' :   'elastic',
        'speedIn'       :   600,
        'speedOut'      :   200,
        'overlayShow'   :   false
    });
});

Note - ID’s are meant for a SINGLE instance. If you want to use the same script for all your images/elements then use classes instead.
Note - Galleries are created from elements who have the same “rel” tag, example:

1
2
3
4
5
6
7
8
9
10
/* HTML */
<a class="grouped_elements" rel="group1" href="image_big_1.jpg"><img src="image_small_1.jpg" alt=""/></a>
<a class="grouped_elements" rel="group1" href="image_big_2.jpg"><img src="image_small_2.jpg" alt=""/></a>
<a class="grouped_elements" rel="group2" href="image_big_3.jpg"><img src="image_small_3.jpg" alt=""/></a>
<a class="grouped_elements" rel="group2" href="image_big_4.jpg"><img src="image_small_4.jpg" alt=""/></a>
/* This will create two galleries */
$("a.grouped_elements").fancybox();

项目地址：http://www.fancybox.net/