2014年7月1日 星期二

布落格寫作04：互動的gallery, fancyBox







請同學／網友們一定要透過這一範例，親自學會寫作互動形式的文本。只有你自己有這種寫作的經驗，你才能真的有辦法去思考「如何寫互動形式的」文本。






走到某一條小溪，那可是滿眼的綠啊！ Click & See More !!  ▽



一、請編輯要被「按下去」跑出效果的圖片，影音教學：


  1. 圖片請一定要設定 id 的代碼，這樣「按下去」才會產生互動效果。
  2. 本例的 id 是 id="img0701"
二、請複製下列 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>
三、語法調整的選項及注意事項：

  1. 請把步驟一的圖片所設的 id 代碼（img0701）寫入到程式中，如此才能相互配合發生互動作用，在紅色字體處。
  2. 請加入要跳出的照片網址和圖說，可以一直加到你高興為止。在紫色字體處。
  3. 你可以調整 overlay 的顏色以及透明度。金色字體處。請到色碼表轉換網站。
  4. 請調整所要跳出圖片的大小（長、寬）。水 藍字體處。
  5. <script src="http://code.jquery.com/jquery-1.9.1.js"></script>這條程式碼，綠色字體處，一頁中只能出現一次。如已使用其他互動模式用了這 條，請不要複製進去。總之，一個互動網頁只能出現一次，請保留最前面出現的那條即可。
  6. 這個互動模組只能有一次的效果。如果要做第二個，請重覆步驟一、二，並記得一 要重新改變 id 的代碼。
  7. 設置 id 代碼時，請同時一定要有英文和數字，同時不要用中文字。


參考資料來源：fancyBox website.。


更多fancyBox的互動寫作教學：
按一下就跳出「全文閱讀」
學生超愛用的影音跳出法：fancyBox 快速使用法
按一下跑出補充說明的圖文框：fancybox 補充技能
按一下就可以跑出圖片、影音、image gallery、網頁、flash…


補充資料01：如何使用google blog 寫出互動式多媒體數位文本


張貼者： 於

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)