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

Question

我有一个包含 3 列的 Sharepoint 列表：图像、标题和描述。我正在尝试通过 ajax 检索项目。我可以成功获得的图像，想法是当我单击图像时，我会检索单击图像的标题和描述。在单击图像后，我在控制台中得到的是列表中的第一个标题和第一个描述，而不管我单击的图像是什么。点击图片后，标题和描述必须附加到一个id为#captionContainer的div。

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

我们可以使用Bootstrap Image carousel和SharePoint REST API配合jQuery Ajax来实现，下面的例子供大家参考。

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