Blog

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

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

 

改良点

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

 

↓こちらがDEMOです.

DEMO

 

実装方法

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

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

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

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

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

jquery-fiview.css

追記↓(すみません!抜けていました)

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

 

2.HTML

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

 

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

 

 3.close画像の設置

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

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

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

 

4.JSの設定

$(function(){

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

});

をJSに書き込みます。

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

 

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

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

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

DEMO

 

今後の課題

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

Author Profile

ninomiya
ninomiya

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

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

Archive

ページTOPへ