在bootstrap 2.3 modal中動態加載內容

Question

我正在用twitter bootstrap modal進行一些修改，我正試圖在模態窗口中實現動態圖像加載。另外，當加載某個圖像時，我希望能夠在圖像之間滑動。任何人都可以幫我解決這個問題嗎？

這裏是結構：

<!-- 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> 

這裏是刷卡功能的javascript：

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

Answer 1

你必須寫一些方法/功能，爲每個任務。

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. 之一打開一個回調模式，它加載動態內容
2. 內容加載程序是否應檢索模式的選擇，並把內容轉換成
3. 最後但並非最不重要的，我們必須初始化滑動事件和旋轉木馬