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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9ufjKovvaSi-gEMwwjRVuuul8AAcgBd62NDvO3M83IzZC6_N8qmC-ozlu4zstV90sSaODZwX-mDMsEsYR0KaooNaTpE3ylFjTYVwbsDcChczTvRriGk05YZRY3nuwBd0eqD6NdL49_3M/w1061-h708-no/IMG_096001.jpg" title="Before">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQIlWxosF6FdiVhN4XzPe0SVXhzWmpY8ilawY3CA8161l1qwfh3zFCG3y5YTLVLGwb9k3MoiPQfIBl7OiNl8JeYx9mKff1Dx_eFiARnsrTuDcWv-2zdhx8ewUPfNIlWmmdCLkUsakuhKc/w1220-h814-no/IMG_0960.JPG" title="After">
</div>

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


原始語法出處：Image Reveal


沒有留言:

張貼留言