画像拡大機能はimgViewer2で簡単!

こんにちは! エンジニア歴2年の白(ベク)です。


+/-のボタン操作で、サイト上の画像を拡大できると便利ですよね!

特にeコマースサービスを運営してたりすると、もう必須機能かと思います。

そこで、今回は「imgViewer2」というJavaScriptのプラグインをつかって、画像の拡大・縮小機能を実装方法をご紹介します!



まず このプラグインはleaflet.jsとjquery, jquery-uiが必要なので、テンプレートに書き込みます。

imgViewer2は 上の3つのjsファイルが無いとエラーになります。

順番には要注意です!

また、leaflet.cssは写真拡大機能に必要とするデザインが含まれていますので、これも忘れずに入れましょう!

(*´∀`*)ノシ


実装方法はすごく簡単♪


var $img = $("#selector").imgViewer2();

終わり。

なんですが、今回はこれだけじゃなくて、"複数の写真があって、その写真を選択すると拡大可能な写真が変わって、選択した写真に拡大機能が付く形"にしたかったんです。

※こんな感じでデフォルトでは拡大できる画像Aが左側に表示されていて、右上の画像Bを選択すると、画像AとBが置換されて、かつ拡大できる




$(document).on("click", "#b", function(e){
$("#A").attr("src", e.target.src);
}

これで、BをクリックするとAの画像が変わって、自動で拡大されると思いましたが、imgViewer2が、読み込み時にもう実行されているので 新しく変わったAの画像には拡大機能が効きませんでした。


imgViewer2のプラグインのコードを見ると、最初のcreate時に 

var $img = $(self.img);

selectした自分のimg要素を

self.view = $("<div class='viewport' />").uniqueId().appendTo($img.parent());

自分の親要素に新しく要素を追加してそれを調整する形になっていました。


つまり、拡大ができる状態でAに表示されるのは、実はAじゃなくてAの上に乗せてある、新しく生成されたAAの画像です。

ということは、 “containerを消して作り直せばいいかなー” と思い


$(document).on("click", "#b", function(e){
$("#A").attr("src", e.target.src);
$(".leaflet-container").remove();
var $img = $("#A").imgViewer2();
});

.leaflet-containerはimgViewerで作られたcontainerについていたクラス名で、それを消して作り直そうとしました。

ところが、これはcontainerが消されたことでして、imgViewer2のプラグインなが消されたわけでは無いので、imgViewer2のcreate文には到達できなかったんです。(拡大付きの新しい画像が生成されなかった)


改めて、imgViewer2のコード読んでみたら、プラグインを消すdestroy オプションがあリました!


$(document).on("click", "#b", function(e){
$("#A").attr("src", e.target.src);
$img = $("#A").imgViewer2("destroy").imgViewer2();
});

#Aについてる、imgViewer2を破棄して、新しく生成!

これで解決できましたーーー!

٩(๑´0`๑)۶


私は、ソースコード読んで解決しましたが、もちろんdocsもありますので参照してみてくださいね!https://github.com/waynegm/imgViewer2/tree/master/plugindocs


ということで、画像拡大機能が使うことになったら ぜひ、imgViewer2を試してみてください。

以上、白(ベク)でした!

HOME  NEWS  SERVICE   MESSAGE  ABOUT US​  CONTACT  PRIVACY POLICY  Facebook

© 2014 Digital Quest Corp. All Rights Reserved.