トップページ | Slides »

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>

|

トップページ | Slides »

jQuery」カテゴリの記事

コメント

コメントを書く



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


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



トラックバック

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

この記事へのトラックバック一覧です: Fancy Zoom 導入覚書:

トップページ | Slides »