先方からのご依頼で、表示されている地図をポップアップで画面いっぱいに拡大表示、さらにそれをグリップで動かしたいと。
対象のページはすでにポップアップはjQuery、colorboxを使っていたのでそれを流用。
すでに使用している部分とは違うクラスをつけて表示サイズなど変更。
で、画面いっぱいにしたら、ポップアップの外側クリックで閉じる、ができなくなってしまうので
閉じるボタンを追加。
オプションでデフォルトtrueになってるってことだったんですが、どうしても表示されないのでこちらのサイトを参考に設置しました。
jQueryプラグインColorBoxでオリジナルの閉じるボタン（Closeボタン）を配置
colorboxはinline:trueでhtmlをポップアップさせられるのでとっても便利ですね。
この方法で閉じるボタンつけたので、カスタマイズもとってもしやすい。
で、問題はグリップで画像をぐいぐい動かす方法。
やっぱり世の中には親切なJavascriptをサイトに掲載してくださってるかたがいらっしゃって
それをいただきました、ありがとうございます。
JavaScriptを使って要素をドラッグ＆ドロップで移動
ポップアップは画像対象じゃなくてhtmlで、ポップアップ対象のhtml内にimgタグで画像を指定、それにクラス名.drag-and-dropをつけて、
こちらのサイトに記載されてるCSSも追記、以上おわり！
position:absoluteが指定されるので、ポップアップの画面もheight:100%にしないとちゃんと開かない。
あと閉じるボタンも左上に設置されるんだけど、こちらもposition:absoluteさらにz-indexをimgより上にしとかないと消えてしまいますね。
これで先方の要求通りの表示ができましたよ！
でも画面フルサイズで表示させてる画像をぐりぐり動かす目的は謎のままです。
勉強になったからいっか。
top