Blog

ドラッグ&ドロップで移動できるライトボックス風のjQueryプラグインを作ってみた

Googleドライブで画像を表示したとき、

画像を拡大した場合に、ドラッグ&ドロップで移動させることで、

画像の画面外に隠れて見えなくなっていた場所を表示させることができるのが便利と思い、

jQueryのプラグインぽいものを作ってみました、

 

追記:改良しました!→ドラッグ&ドロップで移動できるライトボックス風のjQueryプラグインを作ってみた(改良その1)

 

↓こちらがデモ

DEMO

 

実装方法

1.必要なJS、CSSのダウンロード

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

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

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

jquery-fiview.css

 

2.HTML

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

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

 

3.JSの設定

$(function(){

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

});

をJSに書き込みます。

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

4.close画像の設置(調整中)

現時点では、HTMLのあるディレクトリ下のimageフォルダに設置する必要があります。

画像の場所を変える場合は、jquery-fiview.jsの8行目にある<img class=’fivClose’ src=’images/close.png’>

のsrcのパスを変更する必要があります。現在調整の必要がないように改良予定です。

 

今後の課題

・画像の拡大縮小に対応

・close画像の調整が不要になるようにする

・画像の移動範囲の限定

Author Profile

ninomiya
ninomiya

Webデザイナー兼コーダーです。
イラストを描くのも好きです。
SVGとCanvasを使ったWEBアプリにも興味があります。
よろしくお願いいたします。

» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ