Getting src value on click for modal modal

Question

I am trying to get the src value of an image with jQuery to pass it to bootstrap modal to display it. My problem is that I don’t understand how to get this src value, I tried to do some javascript, but I think this is not working properly. Any help please.

Here is my image:

 <img class="img-thumbnail" src="" data-def-dd="pic" id="pic" name="pic"> 

Boostrap Modification:

 <div id="img_modal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <img class="img-thumbnail" src="" data-onload="loadImage()" data-def-dd="photo" id="photo_modal" name="photo"> </div> </div> </div> 

And finally javascript:

 var src = $(this).attr('src'); console.log(src); function loadImage(){ $('#photo_modal').attr('src', src); } 

Answer 1

If you need to get the source of any image you can take:

 $('img').on('click', function(){ var imageSource = $(this).attr('src') }) 

Answer 2

When you click on the #pic image, its source will be added as the #photo_modal image #photo_modal .

 $('#pic').on('click', function() { $('#photo_modal').attr('src', $(this).attr('src')); }); 

Answer 3

Try this, essentially you need to get the img source and paste it into the modal "";

First, you must specify the identifier of the image from which you want to get the source, in order to simplify its extraction, and also make sure that more than one image is not associated with the class.

 <img id="img-thumbnail" class="img-thumbnail" src="" data-def-dd="pic" id="pic" name="pic"> 

Secondly, the function should be adjusted as follows:

 function loadImage(){ // get the src of the image var image_src = $("#img-thumbnail").attr('src'); // assign it to the modal body $("#photo_modal").attr('src',image_src); } 

Secondly, you can execute this code when loading the page:

Option 1:

 jQuery(document).ready(function($){ loadImage(); }); 

Option 2:

You can perform this function when loading a modal, there may be a lag, because it must be loaded.

 $('#img_modal').on('show.bs.modal', function (event) { loadImage(); }); 

Hope this helps.

Answer 4

Add, for example, the hidden input identified by clicked-img-src and define a click event to handle the user by clicking on img and getting the src attribute from the clicked image using .attr('src') , then save to the input

 <input type="hidden" id='clicked-img-src'/> $('body').on('click', 'img', function(){ var img_source = $(this).attr('src'); $('#clicked-img-src').val(img_source); }) 

Then, when the loadImage() function called onload gets src from the input:

 function loadImage(){ $('#photo_modal').attr('src', $('#clicked-img-src').val()); } 

Hope this helps.

Answer 5

Here is an idea. Jsfiddle

HTML

 <img class="thumbnail mini-thumb" src="http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" width="200" data-def-dd="pic" id="pic" name="pic" data-bigpic="http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" /> <img class="thumbnail mini-thumb" src="http://www.planwallpaper.com/static/images/Winter-Tiger-Wild-Cat-Images.jpg" width="200" data-def-dd="pic" id="pic" name="pic" data-bigpic="http://www.planwallpaper.com/static/images/Winter-Tiger-Wild-Cat-Images.jpg" /> <div id="img_modal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <img class="img-thumbnail" src="" id="photo_modal" name="photo"> </div> </div> </div> 

• I used data-bigpic so you can add a small image for your thumbnail, and the second for modal.

• A class has been added to reuse the functionality of the jquery function

---

Javascript (jQuery)

 $(document).ready(function(){ loadPreviews(); }); function loadPreviews(){ $(".mini-thumb").on('click', function(){ console.log("Img url " + $(this).data('bigpic')); $("#photo_modal").attr("src", $(this).data('bigpic')); $("#img_modal").modal("show"); }); } 

• The function gets the value of data-bigpic and adds it to the modal image.

- EDIT-- These are the same fiddle , but using src from the image.

This is just my opinion, but I believe it would be better to reload modal content with ajax. If you do, your page only needs to load a thumb. Then, using the data-bigimage value, you load the data returned by your server. This can help if you have many images.