前提・実現したいこと
画像をスライダーで横並びにして、画像クリックでポップアップするギャラリーを作っています。
スライダーはドラッグで移動可能です。
画像のポップアップまではできたのですが、以下のような状態になってしまいます。
発生している問題・エラーメッセージ
ドラッグしてマウスのボタンを離すとポップアップしてしまう。
ドラッグもクリックと判断されてしまう。
補足情報(FW/ツールのバージョンなど)
jQueryのflickityというプラグインでスライダーを実装しています。
ポップアップは画像のclickイベントでクラスを付与し、表示させています。
以下のようなかんじです。
<css><div class="gallery"> <img src="img/img_gal_3_2.jpg" alt="" class="img01"> <img src="img/img_gal_3_1.jpg" alt="" class="img02"> <img src="img/img_gal_3_6.jpg" alt="" class="img03"> <img src="img/img_gal_3_3.jpg" alt="" class="img04"> <img src="img/img_gal_3_4.jpg" alt="" class="img05"> </div> <div class="modal"> <img src="img/img_gal_3_2.jpg" alt="" class="modal-img01"> <img src="img/img_gal_3_1.jpg" alt="" class="modal-img02"> <img src="img/img_gal_3_6.jpg" alt="" class="modal-img03"> <img src="img/img_gal_3_3.jpg" alt="" class="modal-img04"> <img src="img/img_gal_3_4.jpg" alt="" class="modal-img05"> </div>
<script> $('img').on('click', function() { $('.modal').addClass('popup'); }); ドラッグとクリックを区別する、または上記の問題を解決する方法はありますでしょうか。 皆さんのお知恵をお貸しください。 よろしくお願いします!.modal { display: none; } .popup { display: block; }
あなたの回答
tips
プレビュー