单击图像时，我正在尝试从 Sharepoint 列表中检索信息

Question

I have a Sharepoint list with 3 columns: Image, Title, and Description. I am trying to retrieve the items via ajax. The images I can get successfully and the idea is that when I click on the images I retrieve the title and description for the clicked image. What I am getting in the console, after clicking the image,is the first title and first description on the list regardless of the images I click on. After clicking the image, the title and description must append to a div with the id of #captionContainer.

var buildMainCarousel = function (items) {
    var flickitySlider = $('#flickityCarousel');
    var carouselContent;

    for (var i = 0; i < items.length; i++) {
        carouselContent = '<div class="carousel-cell">' +
            '<img src=" ' + items[i].Image.Url.replace("http://bc-net", "") + '"" alt="">' +
            '</div>';
        console.log(carouselContent);
        flickitySlider.append(carouselContent);
    }

};

var buildCaptions = function (items) {
    var captionContainer = $('#captionContainer');

 $(".carousel-cell img").click(function() {
    var clickedThumb= $(this);
        var title = items[i].Title;
        var description = items[i].Description;
       console.log(title);
        console.log(description);

});

};

var url1 = "/FunZone/_api/web/lists/GetByTitle('funZone')/items";
var handle_ajax = function (url) {
    $.ajax({
        url: url,
        method: "GET",
        headers: {
            Accept: "application/json; odata=verbose"
        },
        success: function (data) {
            var items = data.d.results;
            console.log(items);

            buildMainCarousel(items);
            buildCarouselNav(items);
            buildCaptions(items);
        },
        error: function (data) {
            console.log("Error: " + data);
        }

    });

};

handle_ajax(url1);

Answer 1

We can use Bootstrap Image carousel and SharePoint REST API with jQuery Ajax to achieve it, the following example for your reference.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.carouselCaption {
  background-color: #fee601;
  padding: 20px 20px 5px 20px;
  border: 4px solid #000;
  box-shadow: 5px 6px 0px #000;
}
</style>
<script type="text/javascript">
$(function() {
    var listName="funZone";
    GetImagesFromLibrary(listName);
});
function GetImagesFromLibrary(listName){
    var requestUri = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('"+listName+"')/items?$top=5&$orderby=Created desc";
    $.ajax({
        url: requestUri,
        method: "GET",
        async:false,
        headers: { "Accept": "application/json; odata=verbose" },
        success: function (data) {
            $.each(data.d.results,function(i,item){
                var cInnerHtml="";
                if(i==0){
                    $("#myCarousel .carousel-indicators").append('<li data-target="#myCarousel" data-slide-to="0" class="active"></li>');
                    cInnerHtml+='<div class="item active">';                                                            
                }else{                  
                    $("#myCarousel .carousel-indicators").append('<li data-target="#myCarousel" data-slide-to="'+i+'"></li>');
                    cInnerHtml+='<div class="item">';               
                }
                cInnerHtml+='<img src="'+item.Image.Url+'" alt="'+item.Title+'" style="width:100%;">';
                cInnerHtml+='<div class="carousel-caption" style="display:none;"><h3>'+item.Title+'</h3><p>'+item.Description+'</p></div></div>';
                $("#myCarousel .carousel-inner").append(cInnerHtml);                
            });
            $(".carousel-inner img").click(function(){
                $(".carouselCaption").html($(this).next().html());
            });
        },
        error: function (data) {
        }
    });
}
</script>
<div class="container">
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
        </ol>
        <!-- Wrapper for slides -->
        <div class="carousel-inner">        
        </div>
        <!-- Left and right controls -->
        <a class="left carousel-control" href="#myCarousel" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>
<section class="carouselCaption mb-1">   
</section>