ブートストラップ4ベータ画像ギャラリーwithモーダル

Question

私はモーダルを持つ各画像で画像ギャラリーを作ろうとしています。私は、各ロゴをクリックして、その会社の参照用レターをモーダルで開きたいと思います。これは私が試したものですが、クリックされた各ロゴはモーダルのハードロック文字のみを開きます。ここではlink to a codepenです。私はそれをやろうとしました。

私は間違っていますか？おかげ

/* show lightbox when clicking a thumbnail */ 
 
    $('a.thumb').click(function(event){ 
 
    \t event.preventDefault(); 
 
    \t var content = $('.modal-body'); 
 
    \t content.empty(); 
 
     \t var title = $(this).attr("title"); 
 
     \t $('.modal-title').html(title);  \t 
 
     \t content.html($(this).html()); 
 
     \t $(".modal-profile").modal({show:true}); 
 
    });

.modal-body { 
 
    margin:auto; 
 
    max-width:100%; 
 
}

<!-- image trigger modal --> 
 
<a data-target="#myModal" data-toggle="modal"> 
 
    <img src="http://www.pscompetitiveedge.com/references/logos/hardrock4.gif" class="thumbnail img-fluid" alt="Hard Rock"> 
 
</a> 
 
<!-- Modal --> 
 
<div tabindex="-1" class="modal fade" id="myModal" role="dialog" aria-hidden="true" aria-labelledby="myModalLabel"> 
 
    <div class="modal-dialog"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button class="close" aria-hidden="true" type="button" data-dismiss="modal">×</button> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <img src="http://www.pscompetitiveedge.com/references/ltrs/hardrock.jpg" class="img-fluid"> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button class="btn btn-warning" type="button" data-dismiss="modal">Close</button> 
 
     </div> 
 
    </div><!-- /.modal-content --> 
 
    </div><!-- /.modal-dialog --> 
 
</div><!-- /.modal --> 
 

 
<!-- image trigger modal --> 
 
<a data-target="#myModal" data-toggle="modal"> 
 
    <img src="http://www.pscompetitiveedge.com/references/logos/paragon.jpg" class="thumbnail img-fluid" alt="Hard Rock"> 
 
</a> 
 
<!-- Modal --> 
 
<div tabindex="-1" class="modal fade" id="myModal" role="dialog" aria-hidden="true" aria-labelledby="myModalLabel"> 
 
    <div class="modal-dialog"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button class="close" aria-hidden="true" type="button" data-dismiss="modal">×</button> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <img src="http://www.pscompetitiveedge.com/references/ltrs/paragon.jpg" class="img-fluid"> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button class="btn btn-warning" type="button" data-dismiss="modal">Close</button> 
 
     </div> 
 
    </div><!-- /.modal-content --> 
 
    </div><!-- /.modal-dialog --> 
 
</div><!-- /.modal --> 
 

 
<!-- image trigger modal --> 
 
<a data-target="#myModal" data-toggle="modal"> 
 
    <img src="http://www.pscompetitiveedge.com/references/logos/USHomeLogo.jpg" class="thumbnail img-fluid" alt="US Home"> 
 
</a> 
 
<!-- Modal --> 
 
<div tabindex="-1" class="modal fade" id="myModal" role="dialog" aria-hidden="true" aria-labelledby="myModalLabel"> 
 
    <div class="modal-dialog"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button class="close" aria-hidden="true" type="button" data-dismiss="modal">×</button> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <img src="http://www.pscompetitiveedge.com/references/ltrs/ushome.jpg" class="img-fluid"> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button class="btn btn-warning" type="button" data-dismiss="modal">Close</button> 
 
     </div> 
 
    </div><!-- /.modal-content --> 
 
    </div><!-- /.modal-dialog --> 
 
</div><!-- /.modal -->

Answer 1

は私が問題を解決しました。 data-target = "＃hr"を追加し、各画像のターゲットを変更します。

<div class="col-6 col-sm-4 col-md-3 col-lg-2"><div class="container"> 
 
\t \t <img class="img-fluid" data-toggle="modal" data-target="#hr" alt="Hard Rock" src="http://www.pscompetitiveedge.com/references/logos/hardrock4.gif"> 
 
<!-- The modal --> 
 
<div class="modal fade" id="hr" tabindex="-1" role="dialog" aria-labelledby="modalLabelSmall" aria-hidden="true"> 
 
<div class="modal-dialog"> 
 
<div class="modal-content"> 
 
<div class="modal-header"> 
 
<button type="button" class="btn btn-danger close" data-dismiss="modal" aria-label="Close"> 
 
<span aria-hidden="true">&times;</span> 
 
</button> 
 
</div> 
 
<div class="modal-body"> 
 
<img class="img-fluid" alt="Hard Rock" src="http://www.pscompetitiveedge.com/references/ltrs/hardrock.jpg"> 
 
</div> 
 
    <div class="modal-footer"> 
 
     <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button> 
 
     </div></div></div></div></div> 
 
</div>