« Fancy Zoom 導入覚書 | トップページ | Backstretch »

2010年7月12日 (月)

Slides

jQueryを使用した画像をスライドショーを表示する「Slides」の導入覚書です。
Slides
Demo

License:MIT
Release version:1.3.0

1)下記サイトよりプラグインをダウンロードします。
http://www.studiomediatech.com/slides

2)jQueryとプラグインを読み込ませます。
メタタグ内部に記入します。
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.slides.js"></script>

3)スライドさせた画像の設定ファイルを制作。
(function($) {$('#slideshow').Slides({images : [
'001.jpg',
'002.jpg',
'003.jpg',
'004.jpg',
'005.jpg',
'006.jpg',
'007.jpg'
]});})(jQuery);

上記の内容で、設定ファイルを新しく制作し、setting.jsと名前をつけます。
<script type="text/javascript" src="setting.js"></script>
設定ファイルは</body>の直前で読み込ませます。

4)スライドさせたい画像のid属性とname属性に"slideshow"を記述します。
<img src="001.jpg" id="slideshow" name="slideshow" >

5)スライドを始める時間や間隔はプラグインファイル(jquery.slides.js)で調節します。
$.fn.Slides.defaults = {
wait : 1000,  
pause : 6000,  
fade : 1000
};

|

« Fancy Zoom 導入覚書 | トップページ | Backstretch »

jQuery」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/1378074/38375877

この記事へのトラックバック一覧です: Slides:

« Fancy Zoom 導入覚書 | トップページ | Backstretch »