溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
Fancybox是一款基于jquery的對圖片展示播放的插件，當然，它html文本、flash動畫、iframe以及ajax也予以支持。還可以通過css自定義外觀，陰影效果超級贊！
演示效果：http://www.phpddt.com/demo/fancyBox/demo/index.html
使用教程也是相當簡單：
首先當然是要引入jquery核心庫和Fancybox插件庫：
<script type="text/javascript" src="../lib/jquery-1.10.1.min.js"></script>
如果你要實現圖片滾輪效果，引入下面文件：
<script type="text/javascript" src="../lib/jquery.mousewheel-3.0.6.pack.js"></script>
FancyBox核心js和css文件：
<script type="text/javascript" src="../source/jquery.fancybox.js?v=2.1.5"></script>
<link rel="stylesheet" type="text/css" href="../source/jquery.fancybox.css?v=2.1.5" media="screen" />
如果你需要按鈕效果，引入按鈕css文件：
<link rel="stylesheet" type="text/css" href="../source/helpers/jquery.fancybox-buttons.css?v=1.0.5" />
<script type="text/javascript" src="../source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
如果你要實現縮略圖效果，引入：
<link rel="stylesheet" type="text/css" href="../source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" />
<script type="text/javascript" src="../source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
如果要動態加載媒體，引入：
<script type="text/javascript" src="../source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
下面是一個最簡單的圖片展示例子：
<!DOCTYPE html>
<html>
<head>
<title>fancyBox使用教程 - PHP點點通(www.phpddt.com)</title>
<metahttp-equiv="Content-Type"content="text/html; charset=UTF-8"/>
<scripttype="text/javascript"src="../lib/jquery-1.10.1.min.js"></script>
<scripttype="text/javascript"src="../source/jquery.fancybox.js?v=2.1.5"></script>
<linkrel="stylesheet"type="text/css"href="../source/jquery.fancybox.css?v=2.1.5"media="screen"/>
<scripttype="text/javascript">
$(document).ready(function(){
$('.fancybox').fancybox();
$(".fancybox-effects-a").fancybox({
helpers:{
title :{
type :'outside'
},
overlay :{
speedOut :0
}
}
});
});
</script>
<styletype="text/css">
.fancybox-custom .fancybox-skin {
box-shadow:0050px#222;
}
body {
max-width:700px;
margin:0auto;
}
</style>
</head>
<body>
<h4>對簡單圖片展示</h4>
<p>
<aclass="fancybox"href="1_b.jpg"data-fancybox-group="gallery"title="Lorem ipsum dolor sit amet"><imgsrc="1_s.jpg"/></a>
</p>
</body>
</html>
效果如如下：
更多FancyBox參數及選項配置如下：
下載：fancyBox-master.zip （點擊這里演示）
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
