|
   |
| Forum » Wonder Study 寓教于乐 » Wonder Effect js/as/css分享 » FancyBox2初心者手册 (FancyBox2) |
| FancyBox2初心者手册 |
Date Su, 2013-01-06, 16:12 | Msg 1
 
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使用  |
| |||
| |||
