jquery Fancybox使用教程

時間 2019-11-08

標籤 jquery fancybox 使用教程欄目 JQuery 简体版

原文原文鏈接

Fancybox是一款基於jquery的對圖片展現播放的插件，固然，它html文本、flash動畫、iframe以及ajax也予以支持。還能夠經過css自定義外觀，陰影效果超級贊！ javascript

演示效果：http://www.phpddt.com/demo/fancyBox/demo/index.html
使用教程也是至關簡單： php

首先固然是要引入jquery核心庫和Fancybox插件庫： css

<script type="text/javascript" src="../lib/jquery-1.10.1.min.js"></script> html

若是你要實現圖片滾輪效果，引入下面文件： java

<script type="text/javascript" src="../lib/jquery.mousewheel-3.0.6.pack.js"></script> jquery

FancyBox核心js和css文件： ajax

<script type="text/javascript" src="../source/jquery.fancybox.js?v=2.1.5"></script> ide

<link rel="stylesheet" type="text/css" href="../source/jquery.fancybox.css?v=2.1.5" media="screen" /> 動畫

若是你須要按鈕效果，引入按鈕css文件： ui

<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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="../lib/jquery-1.10.1.min.js"></script>
<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" />
<script type="text/javascript">
$(document).ready(function() {
$('.fancybox').fancybox();
$(".fancybox-effects-a").fancybox({
helpers: {
title : {
type : 'outside'
},
overlay : {
speedOut : 0
}
}
});
});
</script>
<style type="text/css">
.fancybox-custom .fancybox-skin {
box-shadow: 0 0 50px #222;
}
body {
max-width: 700px;
margin: 0 auto;
}
</style>
</head>
<body>
<h3>對簡單圖片展現</h3>
<p>
<a class="fancybox" href="1_b.jpg" data-fancybox-group="gallery" title="Lorem ipsum dolor sit amet"><img src="1_s.jpg" /></a>
</p>
</body>
</html>

效果如以下：