イメージをブートストラップモーダルに渡す

Question

こんにちは私はイメージのリストを持っています。ユーザーは任意のイメージをクリックすることができ、ブートストラップモーダルが開きます。このブーラップモーダルでは、ユーザーがクリックした画像が必要です。

より明確にするために、以下のコードで私のコメントをご覧ください。

ご協力いただければ幸いです。ありがとうございました。

<center> 
    <div id="items" class="transitions-enabled"> 
    <% @images.each do |image| %> 
     <div class="box panel panel-default"> 
     <div class="square_item_image"> 
      #HERE IS THE IMAGE I WANT TO APPEAR IN THE BOOSTRAP MODAL 
      <%= image_tag(image["images"]["low_resolution"]["url"]) %> 
     </div> 
     <div class="item_info"> 
      <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Create Outfit</button> 
     </div> 
     </div> 
    <% end %> 
    </div> 
</center> 

<!-- Modal --> 
<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">Create</h4> 
     </div> 
     <div class="modal-body"> 
     #I WOULD LIKE THE IMAGE TO APPEAR HERE 
     <p>Some text in the modal.</p> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
    </div> 
    </div> 
</div> 

Answer 1

はJavaScriptを使用して、あなたが行うことができ、それ

JAVASCRIPT

$(document).on("click", ".open-AddImgDialog", function() { 
var imgsrc = $(this).data('id'); 
$('#my_image').attr('src',imgsrc);); 
}); 

HTMLコード

<div class="item_info"> 
<button type="button" class="btn btn-info btn-lg open-AddImgDialog" data-id="img/img.jpg" data-toggle="modal" data-target="#myModal">Create Outfit</button> 
</div> 

MODALポップ

<div class="modal-body"> 
    <img id="my_image" /> 
</div> 

ここでdata-id = "img/img.jpg"は画像パスで、ボタンにクラス名open-AddImgDialogを追加します。