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

2014年7月21日 星期一

有導覽小圖的image gallery: Fotorama:超簡易使用


FOTORAMA使用範例:2014淡水.夏
Canon 6D + Olympus om 35mm f2 & yashica 50mm f1.4

在數位文本構思、設計、組構時,創作者要思考著讀者會如何與我對話,亦即讀者會如何來探測文本,換言之,讀者是形塑數位文本樣貌的一個必要元素,讀者影響了創作者對文本組織的考量,「讀者的存在與綜合才能成就作品(kolko, 2011: 14)」(李明哲,2013:97)。
──李明哲,2013,《多媒體互動新聞寫作》。台北:五南。

一、請複製下列 jQuery 程式並置入於<head>xxx</head>之間(建議)或<body>之後:
<script src="http://code.jquery.com/jquery-1.12.4.js"></script>
<link href="http://lmcdwriting.org/userfiles/lmcsilver20121007/fotorama-4.6.4/fotorama.css" rel="stylesheet">
<script src="http://lmcdwriting.org/userfiles/lmcsilver20121007/fotorama-4.6.4/fotorama.js"></script>

※※※【click here】※※※
這次互 動模組的呈現樣 態,除了(一)真的使用上很簡單,(二)再來是圖像下面有小圖導覽。因之,在使用時機上,如果是很多圖要呈現的狀況下,就非常的適用。可以讓者在往下看圖 之前,大致知道可以看到什麼。

二、請複製下列 HTML 語法並置入於所欲之編輯區:
<div class="fotorama" data-width="560" data-height="374" data-nav="thumbs">
<img data-caption="這是圖說" src="圖片網址">
<img src="圖片網址">
<img src="圖片網址">
<img src="圖片網址">
<img src="圖片網址">
</div>

※※※【click here】※※※
1. 請設定圖像要呈現的長、寬,即紅色字體處。請注意圖像的長寬比例。請看教學影 音。
2. 如果想要圖說,語法如下:<img src="圖片網址" data -caption="這是圖說">。請在欲加入圖說的照片增加綠色字體語 法,即會出現圖說。

三、影音 教學:



4 則留言:

  1. 老師您好,想請問如果自己在網路下載喜歡的content slider ,
    例如:http://workshop.rs/projects/coin-slider/
    我將如何在kompozer使用呢?!
    可以凡老師解答嗎?! 謝謝
    PS:(我是初學者)

    回覆刪除
    回覆
    1. 沒問題,我找個時間來教一下

      刪除
  2. 明哲老師:我這個功能已經做好了,單純在桌面看html是成功的。但是只要上傳到dropbox並分享公開連結之後,打開的網頁就無法使用該功能了?請問是為什麼呢?謝謝。

    回覆刪除
    回覆
    1. 對,dropbox有這個問題,會讓一些互動程式失效。你要用其他的網路空間看看。

      刪除