モーダルのイメージを作成するにはどうすればいいですか？モーダルのリンクは画像そのものです（小さいバージョンの場合）

Question

イメージをサムネイルギャラリーに表示したい場合は、イメージをクリックするとモーダルで大きく表示されます。

私はモーダルのリンクをイメージとして保持していれば、ヘッダーまたはフッターには右上隅の閉じる記号以外は表示されません。

私はブートストラップを使用しています。また、imgタグを<a>タグに置き換えてモーダルセクションを開くことができるかどうかを知りたいと思います。助けてください。ここで

はコードです：

<div class="col-lg-3 col-md-4 col-xs-6 thumb"> 
     <img id="image-modal" class="img-responsive img-rounded" src="<?php echo base_url();?>img/Desert.jpg" data-target="#myModal" data-toggle="modal" alt=""> 
     <div class="modal fade" id="myModal" role="dialog"> 
      <div class="modal-dialog"> 
       <!-- Modal content--> 
       <div class="modal-content"> 
        <div class="modal-header"> 
         <button type="button" class="close" data-dismiss="modal">&times;</button> 
         <h4 class="modal-title">Modal Header</h4> 
        </div> 
        <div class="modal-body"> 
         <img class="img-responsive" src="<?php echo base_url();?>img/Desert.jpg" alt=""> 
        </div> 
        <div class="modal-footer"> 
         <p>This is footer</p> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 

Answer 1

あなたが唯一のブートストラップでそれを行うことができますが、これは、それはあなたがやりたいことのために役立ちたいように思えるものです： https://blueimp.github.io/Bootstrap-Image-Gallery/

このケースでは私のいくつかのウェブサイトで使っています。

Answer 2

お試しくださいBootstrap-Image-Galleryプラグインがお手伝いします。 チェックDemo。

スクリプトをモーダルにする

Answer 3

使用modal event listenerや画像を渡す

$(document).ready(function() { 
    $('#myModal').on('show.bs.modal', function (e) { 
     var img = $(e.relatedTarget).attr('src'); // get image 
     $('#showimg').attr('src' , img); //load image in modal 
    }); 
}); 

<div class="modal-body"> 
    <img class="img-responsive" src="" alt="" id="showimg"> 
</div> 

Fiddle with <img> tag

はい、あなたも行うことができますモーダルボディにイメージタグ<img>にid="showimg"を追加それは012とそれタグ

<a>タグ

<a class="btn btn-primary btn-xs" href="imagepath" data-target="#myModal" data-toggle="modal">Open Image</a> 

とイベントリスナスクリプトは次のようになります

$(document).ready(function() { 
    $('#myModal').on('show.bs.modal', function (e) { 
     var img = $(e.relatedTarget).attr('href'); // get image with <a> tag 
     $('#showimg').attr('src' , img); //load image in modal 
    }); 
}); 

Fiddle with <a> tag