mizzsugar’s blog

日々感じていることや学んだことを書きます。エンジニアリング以外にも書くかもしれません。

Djangoで画像をクリックしたらモーダルで表示するには

【前提】

方法、見つけました。コピペしたら動きました。

が、コピペ丸にはなりたくないので、 自学のためにこのコードの動きを書くことにしました。

方法、見つけました。コピペしたら動きました。

が、コピペ丸にはなりたくないので、 自学のためにこのコードの動きを書くことにしました。

torina.top

なお、上記サイトでは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">&times;</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を参照します。

JavaPythonでは、this(もしくはself)といえば、インスタンス自身を指すので、やはりJSは難しいですね)

developer.mozilla.org

①でidがimagepreviewである要素にattrを実行しています。

attr(a, b)でaという要素の属性をbに設定しています。

attr(a)で、aという要素を取得しています。

imagepreviewのsrcの値を、クリックしたimgのsrcの値に設定しています。

①が終わったら、②でモーダルを表示しています。