很早前已經看到小傑師父這篇教學了,沒記錯的話應該是2007年吧
圖片試範找了我玩得超兇的FB,寵社裡的寵物 "Mo Mo" 她是女生來的
highslide版本都更新了好幾個囉,沒差啦,這篇是方便我自己用的啦
原來有很多朋友都對這個highslide好感興趣啊,說真的真的是很好用喔
如果大家都想弄一個的話,可以直接按下面連結到小傑家學習學習啊
偷偷告訴你們咧,他的家有很多很好玩的寶藏啊,所以不要錯過 XDDD
以下內容來源來自小傑師父:教學 | highslide 圖片特效 (4.0.6 update!)
highslide官方網站:http://highslide.com/
點進去官方網站之後,尋找"Download"按鈕並 依照下面圖示依序點選
總共有三種版本可以下載,不過我們選擇的是最左邊Free也就是免費的版本
下載下來的會是個壓縮檔
例如我目前下載到的最新版本是4.0.6,那麼檔名就會是"highslide-4.0.6.zip"
解壓縮之後,裡面應該會有"highslide"、"images"兩個資料夾跟其他一堆html的範例
目前我們只要highslide這個資料夾
接下來找個可以外連且可以放資料夾的網路空間上傳
例如我用的是中華電信的網路空間,我只要把highslide這個資料夾直接上傳就OK了
接下來就是回到自己的部落格啦,首先必須先做個前置作業
這裡以Pixnet痞克幫為例,到部落格後台之後點選側邊欄位設定
點選新增版位之後,把下面的程式碼都給貼上去
剛剛有提到,我是把我的highslide資料夾傳到hinet的空間
所以我的highslide的網址會是http://XXX.myweb.hinet.net/
那以下的highslide的網址請自行帶換成你的網路空間位址
------------------------------------------------------------------------------------------------------------
<script type="text/javascript" src="highslide的網址/highslide/highslide.js"></script>
<script type="text/javascript">
hs.graphicsDir = 'highslide的網址/highslide/graphics/';
</script>
<style type="text/css">
.highslide-wrapper div {
font-family: Verdana, Helvetica;
font-size: 10pt;
}
.highslide {
cursor: url(highslide的網址/highslide/graphics/zoomin.cur), pointer;
outline: none;
text-decoration: none;
}
.highslide-active-anchor img {
visibility: hidden;
}
.highslide-wrapper, .drop-shadow {
background: white;
}
.highslide img {
border: 1px solid #aaa;
}
.highslide:hover img {
border: 1px solid #333;
}
.highslide-wrapper {
background: white;
}
.highslide-image {
border: 10px solid white;
}
.highslide-image-blur {
}
.highslide-caption {
display: none;
border: 5px solid white;
border-top: none;
padding: 5px;
background-color: white;
}
.highslide-loading {
display: block;
color: black;
font-size: 8pt;
font-family: sans-serif;
font-weight: bold;
text-decoration: none;
padding: 2px;
border: 1px solid black;
background-color: white;
padding-left: 22px;
background-image: url(highslide的網址/highslide/graphics/loader.white.gif);
background-repeat: no-repeat;
background-position: 3px 1px;
}
a.highslide-credits,
a.highslide-credits i {
padding: 2px;
color: silver;
text-decoration: none;
font-size: 10px;
}
a.highslide-credits:hover,
a.highslide-credits:hover i {
color: white;
background-color: gray;
}
a.highslide-full-expand {
background: url(highslide 的網址/highslide/graphics/fullexpand.gif) no-repeat;
display: block;
margin: 0 10px 10px 0;
width: 34px;
height: 34px;
}
</style>
------------------------------------------------------------------------------------------------------------
再來是最重要的貼圖的語法了
過程總是會比較麻煩的,但習慣了就還可以接受
而且圖開出來的成果可是很讚的
<a id="thumb1" href="圖片網址" class="highslide" onclick="return hs.expand(this, { captionId: 'caption1', align: 'center' } )"><img src="圖片網址" "Highslide JS" "點擊圖片放大" width="圖片的寬度(數字)" height="圖片的高度(數字)"/></a>
你也可以為 圖片加上註解(可加可不加)
<div class='highslide-caption' id='caption1'>
想加的註解
</div>
上面的註解部份就貼 到圖的語法下面(其實貼哪都可以啦 看個人習慣)
記得caption1裡的數字必須跟thumb1裡的一樣它才會顯示在圖下面
藍 色的部份就是
開出來的圖將會置中在螢幕中央
依需要 可加可不加
如果還要再貼下一張就把數字改一改,例如:
<a id="thumb2" href="圖片網址" class="highslide" onclick="return hs.expand(this, { captionId: 'caption2', align: 'center' } )"><img src="圖片網址" "Highslide JS" "Click to enlarge" width="圖片的寬度(數字)" height="圖片的高度(數字)"/></a>
<div class='highslide-caption' id='caption2'> 想加的註解</div>
------------------------------------------------------------------------------------------------------------
其實上面那些程式碼都是從他資料夾裡的範例裡找出來的
如果你也想研究,那麼你可以用筆記本去開那些html檔
程式都在那裡面,你可以去看 看每個範例有什麼不同的效果
像是無邊的啦、縮放啦等等
或是直接點index.htm
它也可以讓你縮放ajax、flash等不是圖片的檔
至於要怎麼樣讓你新增的版位 消失
你可以搜尋你部落格的原始碼,找你新增版位的名稱
例如我是取作highslide4.0.6,那麼我就可以在我的原始碼裡找到這段:
<div id="box114335" class="box">
<h4 class="box-title">highslide4.0.6</h4>
上 面的box114335就是這個欄位的標籤啦,數字你找到的 應該會跟我不一樣
接下來你只要把這段加到你CSS裡的任何地方
#box114335{
display:none;
}
你新增的highslide版位應該就不會出現在blog裡啦
.