1

I'm making a Carousel that need to get images by date of a SharePoint Library , all the code of the carousel, and configuration page i have already maked, but i dont have no idea of how i get the images to put on the carousel from de SharePoint Library, i'm a new programmer on SharePoint , someone can help me ?

PS: Using SharePoint Online 2013 (Office 365) , Thanks !!

6

SharePoint 2013 includes several APIs that could be utilized for that purpose:

and some another ways.

Example

The following example demonstrates how to retrieve items from Picture library using JSOM. For more details follow this article.

function getListItems(listTitle,queryText, success,error){
    var ctx = SP.ClientContext.get_current();
    var web = ctx.get_web();
    var list = web.get_lists().getByTitle(listTitle);
    var query = new SP.CamlQuery();
    query.set_viewXml(queryText);
    var items = list.getItems(query);
    ctx.load(items);
    ctx.executeQueryAsync(
      function() {
          success(items);
      },
      error
    );
}

function getPictures(success,error){
   var listTitle = "Pictures";
   var queryText = '<View><Query><OrderBy><FieldRef Name="Modified" Ascending="FALSE"/></OrderBy></Query></View>';
   getListItems(listTitle,queryText,
      function(items){
         var pictureEntries = []; 
         for(var i = 0; i < items.get_count();i++) {
            var item = items.getItemAtIndex(i);
            var entry = { 
                'Url': item.get_item('FileRef'), 
                'Name' : item.get_item('Title') 
            };
            pictureEntries.push(entry);
         }
         success(pictureEntries);
      },
      error);
}


getPictures(
   function(entries){
         //Carousel binding goes here...
   },
   function(sender,args){
      console.log(args.get_message());
   }
);

References

0

here is the REST API version within a minimal.masterpage in SharePoint 2013 in a web part page.

I have also added an empty div with id of pictureMicroGallery at the end of PlaceHolderMain in SharePoint designer.

        <asp:Content ContentPlaceHolderId="PlaceHolderFooter" runat="server">
        <script src="/_layouts/15/CDN/Js/jquery-1.11.1.min.js" type="text/javascript" ></script>

        <script type="text/javascript" > 
        function LoadImages(){
            $.ajax({
                    url: _spPageContextInfo.webServerRelativeUrl + 
                    "_api/web/lists/getByTitle('Employees')/Items/?$select=Title,FileLeafRef,FileDirRef,Description" + "&$filter=Author eq 'Mark Twain' and Name ne 'Item' and isManager eq 1" ,
                    type: "GET",
                    headers: {              "accept": "application/json;odata=verbose",         },
                    success:  this.success,
                    error: this.failed 
                }
                ); 
         }           

        function success(data, args) {
            var pictureArray = new Array();
            var pictureCount = 0;

            var results = data.d.results; 
            for(var i=0; i<results.length; i++) { 

                var filename = results[i].FileLeafRef  ;
                filename = filename.substr(0, filename.lastIndexOf("."))+"_"+ filename.substr(filename.lastIndexOf(".")+1 )+".jpg";   

                var dir =  results[i].FileDirRef  ;
                filename = dir + '/_w/' + filename;
                pictureArray[pictureCount++] = filename;        
            }
            var newHtml = '';
            for(i=0; i<pictureArray.length; i++) {
                newHtml += '<img class="pictureGallery" src="';
                newHtml += pictureArray[i];
                newHtml += '" style="margin:4px;"/>';
            }

          $('#pictureMicroGallery').html(newHtml);            

        }

        function failed(sender, args) {
            $('#pictureMicroGallery').html(args.get_message());
        }

        $(document).ready( function () { 
            LoadImages();   
         });

        </script>
  • Can I also include a WHERE statement in the AJAX call? Thanks. – Si8 Mar 16 '17 at 18:43
  • 1
    @Si8 , yes with $filter and using logical operators like and eq for equal and ne for not equal. I will update the answer to show range of this capabilities. you can check this samples : sharepoint.stackexchange.com/a/124864/16880 – Iman Abidi Mar 20 '17 at 9:52
  • 1
    Thank you. I am doing the above with C#, however the attachment and the rest of the article is coming separate and not together... – Si8 Mar 20 '17 at 14:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.