bootstrap 2 modal load image dynamically - image

Question

I'm trying to load dynamically an image on a bootstrap3 modal.
See that in action.
When I first click on the thumbnail I get the source code of the image.
When I close the modal and click the thumbnail again it works fine.
My jQuery code:
jQuery('.featuredimglink').click( function(event) {
event.preventDefault();
jQuery('.modal-body').empty();
var title = jQuery(this).attr("title");
jQuery('h3.modal-title').html(title);
var img = (jQuery(this).find('img').attr('src')).replace('-150x150', '');
jQuery('.modal-body').html('<img src="'+ img +'" alt="'+ title +'" />');
jQuery('#myModal').modal({show:true});
});
My modal code:
<div id="myModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="modal-title"></h3>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I can also see that
jQuery('#myModal').modal({show:true});
fires an error:
Uncaught TypeError: Object [object Object] has no method 'modal'
RESOLVED
Just initializing the modal before the click function. Here is my final code:
var mymodal = jQuery('#myModal').modal({
show: false
});
jQuery('.featuredimglink').on('click', function(event) {
event.preventDefault();
jQuery('.modal-body').empty();
var title = jQuery(this).attr("title");
jQuery('h3.modal-title').html(title);
var img = (jQuery(this).find('img').attr('src')).replace('-150x150', '');
jQuery('.modal-body').html('<img src="'+ img +'" alt="'+ title +'" />');
mymodal.modal('show');
});

Answer 1

If you are using bootstrap for the modal dialog, you need to reference the bootstrap css and the bootstrap js file.
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
Then replace
jQuery('#myModal').modal({show:true});
with
jQuery('#myModal').modal('show');