[jQuery]とても使いやすい画像をスムーズできるFancyZoom

モトネタは画像をスムーズに拡大できるjQuery版FancyZoomなのですが、さっそく試してみました。

具体的な実装方法などは、FancyZoom meet jQueryという記事を読めばオッケーなのですが、まず、ここでプログラムをダウンロードします。

次に以下のようなプログラムを記述します。

<script type="text/javascript"> $(document).ready(function() { $('div.photo a').fancyZoom( { scaleImg: true , closeOnClick: true , directory:"./img" } ); }); </script> <div class="photo"> <!-- ここのhref属性を一つ下のdivのid属性とあわせる必要がある --> <a href="#hoge"> <img src="foo.png" border="0" width="50%" height="50%"> </a> </div> <div id="hoge"> <img src="foo.png" border="0"> </div>

解説前に、実行結果から。

まず下の画像が表示されたとします。

画像をクリックすると、なめらかに拡大されます。

「×」ボタンをクリックするか、他の部分をクリックすることで、画像は元に戻ります。

まずscriptタグにready関数(メソッド)を記述するのですが、その引数であるlambda関数に、「div.photo a」と指定されたelementオブジェクトがありますが、これは、拡大対象となる画像のaタグを指定してください。

で、次に、fancyZoomメソッドにJSONを渡すのですが、3つ目のdirectoryプロパティは、ダウンロードした画像を格納しているディレクトリ先を設定してください。

2つ目のcloseOnClickプロパティは、クリックすると画像を閉じるかどうかの設定を行います。

1つ目のscaleImgは「True」に設定すればオッケーです。

結構、簡単に使えるので、是非。