skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

jQueryプラグイン「pikachoose」で小気味良いスライドショーを作る

｜ ｜ ｜ ｜ ｜ ｜ ｜

スライド風に画像を見せるJavaScriptは多く広まっています。
今回紹介するpikachooseは、jQueryベースで気持ちの良い動きでギャラリーを表示してくれます。

使用方法
pikachooseからpikachoose.js、sliderjs.jsをjQueryからjquery.jsをダウロードします。
<link rel="stylesheet" href="pikachoose.css">
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="sliderjs.js"></script>
<script type="text/javascript" src="pikachoose.js"></script>
<script language="javascript">
$(document).ready(
function (){
$("#pikame").PikaChoose();
$("#pikame").SliderJS({
window_width: 320,
window_height: 55,
list_width: 832,
pikachoose: true
});
});
</script>

上記を記述したら画像を以下のように記述すれば完成です。
<ul id="pikame">
<li><img src="画像パス" title="キャプション "/></li>
<li><img src="画像パス" title="キャプション "/></li>
<li><img src="画像パス" title="キャプション "/></li>
</ul>

jQueryプラグイン「pikachoose」で小気味良いスライドショーを作るサンプル

記事作成：2008年12月22日

前の記事：jQueryで画像に反射効果を！「Reflection.js for jQuery」
次の記事：2008年アクセスランキング