fancyBox

This is a demonstration. More information and examples: www.fancyapps.com/fancybox/

Simple image gallery

Different effects

Various types

fancyBox will try to guess content type from href attribute but you can specify it directly by adding classname (fancybox.image, fancybox.iframe, etc).

Ajax example will not run from your local computer and requires a server to run.

Button helper

Thumbnail helper

Media helper

Will not run from your local computer, requires a server to run.

Open manually

Photo Credit: Instagrammer @whitjohns

js (可挑選所需的載入)


<!-- Add jQuery library --><!-- 若原先網頁已經有此程式則不必再次引入 -->
<script type="text/javascript" src="http://js.mobi.net.tw/jquery-1.10.1.min.js"></script>

<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="http://js.mobi.net.tw/fancyBox215/jquery.fancybox.js?v=2.1.5"></script>
<link rel="stylesheet" type="text/css" href="http://js.mobi.net.tw/fancyBox215/jquery.fancybox.css?v=2.1.5" media="screen" />


<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="http://js.mobi.net.tw/fancyBox215/jquery.mousewheel-3.0.6.pack.js"></script>

<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="http://js.mobi.net.tw/fancyBox215/jquery.fancybox.js?v=2.1.5"></script>
<link rel="stylesheet" type="text/css" href="http://js.mobi.net.tw/fancyBox215/jquery.fancybox.css?v=2.1.5" media="screen" />

<!-- Add Button helper (this is optional) -->
<link rel="stylesheet" type="text/css" href="http://js.mobi.net.tw/fancyBox215/helpers/jquery.fancybox-buttons.css?v=1.0.5" />
<script type="text/javascript" src="http://js.mobi.net.tw/fancyBox215/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>

<!-- Add Thumbnail helper (this is optional) -->
<link rel="stylesheet" type="text/css" href="http://js.mobi.net.tw/fancyBox215/helpers/jquery.fancybox-thumbs.css?v=1.0.7" />
<script type="text/javascript" src="http://js.mobi.net.tw/fancyBox215/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>

<!-- Add Media helper (this is optional) -->
<script type="text/javascript" src="http://js.mobi.net.tw/fancyBox215/helpers/jquery.fancybox-media.js?v=1.0.6"></script>




HTML

自行檢視原始碼

fancybox.htm

檢視下一個範例index.html

下載完整檔案(備用)
Arter 2014/5/12