前回作った「ドラッグ&ドロップで移動できるライトボックス風のjQueryプラグイン」を改良いたしました。

改良点

• マウスのスクロールによる拡大縮小に対応
• パラメータをいくつか設定できるようにした
• パラメータでclose画像のパスを調整できるようにした
• jquery.pep.jsを元のまま使うと表示が一部おかしくなってしまうのをjquery-fivew.jsで調整

 

↓こちらがDEMOです.

DEMO

 

実装方法

前回とほぼ同じですが、close画像の設置場所などの、パラメータの設定ができるようになっています。

１．必要なJS、CSSのダウンロード

jQuery (jQuery-1.9.1を推奨します)

jQuery.pep.js (画像のドラッグ&ドロップに利用)

jquery-fiview.js (今回作ったもの)

jquery-fiview.css

追記↓（すみません！抜けていました）

jquery.mousewheel(マウスホイールのイベント取得)

 

2.HTML

XHTML

<link href="css/jquery-fiview.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="js/jquery.pep.js"></script> <script type="text/javascript" src="js/jquery.mousewheel.js"></script> <script type="text/javascript" src="js/jquery-fiview.js"></script>

1 2 3 4 5 6

<link href="css/jquery-fiview.css" rel="stylesheet" type="text/css">   <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="js/jquery.pep.js"></script> <script type="text/javascript" src="js/jquery.mousewheel.js"></script> <script type="text/javascript" src="js/jquery-fiview.js"></script>

ダウンロードしたJSやCSSをヘッダで読み込みます。

 

XHTML

<div id="wrapper"> <p class="bwWrapper"><a href="images/img01_big.jpg"><img src="images/img01.jpg" alt="image1"></a></p> <p class="bwWrapper"><a href="images/img02_big.jpg"><img src="images/img02.jpg" alt="image2"></a></p> <p class="bwWrapper"><a href="images/img03_big.jpg"><img src="images/img03.jpg" alt="image3"></a></p> <p class="bwWrapper"><a href="images/img04_big.jpg"><img src="images/img04.jpg" alt="image4"></a></p> <p class="bwWrapper"><a href="images/img05_big.jpg"><img src="images/img05.jpg" alt="image5"></a></p> <p class="bwWrapper"><a href="images/img06_big.jpg"><img src="images/img06.jpg" alt="image6"></a></p> </div><!-- wrapper end -->

1 2 3 4 5 6 7 8

<div id="wrapper"> <p class="bwWrapper"><a href="images/img01_big.jpg"><img src="images/img01.jpg" alt="image1"></a></p> <p class="bwWrapper"><a href="images/img02_big.jpg"><img src="images/img02.jpg" alt="image2"></a></p> <p class="bwWrapper"><a href="images/img03_big.jpg"><img src="images/img03.jpg" alt="image3"></a></p> <p class="bwWrapper"><a href="images/img04_big.jpg"><img src="images/img04.jpg" alt="image4"></a></p> <p class="bwWrapper"><a href="images/img05_big.jpg"><img src="images/img05.jpg" alt="image5"></a></p> <p class="bwWrapper"><a href="images/img06_big.jpg"><img src="images/img06.jpg" alt="image6"></a></p> </div><!-- wrapper end -->

任意の場所に画像へのリンクをはります。

 

 3.close画像の設置

モーダルウィンドウを閉じるときのclose画像を、設置します。

こちらから画像をダウンロードして、HTMLのあるディレクトリ直下のimagesフォルダなどに設置します。

任意の場所に設置する場合は、JSの設定で、パスを指定してください。

 

4.JSの設定

$(function(){ $("#wrapper a").fiview(); });

1 2 3

$(function(){ $("#wrapper a").fiview(); });

$(function(){

$(セレクタ).fiview();

});

をJSに書き込みます。

セレクタは、画像へのリンクの場所を設定してください。

 

close画像のパスを変更したり、拡大の有無などを変更したりする場合は、

パラメータを設定することもできるようになりました。

JavaScript

$(function(){ $("#wrapper a").fiview({ zoom : true, //マウスのスクロールによる拡大縮小をしない場合は、falseにしてください minWidth: 300, //拡大縮小する場合の、最小サイズをpx単位で設定できます。初期値は300です maxWidth: 1200, //拡大縮小する場合の、最大サイズをpx単位で設定できます。初期値はfalseです imagePath: "images/close.png" //close画像のパスをこちらで変更できます。HTMLのディレクトリから見た位置になります。 }); });

1 2 3 4 5 6 7 8

$(function(){ $("#wrapper a").fiview({ zoom : true, //マウスのスクロールによる拡大縮小をしない場合は、falseにしてください minWidth: 300, //拡大縮小する場合の、最小サイズをpx単位で設定できます。初期値は300です maxWidth: 1200, //拡大縮小する場合の、最大サイズをpx単位で設定できます。初期値はfalseです imagePath: "images/close.png" //close画像のパスをこちらで変更できます。HTMLのディレクトリから見た位置になります。 }); });

↓こちらがこの設定のときのDEMO

DEMO

 

今後の課題

•  画像の移動範囲の限定
• jquery.pep.jsからの独立
• マウスがないデバイスでの安定な拡大縮小に対応