Load content dynamically in bootstrap 2.3 modal

Question

I am doing some modifications with twitter bootstrap modal and I am trying to achieve dynamic image loading in modal window. Also when the certain image is loaded I would like to be able to swipe between images. Can anyone help me with this one?

Here is structure:

<!-- Image trigger -->
<div class="item">
    <a data-toggle="modal" href="#myModal" class="modal-trigger">
        <img src="img/7.jpg" alt="">
     </a>
</div>

<!-- Modal window -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

<!-- it makes empty spaces clickable -->
<div type="button" class="close" data-dismiss="modal" aria-hidden="true">&nbsp;</div>

<img data-dismiss="modal" aria-hidden="true" src="http://placehold.it/800x670" class="image" alt="" data-target="#myModal"></div>

And here is javascript for swipe feature:

$(document).ready(function() {  
                    // Swipe feature
                     $("#myCarousel").swiperight(function() {  
                      $("#myCarousel").carousel('prev');  
                    });  
                     $("#myCarousel").swipeleft(function() {  
                      $("#myCarousel").carousel('next');  
                     });

Answer 1

You have to write several methods / functions for each task.

var yourApp = window.yourApp || {};

yourApp.initModal = function (options) {
   $('a.js-modal').on('click' function (event) {
      $('#myModal').modal(options);
      event.preventDefault();
   }); 
};

yourApp.loadModalContent = function () {
   var content = $("#modalContent").html();

   if (content.length) {
       $('#myModal').html(content);
   }
};

yourApp.initCarouselSwipe = function (options) {
   $("#myCarousel")
      .carousel(options)
      .swiperight(function() {  
          $(this).carousel('prev');  
      }) 
      .swipeleft(function() {  
          $(this).carousel('next');  
      });
};

$(function() {
    yourApp.initModal({
        show: function () {
             yourApp.loadModalContent();
             yourApp.initCarouselSwipe();
        }
    });
});

1. One to open the modal with a callback that does load your dynamic content
2. The content loader should retrieve the modal's selector and put the content into
3. Last but not least we have to init the swipe events and the carousel