Pythonメモ torinaブログ

このブログはDjangoとBootstrap4で作成されました
ソースコード

Bootstrapで、画像をモーダルダイアログに表示(Lazy Load)

プログラミング関連 Bootstrap3 LazyLoad
約401日前 2016年2月22日6:42



このような、画像をクリックでモーダルウィンドウに表示するのを作ります

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>ふぉとあるばむ</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="container">
      <h1>Bootstrap Modal Sample <small>画像をモーダルで表示します</small></h1>
      <div class="row">
        
        <!-- ここから、画像がずらーっと -->
        
        <div class="col-xs-3">
          <div class="thumbnail">
            <a href="#"><img src="test.png" onclick="pop(this)"></a>
            <div class="caption">
              <p>画像です</p>
            </div>
          </div>
        </div>
        <div class="col-xs-3">
          <div class="thumbnail">
            <a href="#"><img src="test.png" onclick="pop(this)"></a>
            <div class="caption">
              <p>画像です</p>
            </div>
          </div>
        </div>
        <div class="col-xs-3">
          <div class="thumbnail">
            <a href="#"><img src="test.png" onclick="pop(this)"></a>
            <div class="caption">
              <p>画像です</p>
            </div>
          </div>
        </div>
        <div class="col-xs-3">
          <div class="thumbnail">
            <a href="#"><img src="test.png" onclick="pop(this)"></a>
            <div class="caption">
              <p>画像です</p>
            </div>
          </div>
        </div>
        <div class="col-xs-3">
          <div class="thumbnail">
            <a href="#"><img src="test.png" onclick="pop(this)"></a>
            <div class="caption">
              <p>画像です</p>
            </div>
          </div>
        </div>
        <div class="col-xs-3">
          <div class="thumbnail">
            <a href="#"><img src="test.png" onclick="pop(this)"></a>
            <div class="caption">
              <p>画像です</p>
            </div>
          </div>
        </div>
        
      </div><!-- row -->
    </div><!-- /container -->
    
    <!-- モーダルの設定です -->
    <div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
            <h4 class="modal-title" id="myModalLabel">プレビュー</h4>
          </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><!-- /modal -->
    
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    
    <!-- ここから先、クリックされた画像のsrcを取得しModalに貼り付けるJavaScript -->
    <script>
      function pop(self) {
          $('#imagepreview').attr('src', $(self).attr('src'));
          $('#imagemodal').modal('show');
      }
    </script>
  </body>
</html>


onlickで、関数呼び出しをしています
<img src="test.png" onclick="pop(this)"></a>


モーダルウィンドウのimg要素のsrcに、クリックされた画像のsrcを入れています
    <!-- ここから先、クリックされた画像のsrcを取得しModalに貼り付けるJavaScript -->
    <script>
      function pop(self) {
          $('#imagepreview').attr('src', $(self).attr('src'));
          $('#imagemodal').modal('show');
      }
    </script>




次はこのように、Lazy Loadも実装しましょう。コードはほとんと同じです
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>ふぉとあるばむ</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="container">
      <h1>Bootstrap Modal Sample <small>画像をモーダルで表示します</small></h1>
      <div class="row">
        
        <!-- ここから、画像がずらーっと -->
        
        <div class="col-xs-3">
          <div class="thumbnail">
            <a href="#"><img class="lazy" data-original="test.png" onclick="pop(this)"></a>
            <div class="caption">
              <p>画像です</p>
            </div>
          </div>
        </div>
        <div class="col-xs-3">
          <div class="thumbnail">
            <a href="#"><img class="lazy" data-original="test.png" onclick="pop(this)"></a>
            <div class="caption">
              <p>画像です</p>
            </div>
          </div>
        </div>
        <div class="col-xs-3">
          <div class="thumbnail">
            <a href="#"><img class="lazy" data-original="test.png" onclick="pop(this)"></a>
            <div class="caption">
              <p>画像です</p>
            </div>
          </div>
        </div>
        <div class="col-xs-3">
          <div class="thumbnail">
            <a href="#"><img class="lazy" data-original="test.png" onclick="pop(this)"></a>
            <div class="caption">
              <p>画像です</p>
            </div>
          </div>
        </div>
        <div class="col-xs-3">
          <div class="thumbnail">
            <a href="#"><img class="lazy" data-original="test.png" onclick="pop(this)"></a>
            <div class="caption">
              <p>画像です</p>
            </div>
          </div>
        </div>
        <div class="col-xs-3">
          <div class="thumbnail">
            <a href="#"><img class="lazy" data-original="test.png" onclick="pop(this)"></a>
            <div class="caption">
              <p>画像です</p>
            </div>
          </div>
        </div>
        
      </div><!-- row -->
    </div><!-- /container -->
    
    <!-- モーダルの設定です -->
    <div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
            <h4 class="modal-title" id="myModalLabel">プレビュー</h4>
          </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><!-- /modal -->
    
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    
    <!-- ここから先、クリックされた画像のsrcを取得しModalに貼り付けるJavaScript -->
    <script>
      function pop(self) {
          $('#imagepreview').attr('src', $(self).attr('data-original'));
          $('#imagemodal').modal('show');
      }
    </script>
    
    <!-- Lazy LoadのCDN -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.js"></script>
    
    <!-- Lazy Loadの設定 -->
    <script>
      $(document).ready(function(){
        $("img.lazy").lazyload({
          effect : "fadeIn",
          effect_speed: 3000 ,
        });
      });
    </script>
  </body>
</html>



Lazy Loadはdata-originalに画像のソースを指定し、classに「lazy」と指定します
<img class="lazy" data-original="test.png" onclick="pop(this)">


LazyLoadの読み込みと、設定です。見たまんまですね
    <!-- Lazy LoadのCDN -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.js"></script>
    
    <!-- Lazy Loadの設定 -->
    <script>
      $(document).ready(function(){
        $("img.lazy").lazyload({
          effect : "fadeIn",
          effect_speed: 3000 ,
        });
      });
    </script>


先ほどとは違い、srcではなくdata-originalと指定しました
    <!-- ここから先、クリックされた画像のsrcを取得しModalに貼り付けるJavaScript -->
    <script>
      function pop(self) {
          $('#imagepreview').attr('src', $(self).attr('data-original'));
          $('#imagemodal').modal('show');
      }
    </script>