數位時代的寫作，是一種新形態的文本表達模式！
首頁
初學者技能教案專區
google Meet遠距上課技能
javascript互動文本寫作
融媒體Wix教學
網路新聞寫作：HTML&CSS
新聞影音剪輯：premiere
匯流寫作基模知識：gravit
基礎影音編輯：shotcut
基礎向量圖像編輯：inkscape
基礎圖像編輯：GIMP
排版設計scribus
匯流新聞專題寫作
影音新聞製作與剪輯（上課用）
新聞直播編導／OBS（上課用）
基礎新聞攝影（上課用）
數位排版/敘事（上課用）
西洋哲學史導讀
老子探義導讀
《論語》小談
《法華經》的思
品嚐《華嚴經》
Unsplash圖像集
Pexels 圖像集
我的給大學生書單
傳播理論／研究

2013年11月26日 星期二

讓人癢眼的 jQuery Image Gallery: zAccordion



癢眼又癢手的Gallery !
  • Old School Diner

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras porttitor lacus sollicitudin ligula sagittis a ultricies nulla ultricies. Ut odio nisi, posuere sed blandit at, bibendum non dolor.

  • A Day at the Pool

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in condimentum sem. Aenean faucibus dignissim auctor. In ut libero vitae augue laoreet iaculis at a tellus.

  • Fill it Up!

    Duis viverra velit orci. Sed vestibulum mi nec est imperdiet sed ullamcorper augue molestie. Donec ultrices facilisis erat at porttitor.

  • Going for a Drive

    Phasellus sed lectus nisl.


zAccordion可以自動展開、指定延長時間。圖像滑動美感，也可以透過click來選擇圖像。半露的圖像，指涉者一種具有高度「參與性」誘惑力的互動文本呈現。

1.請於<head>xxx</head>之間或<body>之後置入下列jQuery程式：
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script
src="http://lmcdwriting.org/userfiles/lmcsilver20121007/jquery.zaccordion/js/jquery.zaccordion.js"></script>
2.請於<body>之後置入下列jQuery驅動語法：
<script>
$(document).ready(function() {
$("#splash").zAccordion({
timeout: 6500,
speed: 600,
slideClass: 'slide',
animationStart: function () {
$('#splash').find('li.slide-previous div').fadeOut();
},
animationComplete: function () {
$('#splash').find('li.slide-open div').fadeIn();
},
buildComplete: function () {
$('#splash').find('li.slide-closed div').css('display', 'none');
$('#splash').find('li.slide-open div').fadeIn();
},
startingSlide: 0,
slideWidth: 600,
width: 720,
height: 400,
auto: true
});
});
</script>
3.請於<body>之後置入下列 CSS：
<style>
#splash div {-moz-border-radius:5px;-webkit-border-radius:5px;background-color:rgba(0,0,0,0.4);border-radius:5px;bottom:0;margin:10px;padding:5px;position:absolute;z-index:10;}
#splash h2 {font-size:1.4em;margin-bottom:5px; font-family: 微軟正黑體;}
#splash strong {color:white;font-size:1.21em;text-shadow:none; font-family: 微軟正黑體;}
#splash p {color:white;font-size:1.03;line-height:1.2em;margin:0!important;text-shadow:none; font-family: 微軟正黑體;}
</style>
4.於想要呈現的編輯區置入下列 HTML：
<ul id="splash">
<li> <img
src="第一張圖片網址"
alt="" style="width: 600px; height: 400px;">
<div> <strong>圖說中標</strong>
<p class="splash-text">圖說內文。</p>
</div>
</li>
<li> <img
src="第二張圖片網址"
alt="" style="width: 600px; height: 400px;">
<div> <strong>圖說中標</strong>
<p class="splash-text">圖說內文。</p>
</div>
</li>
<li> <img
src="第三張圖片網址"
alt="" style="width: 600px; height: 400px;">
<div> <strong>圖說中標</strong>
<p class="splash-text">標說內文。</p>
</div>
</li>
<li> <img
src="第四張圖片網址"
alt="" style="width: 600px; height: 400px;">
<div> <strong>圖說中標</strong>
<p class="splash-text">圖說內文。</p>
</div>
</li>
</ul>


語法出處：zAccordion

1 則留言:

  1. Unknown2016年5月4日 上午10:09

    老師,請問可在這效果的圖中或文字裹加上hyperlink嗎?

    回覆刪除

訂閱： 張貼留言 (Atom)