 |
|
訂閱
上一篇
返回
下一篇
highslide 4.1.8簡介--圖片效果
作者: 誌工 日期: 2009-11-25 16:18
步驟一：先到highslide官網下載壓縮檔案。參考下列圖示：
按小圖看大圖，現學現賣...
步驟二：下載後解壓縮，出現3個資料夾、1個檔案。
建議可以先進去index.html，把Highslide JS core、With Gallery裡的每一種效果都看過一遍，選擇一種你想要的，然後再到example資料夾裡找尋該html檔，打開，重點放在兩個地方：<head></head>標籤之間，以及圖片的引用法。
比如誌工選擇了Gallery example with white design，對應的網頁檔就是gallery-white.html，在<head></head>之間程式碼為：
<script type="text/javascript" src="http://你的主機位置/..../highslide/highslide-with-gallery.js"></script>
<link rel="stylesheet" type="text/css" href="http://你的主機位置/..../highslide/highslide.css" />
<script type="text/javascript">
hs.graphicsDir = 'http://你的主機位置/..../highslide/graphics/';
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.outlineType = 'rounded-white';
hs.fadeInOut = true;
hs.addSlideshow({
interval: 5000,
repeat: false,
useControls: true,
fixedControls: 'fit',
overlayOptions: {
opacity: .75,
position: 'bottom center',
hideOnMouseOut: true
}
});
</script>
步驟三：這些設定決定了圖片將會呈現的效果，複製後加到你的網頁中。路徑請自行調整。
步驟四：將highslide裡的graghic資料夾、highslide-with-gallery.js、highslide.css上傳至你的網頁空間。
步驟五：想讓效果出現，最後一步就是貼圖。gallery-white.html中的原始碼，把圖片路徑修改為你的就大功告成啦！如下所示：
<div class="highslide-gallery">
<a href="http://xxx/大圖_01.jpg" class="highslide" onclick="return hs.expand(this)">
<img src="http://xxx/小圖_01.jpg" alt="Highslide JS" title="Click to enlarge" />
</a>
<div class="highslide-caption">
第一張圖片的註解.可以用CSS修改樣式.
</div>
<a href="http://xxx/大圖_02.jpg" class="highslide" onclick="return hs.expand(this)">
<img src="http://xxx/小圖_02.jpg" alt="Highslide JS"
title="Click to enlarge" /></a>
<div class="highslide-caption">
第二張圖片的註解.
</div>
//自行增加.......
</div>
路徑的正確與否，是剛開始經常出現的錯誤...
還有很多效果，可以慢慢自行測試。
引用通告地址:
標籤:
中國娃娃跳棋 (2009-12-02 23:13)
網誌效果--圖片加框 (2009-11-04 21:09)
是考驗？還是另一種提示？ (2009-10-05 21:42)
網誌不穩，請多見諒！ (2009-09-30 22:45)
終於重見天日了... (2009-09-26 16:34)
護生愛心園遊會--拼豆區 (2008-12-30 12:01)
流量又爆了 (2008-12-01 20:35)
SAMSUNG新手機 INNOV8 i8510即將上市 (2008-09-15 19:14)
免費部落格時鐘 (2008-07-30 20:53)