很早前已經看到小傑師父這篇教學了,沒記錯的話應該是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
它也可以讓你縮放ajaxflash等不是圖片的檔

至於要怎麼樣讓你新增的版位 消失
你可以搜尋你部落格的原始碼,找你新增版位的名稱
例如我是取作highslide4.0.6,那麼我就可以在我的原始碼裡找到這段:
<div id="box114335" class="box">
    <h4 class="box-title">highslide4.0.6</h4>
上 面的box114335就是這個欄位的標籤啦,數字你找到的 應該會跟我不一樣
接下來你只要把這段加到你CSS裡的任何地方
#box114335{
    display:none;
}
你新增的highslide版位應該就不會出現在blog裡啦

.

arrow
arrow
    全站熱搜

    Cat Yee 發表在 痞客邦 留言(4) 人氣()