2013年4月4日 星期四

按一下就可以跑出圖片、影音、image gallery、網頁、flash…

更新的教學版本，請click前往。
新版本，更好用，更簡單，更彈性。

Fancybox：全能的「分層文本」寫作利器。
按一下就可以跑出圖片、影音、image gallery、網頁、flash， 以及你自己想表現的html文字。


步驟u：(1)把下列語法直接copy到<head>xxx</head>裡去，或是<body>的後面

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript"
src="http://newsweek.shu.edu.tw:8080/lmcsilver20121007/fancyapps-fancyBox-0ffc358/source/jquery.fancybox.js"></script>
<link rel="stylesheet" type="text/css"
href="http://newsweek.shu.edu.tw:8080/lmcsilver20121007/fancyapps-fancyBox-0ffc358/source/jquery.fancybox.css"
media="screen"></link>


(2)再來把下列語法直接copy到<body>的後面，用來驅動上面載入的程式

<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox({
padding: 0,
fitToView: false,
afterLoad: function(){
this.width = $(this.element).data("width");
this.height = $(this.element).data("height");
}
});
});
</script>


步驟v：再來是文章中針對要「按下去就跑出東西」寫作元素，所要運用的HTML語法。

按一下字或圖就跑出圖片的語法：

按文字：
<a class="fancybox" data-width="640" data-height="360"
href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4HqfUAdbs9NlLmU93wfWb_dUtsiYLn2fQZugcoFwmSH5EclgL3cO7x0ABAUQ7Ajsz5byiku2crtuIb7x3JyL6H99osPffiRxp124Aqpxz8uuNRZG8UPPVTiFq07V7Vhh19crZ-bbCMJQ/s763/IMG_4387.JPG"
title="單純的花花草草">按我跑出圖</a>

按小圖：
<a class="fancybox"
href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvDBJ3WQl8FypeZSCOnCVzHtwyexlD9EGh3liffCblXfbP20eHIviMMUmZOk2fJjSkeDpBgs2egRTflqb0qmAswhky85Da7H8ADC4ibC9svK4FGJtats5lPRCIK7ORFrEN_4PYv7YDbhg/s1037/P3246888.JPG"
data-width="640" data-height="480" title="植物園的春綠"><img
style="border: 0px solid ; width: 64px; height: 43px;"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBwmk3opWZJae4UPpCYPhf5fqBr959Qge5LYMcSsHIUXIde4pot_lfsQLJyUurJ8AxWA8QKNdtXcN-p2gikkoXit-fTkPMLDbh5sIY92cWIf2Y4V-0wMKxAr3g7UEY2L8cBHaRw9VAsjM/s763/IMG_4379.JPG"
alt=""></a>

實例效果：

按我跑出圖 　　
語法說明：
1. class="fancybox"這是使用fancybox必要的語法，一定要抄進去。
2. data-width="xxx" data-height="xxx" 是要跑出來的圖片的寬、高。這個是部分是老師參考網路再改修改的語法，所以一定要有，一定要指定所要跑出圖片的寬、高。
3. href="xxx" xxx是圖片的位置網址。
4. title="xxx" xxx是圖下的說明文字。


再來是運用fancybox處理iframe語法的能力：
(1)可以叫出以前我們教過的image gallery。例如李安Pi的動物園。

<a class="fancybox fancybox.iframe" data-height="621" data-width="821" href="http://newsweek.shu.edu.tw:8080/lmcsilver20121007/gallery1026/gallery0406/index.html" title="帶女兒看李安Pi的動物園">李安Pi的動物園</a>
影音教學：

語法說明：
1. 要使用fancybox來叫出另一網頁，例如此例是要叫出 image galley 中的index.html，千萬記得使用 class="fancybox fancybox.iframe" 這一語法標記。
2. data-width="xxx" data-height="xxx" 是所跑出 image gallery 的寬、高。因為程式設定的闗係，xxx最好是 image gallery 所設定的寬、高，再加上21px，會比較好看。例如 image gallery 設定為800 600，那麼再各加上21px，data-width="821" data-height="621"。21px是我反覆實驗後的數字，你可以自行試出想要的數字。
3. href="xxx" xxx是所要秀出網頁的位置網址。
4. title="xxx" xxx是下方的說明文字。

#Plus1「3D立體 image gallery」今年的春天正在開始ing。〔看語法〕
#Plus2

(2)可以「直接」叫出youtube裡面的影音。例如暑假記事 olympus ep2 with 17mm 。

<a class="fancybox fancybox.iframe" data-height="480" data-width="640" href="http://www.youtube.com/embed/am5MvcsDXbU?rel=0" title="一段暑假的小小回憶">暑假記事 olympus ep2 with 17mm </a>

(3) 直接叫出 Vimeo 影音：例如2013暑假記事 olympus ep2 with 35mm/3.5 。

<a class="fancybox fancybox.iframe" data-height="360" data-width="640" href="http://player.vimeo.com/video/69818548" title="2013屏東萬金聖母殿">2013暑假記事 olympus ep2 with 35mm/3.5 。</a>

又例如可以直接點「影像」就跑出 video ：

<a class="fancybox fancybox.iframe" data-height="315" data-width="560" href="http://www.youtube.com/embed/MWMwLra7yXM?rel=0" title="凝望的容顏"><img style="width: 64px; height: 64px;"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBXNGAeQtmgfZfst3m9-nITKDa0_FdSmYvAihOrHviD9vxuNDClYF_vE6u_apqAYskeWOIFldaHyXAP2pVSiD81Obd6JO8LZHQmpiqM0sARSxZwEe979YdCeyu3PUGdyas2oagB-MOwQU/s256-no/23_Play-256.png"></a><br>

影音教學：

語法說明：
1. 這是 class="fancybox fancybox.iframe" 的特殊運用語法，可以從 youtube 中「直接叫出」影音。
2. data-width="xxx" data-height="xxx" xxx是指在 youtube 分享／嵌入功能中所設定的寬度和高度。
3. href="xxx" xxx也是可以直接從 youtube 分享／嵌入功能中找出來。例如此例 youtube 中的分享／嵌入語法：
<iframe width="640" height="480" src="http://www.youtube.com/embed/am5MvcsDXbU?rel=0" frameborder="0" allowfullscreen></iframe>
紅色部分即是我們要的。
4. 你也可以加上  title="xxx" ，xxx當作影音的文字說明。

(4) 另一個重要的特色是可以按一下叫出Flash，用來豐富補充文本的內容。例如跑 出Flash來！（請移入滑鼠，並按一下）

<a class="fancybox" data-height="375" data-width="500" href="http://newsweek.shu.edu.tw:8080/lmcsilver20121007/lmcsilver/20120508/20120508.swf">跑出Flash來！</a>
再來看一個 Flash 的 .swf 檔案：石碇的三月陰雨


☆☆
本例所使用的Fancybox 套裝程式與之前所教過的 videobox 套裝程式，會有相衝的現象。所以只能在這兩者間選一套使用。



8 則留言:

  1. Kevin2014年5月14日 晚上9:02

    李老師您好, 像一些字典網頁, 按下speaker小圖, 就能聽到發音, 但頁面不會跳開, 畫面還是停留在原來的網頁, 請問這種功能的語法該怎麼寫? 非常感謝!

    回覆刪除
  2. M.C. Lee2014年5月14日 晚上10:22

    不知這個功能是不是你想要的，請看
    http://lmcmultimedia.blogspot.tw/2012/04/blog-post.html

    回覆刪除
  3. Kevin2014年5月15日 晚上7:10

    非常感謝老師的回覆. 我是想做出像Yahoo字典網頁的那種效果, ex https://tw.dictionary.yahoo.com/dictionary?p=frantic 這個網頁. 它在音標旁有個喇叭的小圖案, 點一下就可以聽到單字的發音, 但是網頁沒有變化. 很重要的一點是: 希望在沒有網路連線時也能有這種效果(我怕要用到一些網路上的js, css檔, 這樣沒有連線就沒用了, 而且聲音檔也是在自己PC裡.) 我看它的原始碼有a class="button-audio" href="javascript:void(0); 但找不到它是怎麼定義button-audio的.而且如果能直接播wav更佳. 懇請老師指導一下. 非常感謝.

    回覆刪除
  4. 匿名2014年6月25日 凌晨1:14

    網頁現在這麼多尺寸, 不輸入尺寸應該自動偵測大小 各自保留21px之類的做法,或是改用百分比, 寬高寫死這點認為不可取.
    另外iframe在某些情況高度是會爆掉的, 無法控制頁面滿出來的部分

    回覆刪除
    回覆
    1. M.C. Lee2014年6月25日 上午8:15

      這是很好的建議。
      但藉著這個機會我也講一下從教學來的思考：
      如果什麼都設定好了，其實會讓學生失去更多學習的機會以及累積去「變化」的經驗。
      在自動和手動之間如何平衡，讓學生「願意學」但又不會「太難到不想學」，往往是一種思考上的兩難。
      這會反映在「教學方法」上的思考，而不止是「程式思考」而已。
      理論上而這，這是「教學網站」而不是「套裝程式」網站，學習過程中可以多學到什麼？是我重要的考量。
      anyway, thanks.
      這讓我有機會再去重新思考一下教學流程。

      刪除
  5. Unknown2015年1月25日 晚上11:10

    請問老師如果是想要按圖顯示出文字呢？
    還有可以讓文字是在圖的下方顯示，可以讓兩張圖的說明做切換的語法

    回覆刪除
    回覆
    1. M.C. Lee2015年5月26日 下午4:35

      您看看這個是不是您想要的效果
      http://lmcmultimedia.blogspot.tw/2013/12/fancybox.html

      刪除
  6. M.C. Lee2015年5月26日 下午4:35

    您看看這個是不是您想要的效果
    http://lmcmultimedia.blogspot.tw/2013/12/fancybox.html

    回覆刪除