Javascript 将SharePoint中的图像提取到引导模式/旋转木马中
我正在从SharePoint REST API获取图像,并将调用与HTML一起写入HTML文档 特别是引导模式旋转木马 我正在把所有的图片和内容都写到一些瓷砖上。问题是模态中的图像 用户单击图标,模式启动,旋转木马中的第一个图像显示,但它不会导航下一个/上一个,即使为每个图像编写了HTML 以下是HTML:Javascript 将SharePoint中的图像提取到引导模式/旋转木马中,javascript,ajax,twitter-bootstrap,sharepoint,Javascript,Ajax,Twitter Bootstrap,Sharepoint,我正在从SharePoint REST API获取图像,并将调用与HTML一起写入HTML文档 特别是引导模式旋转木马 我正在把所有的图片和内容都写到一些瓷砖上。问题是模态中的图像 用户单击图标,模式启动,旋转木马中的第一个图像显示,但它不会导航下一个/上一个,即使为每个图像编写了HTML 以下是HTML: <div class="container"> <!-- GLOBAL NAVIGATION --> <div class=
<div class="container">
<!-- GLOBAL NAVIGATION -->
<div class="row">
<div class="col-md-12">
<script type="text/javascript" src="/js/nav.js"></script>
</div>
</div><!-- /end global nav -->
<!-- TILE WRAPPER -->
<div class="row bgTexture bgTexture2 ">
<div class="col-md-12">
<!-- TOP ROW OF TILES -->
<div class="row aoTilesTopWrapper">
<h2>TITLE GOES HERE</h2>
<!-- ///////// BOOTSTRAP ROTATOR -->
<div class=" col-md-12 allModals">
</div><!-- /end allModals -->
</div>
<!-- ///////// end bootstrap modal -->
</div><!-- /end row - top row -->
<!-- BOTTOM ROW OF TILES -->
<div class="row aoTilesBottomWrapper">
<!-- BOTTOM ROW TILES GO HERE -->
</div><!-- /end row - bottom row -->
</div><!-- /end col-md-12 -->
</div><!-- /end main row -->
</div><!-- /end container /content -->
<script src="/js/jquery.min.js" type="text/javascript"></script>
<script src="/js/bootstrap.min.js" charset="utf-8"></script>
<script src="/js/custom.js" charset="utf-8"></script>
<script src="/js/add-ons.js" charset="utf-8"></script>
<script>
// Select third list item
var liToSelect = 7;
$(".nav.nav-pills li:eq("+(liToSelect-1)+")").addClass("active");
$(document).ready(function(){
addOns();
});
$('.carousel').carousel({
pause: true,
interval: false
});
</script>
JS/Ajax:
function addOns(){
$.ajax({
async: false,
url: "/_api/lists/getByTitle('Products')/items",
type: "GET",
headers: { "Content-Type": "application/json;odata=verbose", "Accept": "application/json;odata=verbose" },
success: function (data) {
$.each(data.d.results, function () {
var itemID = this.Id;
// Image tiles
var aoTiles = "<div class='col-sm-4 tile' data-imageID='" + this.Id + "'><span class='openRotator' data-toggle='modal' data-target='.itemID" + this.Id + "'><a href='#'><img src='/media/new-window-icon.png' width='20'/></a></span><div class='tileImg'><img src='" + this.Tile_x0020_Thumbnail_.Url + "'/></div><div class='tileTitle'>" + this.Title + "</div><div class='tilePrice'>" + this.Content_x0020_Starting_x.toFixed(2) + "</div></div>";
$(".aoTilesTopWrapper").append(aoTiles);
// Modal
$(".allModals").append("<div class='modal fade bs-example-modal-lg itemID" + this.Id + "' tabindex='-1' role='dialog' aria-labelledby='myLargeModalLabel' aria-hidden='true'><div class='modal-dialog modal-lg'><div class='modal-content'><div id='carouselId" + this.ID + "' class='carousel slide' data-ride='carousel'><!-- Wrapper for slides --><div id='carousel' class='carousel-inner'><!-- Gallery images go here --></div><!-- Controls --><a class='left carousel-control' href='#carouselId" + this.Id + "' role='button' data-slide='prev'></a> <a class='right carousel-control' href='#carouselId" + this.Id + "' role='button' data-slide='next'></a></div></div></div></div>");
// Carousel divs002
$.each(this.Carousel_x0020_Image_x002.split(";"), function () {
$(".modal.itemID"+ itemID +" .carousel-inner").append("<div class='item'><img src='" + this + "'/></div>");
});
});
},
error: function (data) {
alert(data.statusText);
}
});
return true;
}
知道旋转木马图像为什么不滑动吗?你会笑的。第一个需要.active类才能工作
哼 您是否尝试过将整个$'.carousel'.carousel函数移动到addOns success函数中。。。创建所有DOM元素之后