1.先將 jqeury.js 以及 stepcaruousel.js 載入進來
2.CSS 樣式的設定，可以自行作適當的調整
3.接下來就是要顯示的圖片的架構，總共有三層，用 div 包住 image
4.最後就是將 Step Carousel 與 HTML 作連接，將下面的程式碼放在 body 裡面
點此 Demo 連結觀看
你會發現下面有四個連結的按鈕可以讓你直接操控圖片，這是因為 Step Carousel Viewer 有提供 stepBy 跟 stepTo 兩個 method 讓你呼叫，直接對圖片進行操控，只要加入以下的程式碼就可以
另外，如果想要讓照片自動輪播的話，其實很簡單，只要設定 interval 再配和 stepBy 即可，程式碼如下
點此 Demo 連結觀看
以上，就是 Step Carousel Viewer 所提供的圖片特效，如果想知道更詳細的資訊，可以到 Step Carousel Viewer 官方網站。
2008年8月29日 星期五
2008年8月27日 星期三
Codes - Highlight Your Syntax
Codes:
http://codes.no-ip.info/
採用 CakePHP 與 SyntaxHighlighter 開發。
之前我就有在研究有關程式語言語法亮顯得實做，前陣子有發現有一個 javascript 寫成的函式庫，還蠻不錯用的，玩了一下就放著了。
由於這幾天都失眠，在昨天又失眠的情況下，我就索性的開發了這個網站。
網站主要的功能就是讓使用者上傳程式碼，然後可以在檢視的地方看到顯示行數，且亮顯頁面內的語法。並且有提供內嵌語法讓使用者可以放置在任意的網頁裡面。但是不提供刪除和修改的功能，因為現在沒有會員的系統。
當然，語法亮顯這榮耀是屬於 SytaxHighlighter的作者的，我只是拿來使用而已。它是遵循 GNU Lesser General Public License 的規範，這部份我還比較不清楚，不知道有沒有什麼版權的問題要注意。
接下來有時間的話，我會不定期的把網站加入會員系統，這樣就可以讓使用者管理自己上傳的程式碼了。
內嵌畫面如下:
http://codes.no-ip.info/
採用 CakePHP 與 SyntaxHighlighter 開發。
之前我就有在研究有關程式語言語法亮顯得實做，前陣子有發現有一個 javascript 寫成的函式庫，還蠻不錯用的，玩了一下就放著了。
由於這幾天都失眠，在昨天又失眠的情況下，我就索性的開發了這個網站。
網站主要的功能就是讓使用者上傳程式碼，然後可以在檢視的地方看到顯示行數，且亮顯頁面內的語法。並且有提供內嵌語法讓使用者可以放置在任意的網頁裡面。但是不提供刪除和修改的功能，因為現在沒有會員的系統。
當然，語法亮顯這榮耀是屬於 SytaxHighlighter的作者的，我只是拿來使用而已。它是遵循 GNU Lesser General Public License 的規範，這部份我還比較不清楚，不知道有沒有什麼版權的問題要注意。
接下來有時間的話，我會不定期的把網站加入會員系統，這樣就可以讓使用者管理自己上傳的程式碼了。
內嵌畫面如下:
訂閱：
文章 (Atom)