【推荐】jquery幻灯片插件fancybox

插件地址： http://fancybox.net/

使用方法

1. 包含需要的 JS 文件

<script src="path-to-file/jquery.js" type="text/javascript"><!--mce:0--></script> <script src="path-to-file/jquery.fancybox.js" type="text/javascript"><!--mce:1--></script>

选择性的添加 easing 插件所需的 js 文件, 如果不使用该插件就不添加.

<script src="path-to-file/jquery.easing.js" type="text/javascript"><!--mce:2--></script>

2. 添加 FancyBox CSS 文件
如果 FancyBox CSS 文件没有和 images 目录在同一目录内, 应该改变图片路径

3. 创建一个链接
加载图片使用:

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

加载同一页面中的 element:

<a id="inline" href="#data">This shows content of element who has id="data"</a>

Iframe方式:

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

Ajax:

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

可选参数:使用title属性可以增加图片说明文字.
注意:你或许想要删除点击图片关闭展示这个功能,此时你必须使用 Iframe 或者 inline 方式去加载.

4. 使用 jQuery 选择器

$(document).ready(function() { /* This is basic - uses default settings */   $("a#single_image").fancybox();   /* Using custom settings */   $("a#inline").fancybox({ 'hideOnContentClick': true });   $("a.group").fancybox({ 'zoomSpeedIn': 300, 'zoomSpeedOut': 300, 'overlayShow': false }); });