トップページ | 2010年8月 »

2010年7月の2件の記事

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
};

| | コメント (0) | トラックバック (0)

2010年7月 5日 (月)

Fancy Zoom 導入覚書

jQueryを使用した画像をポップアップ表示する「Fancy Zoom」の導入覚書です。
Fancy Zoom
Demo

License:GPL
Release version:1.5

1)上記サイトよりパックをダウンロードします。
ダウンロードパックにオプションで設定する jquery.dimensions.js が含まれていないので、追加でダウンロードします。

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

3)拡大したい画像のリンク要素にclass="fancyzoom"と記述します。
<a href="xxx.jpg" class="fancyzoom">
<img src="thum_xxx.jpg" >
</a>

| | コメント (0) | トラックバック (0)

トップページ | 2010年8月 »