2015年7月2日 星期四

tooltips (三):按一下,即可快速跳出小型影音





補充文字說明!

按一下,即可快速跳出小型影音。





數位文本,會利用各種可能的媒材,讓讀者獲得最佳的理解之可能。例如要介 紹一個地方特色,本例南 投水里,一段小小影音的補充說明, 可以讓讀者有著更豐富的理解。這個例子,就是使用click互動,跳出小型影音的補充說明。



jQuery程式碼,請置 於<body>之後:

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<link rel="stylesheet" type="text/css"
href="http://lmcdwriting.org/userfiles/lmcsilver20121007/tooltipster-master/css/tooltipster.css">
<script type="text/javascript"
src="http://lmcdwriting.org/userfiles/lmcsilver20121007/tooltipster-master/js/jquery.tooltipster.min.js"></script>

**特別說明:
jquery-1.9.1.js這一條程式碼,上例暗紅色字體者。如使用其他互動模組時,已被寫入,則可省略。一般而言,這條程式碼一篇文章中有一次出現即可。請保留最早出現的那次。

本例驅動程式語法碼,請置 於<body>之後:

<script>
$(document).ready(function() {
$('#id0702').tooltipster({
content: $('<iframe width="320" height="180" src="https://www.youtube.com/embed/4q58G5Z1KHI?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe><br><strong>水里蛇窑的一日遊。</strong>'),
interactive: true,
position: 'left',
offsetX:-180,
offsetY: 30,
trigger: 'click'
});
});
</script>

說明:
一、紅色字為youtube影音的嵌入碼,請參考影音教學。
二、綠色字為影音下方文字說明。
三、設定tooltips出現的位置以及位移的量(正、負數字)。 藍色字體者。
四、位置有八種:right, left, top, top-right, top-left, bottom, bottom-right, bottom-left 。
五、要按下去的媒材元件,記得要設id,本例為 id0702,暗紅色字體者



影音教學: