minor Javascript issue

minor Javascript issue

Hi all, 

I'm making a portfolio template that i wanna use for a few photography websites.  I'm running into a glitch i'm using bootstrap and some modal/carousel functions that i found on bootply that were simplified.  it's works in theory but i'm having issue with the load.  when i go to view the large image via click on the thumbnail (currently gallery 1 is live) the image doesn't load, UNLESS i reload the page.  i'm using jquery 1.11.0 and here is the javascript in my main.js file.  I think i'm missing something very simple but i'm just not seeing it. 

  1. /* copy loaded thumbnails into carousel */
  2. $('.thumbnail').on('load', function() {
  3.   
  4. }).each(function(i) {
  5.   if(this.complete) {
  6.     var item = $('<div class="item"></div>');
  7.     var itemDiv = $(this).parents('div');
  8.     var title = $(this).parent('a').attr("title");
  9.     
  10.     item.attr("title",title);
  11.     $(itemDiv.html()).appendTo(item);
  12.     item.appendTo('.carousel-inner');
  13.     if (i===0){ // set first item active
  14.      item.addClass('active');
  15.     }
  16.   }
  17. });

  18. /* activate the carousel */
  19. $('#modalCarousel').carousel({interval:false});

  20. /* change modal title when slide changes */
  21. $('#modalCarousel').on('slid.bs.carousel', function () {
  22.   $('.modal-title').html($(this).find('.active').attr("title"));
  23. });

  24. /* when clicking a thumbnail */
  25. $('.thumbnail').click(function(){
  26.     var idx = $(this).parents('div').index();
  27.     var id = parseInt(idx);
  28.     $('#myModal').modal('show'); // show the modal
  29.     $('#modalCarousel').carousel(id); // slide carousel to selected
  30.     
  31. });