Getting the src value on a click for a bootsrap modal

Question

I'm trying to get the src value of an image with JQuery to pass it into a bootstrap modal to display it on. My issue is that I don't how to get this src value, I've tried to make some javascript but I guess it doesn't work properly. Any help please.

Here's my image:

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

The Boostrap modal:

<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 the 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 do:

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