fancybox api中文版

今天给大家介绍的jquery图片播放插件叫fancybox api中文版，相比LightBox来说，Fancybox相对庞大点，配置也更丰富一些，相信你会喜欢的。d9w红软基地

d9w红软基地

fancybox api中文版使用方法

1、引入jquery核心库和Fancybox插件库d9w红软基地
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>d9w红软基地
<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>d9w红软基地
可选 - 如果需要用到fancy transition（一些动画效果）你还需要引入以下脚本d9w红软基地
<script type="text/javascript" src="/fancybox/jquery.easing-1.4.pack.js"></script>d9w红软基地

可选 - 如果需要支持鼠标滚轮滚动效果你还需要引入以下脚本d9w红软基地
<script type="text/javascript" src="/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>d9w红软基地

d9w红软基地
2、添加样式表文件d9w红软基地
<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen">d9w红软基地

d9w红软基地
3、在页面上创建链接元素d9w红软基地

A、图片元素d9w红软基地
<a id="single_image" href="image_big.jpg"><img src="image_small.jpg" kesrc="image_small.jpg" alt=""></a>d9w红软基地

B、普通文本d9w红软基地
<a id="inline" href="#data" kesrc="#data">This shows content of element who has id="data"</a> d9w红软基地
<div style="display: none;">d9w红软基地
    <div id="data">Lorem ipsum dolor sit amet， consectetur adipiscing elit.</div>d9w红软基地
</div>d9w红软基地

C、Iframed9w红软基地
<a href="http://www.example?iframe">This goes to iframe</a> d9w红软基地
或者d9w红软基地
 <a class="iframe" href="http://www.example">This goes to iframe</a>d9w红软基地

d9w红软基地
D、Ajaxd9w红软基地
<a href="http://www.example/data.php">This takes content using ajax</a>d9w红软基地
如果你要显示描述信息，可以在链接上加上title，将描述信息放到title中。d9w红软基地