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

2014年10月10日 星期五

互動的照片效果:時間前後的比較



數位新聞寫作利器
比較前、比較後
這個互動模組,是數位新聞的呈現得以有效的超越傳統新聞寫作,很好的一個示範範例 作用。








一、影音教學:


寫作發想:
  1. 要比較時間前後的情況變化時使用。
  2. 請使用範例的互動模組 。
  3. 兩張照片的大小及比例要一致才好看。
  4. 最後一定要記得設定語法中照片的長度和寬度。
二、請把下列 程式碼 複製到<head>xxx</head>之間(建議)或<body>之後:

<link rel="stylesheet" type="text/css"
href="http://lmcdwriting.org/userfiles/lmcsilver20121007/jQuery-Before-After-Image-Comparison-Plugin-Image-Reveal/src/jquery.imageReveal.css">

<script src="http://code.jquery.com/jquery-1.12.4.js"></script>

<script type="text/javascript"
src="http://lmcdwriting.org/userfiles/lmcsilver20121007/jQuery-Before-After-Image-Comparison-Plugin-Image-Reveal/src/jquery.imageReveal.js"></script>

<script>
$(window).load(function() {
$('#Cademo').imageReveal({
barWidth: 15,
touchBarWidth: 40,
paddingLeft: 0,
paddingRight: 0,
startPosition: 0.25,
showCaption: true,
captionChange: 0.5,
width: 576,
height: 384
});
});
</script>

注意事項:
  1. jquery-1.12.4.js 那條程式(橘色字體者), 如已使用了,可以不要再寫入。一篇互動文本,寫入一條即可。最早出現的那條保留即可。
  2. 請記得要設定圖像的長度和寬度,即width & height,暗紅色字體者
三、請把下列 HTML 語法複製到欲呈現之編輯處:

<div id="Cademo" class="imageReveal">
<img src="https://lh6.googleusercontent.com/-zfoS52_k8x0/VDaiOK31kFI/AAAAAAAAYTI/FWb_OwemI_k/w1061-h708-no/IMG_096001.jpg" title="Before">
<img src="https://lh5.googleusercontent.com/-hjokh2l_MWg/VC0a6XIfPII/AAAAAAAAYRU/QmA3K6ICgB4/w1220-h814-no/IMG_0960.JPG" title="After">
</div>

注意事項:
  1. 把照片網址填入src="xxx" 中。即暗紅色字體處。依前、後的時間序填入。


原始語法出處:Image Reveal


沒有留言:

張貼留言