*YouTube 教學頻道* *影像布落格*
首頁
初學者技能教案專區
布落格寫作
數位影音敘事專題寫作
西洋哲學史導讀
老子探義導讀
《論語》小談
flickr圖像集

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://lh5.googleusercontent.com/-RtozQrxHsWE/UiNcUDr91PI/AAAAAAAAOT4/ZJDYY-8iGJ8/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. 請問老師,這在個網頁上,為什麼滑鼠指標移過去會就呢變色?請問這有教學嗎?謝謝

    回覆刪除
    回覆

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

      刪除
  2. 請問這個應用適用在GOOGLE BLOG嗎?

    回覆刪除
    回覆
    1. 是的,
      你用html編輯
      然後把程式碼都寫入就可以了

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

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

    回覆刪除