本文示範範例 ＆ 影音教學
fancyBox多功能使用詳細教學【2013年4月版本】↖
fnacyBox可以跳出來的資料類型有很多種，例如文字、影音、gallery、圖文區塊等等。跳出video是最常用功能，因此特別再獨立出來給同學快速使用。
| 1. 請將下列程式碼複製並置於<head>xxx</head>之間或<body>之後： |
|
<script
src="http://code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript" src="http://lmcdwriting.org/userfiles/lmcsilver20121007/fancyapps-fancyBox-0ffc358/source/jquery.fancybox.js"></script> <link rel="stylesheet" type="text/css" href="http://lmcdwriting.org/userfiles/lmcsilver20121007/fancyapps-fancyBox-0ffc358/source/jquery.fancybox.css" media="screen"></link> |
|
注意事項： 1. 暗橙色 juqery-1.9.1.js 程式碼，如其因使用其他互動模組而已寫入，則不用再置入。原則上，一篇數位文章中只要出現一次即可。請保留在原始碼中最早出現的那一條。 2. 上我課程學生或使用KompoZer編輯器，建議將程式碼置於<body>之後。 |
| 2. 請將下列驅動程式碼複製並置於<body>之後： |
| <script> $(function () { $("#lmca01").click( function () { $.fancybox({ width: 560, height: 315, href: 'http://www.youtube.com/embed/TDeGpEx29vY?rel=0', title: '這是新聞系的資料交換雲', type: 'iframe', padding: 5, openEffect: 'elastic', preload: true }); }); }); </script> |
| 注意事項： 1. 指定跳出影音的寬度及高度。width: 560，長度 560px; height: 315，高度 315px。 2. 影音在youtube的位置網址。href: 'http://xxx'。→ 找到影音位置網址的方法，請看教學影音。 3. 所跳出影音下方的文字說明。title: 'xxx'。 |
| 3. 在所欲的編輯區域，置入下列圖像的語法： |
| <img id="lmca01" style="width: 64px; height: 64px;" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipAxm7sc8V52yJD2kZiElar61FRyxYOTUtjHDi7Tv5U7KCNY6xFNTY5Oy4zsqrnlKPCzj10AcCoFyoHEuAQ3nx6DPccON2oH8HrgldUBfFR9OGHEhXkEXSX-7xqSkbE0dwvcLIifyZeIM/s64-no/1378067043_play-circle.png"><br> |
| 說明事項： 1. 在網頁中按下這圖像，就會跳出步驟 2 所設置的影音。 2. 你可以設置自己的圖像，將 src="xxx" 中的xxx，改成自己想要圖像的位置網址。 3. 一定要設置識別碼 id="xxx"，此例為 id="lmca01"。這一識別碼要和步驟 2 的 $("#xxx")，此例為 $("#lmca01")，相同（藍色字的部分）。換言之，一旦按下此圖像後，就會去執行步驟 2 的設定。 4. 如果想要再設置另一個跳出影音，要重復步驟 2 和步驟 3 。同時要設定新的 id="xxx" 以及 $("#xxx")，注意：兩者的 xxx 要相同。例如 id="test01" 以及 $("#test01")。 |
功能二：按文字或圖像跳出大照片
當我們按下一段文字時，會跳出大的照片。例如，美麗的落日（click）。
這是非常常用的互動模態。請務必要會。
同時也可以是按下小圖，如下圖，就跳出大圖。
←click
同時也可以是按下小圖，如下圖，就跳出大圖。
←click教學影音：
jQuery
語法，請放於<body>之後：
<script>
$(function () {
$("#lmci01").click( function () {
$.fancybox({
fitToView: false,
beforeShow: function () {
this.width = 600;
this.height = 450;
},this.height = 450;
href: 'https://farm2.staticflickr.com/1515/25486405835_4e45369b9a_b.jpg',
title: '初春時，陽明山上的落日',
type: 'image',
padding: 5,
openEffect: 'elastic',
preload: true
});
});
});
</script>
補充功能：按一下文字，
聽我講
《論語》，跑出影
片。
手型滑鼠指標CSS： cursor: pointer;
功能三：按文字或圖像跳出圖文框
有時要對某一資訊再補充說明，就可以使用按下去跳出補
充說明圖文框（click）的互動功能。
教學影音：
jQuery
語法，請放於<body>之後：
<script>
$(function () {
$("#lmch01").click( function () {
$.fancybox({
href: '#a010316',
title: '台北暮色中的溫度',
type: 'inline',
padding: 5,
openEffect: 'elastic',
preload: true
});
});
});
</script>
要跳出的圖文框之設定： 就是做出一個你想要的DIV內容。
<div class="fancyboxinline" id="a010316"><br>
很難想像的在冬天，<br>
一種不可思議的<br>
天空顏色。<br>
恰似在對人的一種擁抱。<br>
</div>
<style>
.fancyboxinline {
width: 420px;
height: 270px;
background-image: url(https://farm2.staticflickr.com/1461/25380866326_769cebf322_b.jpg);
background-repeat: no-repeat;
background-size: 360px;
background-position: top left;
font-family: Verdana, '微軟正黑體';
font-size: 1.04em;
font-weight: bold;
line-height: 1.8;
text-align: right;
letter-spacing: 0.1em;
padding-right: 0.5em;
border: 1px solid gray;
}
</style>
注 意！ 讓div消失的CSS： display: none;
