joeyk16 joeyk16 - 2 months ago 10
Javascript Question

Passing image into bootstrap modal

Hello I have a list of images. User can click on any image and it will open a bootstrap modal. In this boostrap modal, I need the image, that the user clicked on, to appear.

Please, view my comments in the below code for more clarity.

Any help would greatly be appreciated. Thank you.

<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

by using javascript you can do it

JAVASCRIPT

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

HTML code

<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 Pop

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

Here data-id="img/img.jpg" is your image path and add class name open-AddImgDialog in button.

Comments