Загрузите содержимое динамически в 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. И последнее, но не в последнюю очередь мы должны инициализировать события салфетки и карусель