准备工作：
先到fancybox的官方网站下载相应的fancybox插件，网址是http://www.fancybox.net / ，其实这个非常简单，可能情况是程序员一般是比较懒的动物，然后将最常用的弹出层效果抽取出来，fancybox插件中用到的组件图片放在 fancybox文件夹中，css文件就是style.css，所以fancybox是非常灵活的，完全可以自己定制样式。
HTML structure:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="imagetoolbar" content="no"/>
<title>FancyBox 1.3.4 | Demonstration</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>!window.jQuery && document.write('<script src="jquery-1.4.3.min.js"><\/script>'); </script>
<script type="text/javascript"
src="./fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript"
src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css"
href="./fancybox/jquery.fancybox-1.3.4.css" media="screen"/>
<link rel="stylesheet" href="style.css"/>
<script type="text/javascript"> $(document).ready(function() {
/** Examples - various **/
$("#various1").fancybox({'titlePosition' : 'inside',
'transitionIn' : 'none',
'transitionOut' : 'none'
});
});
</script>
</head>
<body>
<div id="content">
<ul>
<li>
<a id="various1" href="#inline1"
title="Lorem ipsum dolor sit amet">Inline</a>
</li>
</ul>
<div style="display: none;">
<div id="inline1"
style=" 400px; height: 100px; overflow: auto;">
Mr-sniper say hello kitty to everyone.
</div>
</div>
</div>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="imagetoolbar" content="no"/>
<title>FancyBox 1.3.4 | Demonstration</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>!window.jQuery && document.write('<script src="jquery-1.4.3.min.js"><\/script>'); </script>
<script type="text/javascript"
src="./fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript"
src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css"
href="./fancybox/jquery.fancybox-1.3.4.css" media="screen"/>
<link rel="stylesheet" href="style.css"/>
<script type="text/javascript"> $(document).ready(function() {
/** Examples - various **/
$("#various1").fancybox({'titlePosition' : 'inside',
'transitionIn' : 'none',
'transitionOut' : 'none'
});
});
</script>
</head>
<body>
<div id="content">
<ul>
<li>
<a id="various1" href="#inline1"
title="Lorem ipsum dolor sit amet">Inline</a>
</li>
</ul>
<div style="display: none;">
<div id="inline1"
style=" 400px; height: 100px; overflow: auto;">
Mr-sniper say hello kitty to everyone.
</div>
</div>
</div>
</body>
</html>
CSS code:
html,body,div,ul {
margin: 0;
padding: 0;
}
body {
color: #262626;
background: #f4f4f4;
font: normal 12px/ 18px Verdana, sans-serif;
}
#content {
width: 400px;
margin: 40px auto 0 auto;
padding: 0 60px 30px 60px;
border: solid 1px #cbcbcb;
background: #fafafa;
-moz-box-shadow: 0px 0px 10px #cbcbcb;
-webkit-box-shadow: 0px 0px 10px #cbcbcb;
}
a {
outline: none;
}
ul {
margin-bottom: 24px;
padding-left: 30px;
}
margin: 0;
padding: 0;
}
body {
color: #262626;
background: #f4f4f4;
font: normal 12px/ 18px Verdana, sans-serif;
}
#content {
width: 400px;
margin: 40px auto 0 auto;
padding: 0 60px 30px 60px;
border: solid 1px #cbcbcb;
background: #fafafa;
-moz-box-shadow: 0px 0px 10px #cbcbcb;
-webkit-box-shadow: 0px 0px 10px #cbcbcb;
}
a {
outline: none;
}
ul {
margin-bottom: 24px;
padding-left: 30px;
}
常用的函数:
$.fancybox.showActivity 显示加载动画
$.fancybox.hideActivity 隐藏加载动画
$.fancybox.next 展示下一个图
$.fancybox.prev 展示上一个图
$.fancybox.close 关闭fancybox
常用的参数:
titlePosition 标题的位置，只能被设置成inside和outside
transitionIn, transitionOut 窗口显示的方式，可以设置为'elastic', 'fade' or 'none' 'fade'
centerOnScroll 当设置成ture的时候，fancybox窗口在滚动网页滚动的时候保持居中
更多参数设置可以参考官方网站：http://fancybox.net/api