2014年1月20日 星期一

學生超愛用的影音跳出法：fancyBox 快速使用法





為了教學上便利，重新編寫fancybox語法，更方便設置。
如果你是我的上課學生，請使用最新編寫操作方法。
請至（2016年）fancybox：一次設定多次使用







本文示範範例 ＆ 影音教學



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


教學影音：



jQuery  語法，請放於<body>之後：

<script>
$(function () {
$("#lmci01").click( function () {
$.fancybox({
fitToView: false,
beforeShow: function () {
        this.width = 600;                
        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;





6 則留言:

  1. 匿名2014年4月29日 下午4:22

    請問老師，這在個網頁上，為什麼滑鼠指標移過去會就呢變色?請問這有教學嗎?謝謝

    回覆刪除
    回覆
    1. M.C. Lee2014年5月21日 上午10:28

      有
      這裡有教
      http://lmcmultimedia.blogspot.tw/2013/12/css-hover.html

      刪除
  2. DUKEPLUS20032014年6月17日 晚上10:35

    請問這個應用適用在GOOGLE BLOG嗎?

    回覆刪除
    回覆
    1. M.C. Lee2014年6月18日 清晨5:40

      是的，
      你用html編輯
      然後把程式碼都寫入就可以了

      刪除
    2. DUKEPLUS20032014年6月18日 清晨6:46

      那再請問老師若GOOGLE BLOG主體範本中沒有 body 如何置入?
      Thanks!

      刪除
  3. Unknown2014年10月5日 晚上8:57

    建立新文章按鈕按下去ㄝ在左上角按html按鈕後,下面方框區就是body編輯區,就將kompozer所編輯body內html碼貼上後發布即可.參照http//www.youtube.com/embed/101ESV1C0Z0 (kompozer所編輯方式)
    我也是這樣弄出來 我部落http://catbeauty1.blogspot.tw/

    回覆刪除