Djangoで画像をクリックしたらモーダルで表示するには
【前提】
方法、見つけました。コピペしたら動きました。
が、コピペ丸にはなりたくないので、 自学のためにこのコードの動きを書くことにしました。
方法、見つけました。コピペしたら動きました。
が、コピペ丸にはなりたくないので、 自学のためにこのコードの動きを書くことにしました。
なお、上記サイトではlazyload.jsを読み込んでいますが、 読み込まなくてもうごきました。
lazyloadは、遅延読み込み(不必要な画像の読み込みを後回しにして、画像以外のCSSやJSファイルの読み込みが先に行うためのライブラリ。そうすることで、表示速度を速くすることができる)ためのオプションみたいな感じだから 読み込まなくても動くのでしょうか。
今回は、上記URLとは異なるコードを用いて説明します。
画像の投稿一覧画面にて、
画像をクリックしたらモーダルで大きく表示されるという設定です。
postモデルにfile_pathアトリビュートがあり、各画像のパスを管理しています。
photos.html
<!-- モーダルウィンドウの中身 --> <div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title" id="myModalLabel">プレビュー</h4> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> </div> <div class="modal-body"> <img src="" id="imagepreview" class="img-responsive" > </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> <!-- 画像一覧 --> <div style="padding-bottom:200px"> <ul class="one-post"> {% load static %} {% for post in posts %} <li><div class="user-page-img modal-open"><a href="#"><img src="{% static post.file_path %}" class="center" onclick="pop(this)"></a></div></li> <!-- file_pathはpostモデルで管理している、画像のパス--> {% endfor %} </ul> </div>
onclick="pop(this)
onclick=""で、その要素をクリックした際の関数呼び出しをしています。
pop(this)がどのような処理を行うかは、jsに記載されています。
function pop(self) { $('#imagepreview').attr('src', $(self).attr('src')); $('#imagemodal').modal('show'); }
selfが引数となっています。
html上では、実際に利用されるオブジェクトとして thisが利用されています。
JSでは、カレントオブジェクト()を参照するためにthisが使われます。
ここでは、imgにonclickが登録されているので、imgになりますね。
複数のimgが表示されていますが、クリックしたimgを参照します。
(JavaやPythonでは、this(もしくはself)といえば、インスタンス自身を指すので、やはりJSは難しいですね)
①でidがimagepreviewである要素にattrを実行しています。
attr(a, b)でaという要素の属性をbに設定しています。
attr(a)で、aという要素を取得しています。
imagepreviewのsrcの値を、クリックしたimgのsrcの値に設定しています。
①が終わったら、②でモーダルを表示しています。