DKBLOG

緣起

話說，自從 VIP 這種東西橫行之後，

DKxMisty 相簿就從最高每日 1000~2000 的人氣 (平常 200~300) ，瞬間冷到一天只有兩三隻小貓！這也太扯了吧！

扯遠了，

對了！自從 VIP 這種東西橫行之後，

每每看到別人相簿或名片旁邊都有閃亮亮的相簿或照片輪播，而且有些還是帥酷炫的 Flash，好不羨慕。

不過仔細一看，居然要加入 VIP 才可以使用！為何想把閃亮亮的閃照放出來還要端看有沒有深厚的荷包呢？我寧願把小朋友拿去買網域，也不要買 VIP ！

又扯遠了。

背景

這次直接找著名的 jQuery 外掛 Cycle Plugin 來幫忙，徹底解決並拒絕付錢才有閃亮亮的惡劣行為！

延伸閱讀：何謂 jQuery

實戰！

1. 請到部落格管理後台，點選 [側邊欄位設定]，並按下 [新增欄位]

2. 自訂欄位標題隨意打，筆者使用「MyMisty」

自訂欄位內容打上：

<script type="text/javascript" src="http://dk-tw.myweb.hinet.net/jquery/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://dk-tw.myweb.hinet.net/jquery/chili-1.7.pack.js"></script>
<script type="text/javascript" src="http://dk-tw.myweb.hinet.net/jquery/jquery.cycle.all.js"></script>
<script type="text/javascript">
$('#s1').cycle({
    fx:    'fade',
    pause:  0.5
});</script>
<div align="center">
<div id="s1" class="dkpics">
            <img src="https://pic.pimg.tw/jwill/thumb_49b48c80be78c.jpg" width="90" height="90" /></a>
            <img src="https://pic.pimg.tw/jwill/thumb_49b48c8df3a5d.jpg" width="90" height="90" /></a>
            <img src="https://pic.pimg.tw/jwill/thumb_49b48e9f174de.jpg" width="90" height="90" /></a>
            <img src="https://pic.pimg.tw/jwill/thumb_49b5364945f24.jpg" width="90" height="90" /></a>
            <img src="https://pic.pimg.tw/jwill/thumb_4970ad5886320.jpg" width="90" height="90" /></a>
</div></div>

3. 成功加入「MyMisty」欄位

4. 再將新增的欄位「MyMisty」拉到您的版面配置上

5. 選擇 [樣式設計精靈]，再到 [CSS原始碼編輯]，在適當的位置貼上以下 CSS

.dkpics {
    height:  132px;
    width:   132px;
    padding: 0;
    margin:  0;
}

.dkpics img {
    padding: 15px;
    border:  1px solid #ccc;
    background-color: #eee;
    width:  100px;
    height: 100px;
    top:  0;
    left: 0
}

6. 完成！

小結

同理可證，

其他所有的 jQuery 外掛統統可以拉進來 Pixnet 玩啦～