javascript - Fetch Images From SharePoint Into Bootstrap Modal/Carousel -
i'm fetching images sharepoint rest api , writing calls along html html doc.
specifically bootstrap modal carousel.
i'm getting images , content writing tiles. problem images in modal.
the user clicks on icon, modal fires, first image in carousel displays won't navigate next/previous, though html being written each one.
here's html:
<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 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='" + + "'/></div>"); }); }); }, error: function (data) { alert(data.statustext); } }); return true; } any idea why carousel images aren't sliding?
you're going laugh. first <div class="item"> needed .active class in order work.
duh!
Comments
Post a Comment