• Page 1 of 1
  • 1
FancyBox2初心者手册
What is Fancybox?
什么是Fancybox?


fancyBox is a tool that built on the top of the popular JavaScript framework jQuery and is both easy to implement and a snap to customize.
fancybox是一个基于jQuery框架的图片、多媒体及网页页面内展示工具。去fancybox2网站看看

What can fancybox do?
fancybox能做什么?


It offers a nice and elegant way to add zooming functionality for images, html content and multi-media on your webpages.
1. 点击网页中的略图形成类modal window的展示效果
2. 可展示内容包括图片、flash、media、内嵌网页
3. 支持同组对象的翻页展示
4. 支持展示内容自适应浏览器大小

How to use

步骤一:引用fancybox的js文件和css文件

<!-- Add jQuery library 别忘了先加jQuery -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

<!-- Add mousewheel plugin (this is optional)  鼠标滚轮插件(可选)-->
<script type="text/javascript" src="/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>

<!-- Add 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>

<!-- Optionally add helpers - button, thumbnail and/or media 外置按钮(翻页等)使用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?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>


如需更改样式可采用覆盖式的方法

步骤二:html加入

<a class="fancybox" rel="group" href="big_image_1.jpg"><img src="small_image_1.jpg" alt="" /></a>
<a class="fancybox" rel="group" href="big_image_2.jpg"><img src="small_image_2.jpg" alt="" /></a>


需要展示的每个单元为一个a标签元素,类为fancybox,与css及后面的js选择对应,故建议页面其他类命名不使用此名,rel为元素的归组名,用于同组元素的翻页效果,href为展示时所联的图片、flash或页面地址,a标签内为略图

<script type="text/javascript">
    $(document).ready(function() {
     $(".fancybox").fancybox();
    });
</script>


使页面载入后启用fancybox

fancybox参数设置

fancybox helper使用
  • Page 1 of 1
  • 1
Search: