請同學/網友們一定要透過這一範例,親自學會寫作互動形式的文本。只有你自己有這種寫作的經驗,你才能真的有辦法去思考「如何寫互動形式的」文本。
走到某一條小溪,那可是滿眼的綠啊! Click & See More !! ▽
一、請編輯要被「按下去」跑出效果的圖片,影音教學:
|
二、請複製下列 jQuery
語法並於貼入<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> <script type="text/javascript" src="http://newsweek.shu.edu.tw:8080/lmcsilver20121007/fancyapps-fancyBox-0ffc358/source/helpers/jquery.fancybox-media.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"> <script> $(function() { $("#img0701").click(function() { $.fancybox.open([ { href : '第一張照片網址', title : '1st 圖說' }, { href : '第二張照片網址', title : '2nd 圖說' }, { href : '第三張照片網址', title : '3rd 說' } ], { helpers : { overlay : { css : { 'background' : 'rgba(173, 173, 173, 0.90)' } } }, afterLoad : function() { this.width = '560'; this.height = '373'; }, autoSize: true, padding: 5, openEffect: 'elastic', preload: true }); }); }); </script> |
三、語法調整的選項及注意事項:
|
參考資料來源:fancyBox website.。
更多fancyBox的互動寫作教學:
按一下就跳出「全文閱讀」學生超愛用的影音跳出法:fancyBox 快速使用法
按一下跑出補充說明的圖文框:fancybox 補充技能
按一下就可以跑出圖片、影音、image gallery、網頁、flash…
補充資料01:如何使用google blog 寫出互動式多媒體數位文本
沒有留言:
張貼留言