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嗎?

    回覆刪除