緣起

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

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

扯遠了,

對了!自從 VIP 這種東西橫行之後,

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

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

又扯遠了。

 

背景

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

延伸閱讀:何謂 jQuery

 

實戰!

 

圖片 1.png

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

 

 

圖片 2.png

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.png

3. 成功加入「MyMisty」欄位

 

圖片 4.png

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

 

圖片 5.png

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.png

6. 完成!

 

小結

同理可證,

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

創作者介紹

DKBLOG

DK 發表在 痞客邦 PIXNET 留言(1) 人氣()


留言列表 (1)

發表留言
  • 蔡宗成
  • Hello~~

    嘿,很久不見,我逛著就路過這了~~~XD
  • @@"
    話說都在中壢卻沒見過面!XD
    要畢業沒呀?有空出來吃飯呀!哈

    DK 於 2009/03/27 09:56 回覆

找更多相關文章與討論