2013/05/23
ドラッグ&ドロップで移動できるライトボックス風のjQueryプラグインを作ってみた
Googleドライブで画像を表示したとき、
画像を拡大した場合に、ドラッグ&ドロップで移動させることで、
画像の画面外に隠れて見えなくなっていた場所を表示させることができるのが便利と思い、
jQueryのプラグインぽいものを作ってみました、
追記：改良しました！→ドラッグ&ドロップで移動できるライトボックス風のjQueryプラグインを作ってみた(改良その１)
↓こちらがデモ
実装方法
１．必要なJS、CSSのダウンロード
jQuery (jQuery-1.9.1を推奨します)
jQuery.pep.js (画像のドラッグ&ドロップに利用)
jquery-fiview.js (今回作ったもの)
2.HTML
|
1 2 3 4 5 | <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-fiview.js"></script> |
ダウンロードしたJSやCSSをヘッダで読み込みます。
|
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.JSの設定
|
1 2 3 | $(function(){ $("#wrapper a").fiview(); }); |
$(function(){
$(セレクタ).fiview();
});
をJSに書き込みます。
セレクタは、画像へのリンクの場所を設定してください。
4.close画像の設置（調整中）
現時点では、HTMLのあるディレクトリ下のimageフォルダに設置する必要があります。
画像の場所を変える場合は、jquery-fiview.jsの8行目にある<img class=’fivClose’ src=’images/close.png’>
のsrcのパスを変更する必要があります。現在調整の必要がないように改良予定です。
今後の課題
・画像の拡大縮小に対応
・close画像の調整が不要になるようにする
・画像の移動範囲の限定
Author Profile
SHARE
