How do I access an image library from my client web part via the REST API?

Question

I am busy implementing a small web part to rotate through a list of banner images. The images must come from an Office 365 SharePoint Online list.

My first choice to implement this list is by using the readily available Image Library app. I have example code to access a text only list via the REST API, but I have no idea how I should handle a list that contains an image content type.

I could use a text only list with image URLs, but this complicates setting up the list for a non-technical user, and we lose SharePoint knowledge of the data as an Image. I would also at some point like to leverage SP's image rendition capabilities.

Answer 1

First Add an img element to display Images

<img id="imageRotator" >

Now use below JavaScript function to get Images

var arrayOfImageObjects = new Array();
var currentImageIndex = 0;

function GetImagesAndRotate() {
    var url = "http://siteurl/_api/web/lists/getbytitle('ImageLibrary')/items?$expand=File"

    jQuery.ajax({
        url: url,
        type: "GET",
        headers: { 
            "X-HTTP-Method":"MERGE",
            "accept": "application/json;odata=verbose",
            "content-type": "application/json;odata=verbose",
            "X-RequestDigest": $("#__REQUESTDIGEST").val(),             
        },
        success: function(data){
            var result = data.d.results;
            for(i=0;i<result.length;i++){
                var image = result[i];
                var imageObject = { };
                imageObject.Name = image.File.Name;
                imageObject.Url = image.File.ServerRelativeUrl;
                imageObject.Width = image.File.ImageWidth;
                imageObject.Height = image.File.ImageHeight;                    
                arrayOfImageObjects.push(imageObject);
            }               
            setTimeout(NextImage,5000);
        },
        error: function(){
            alert("request failed");
        }
    });
}

function NextImage(){       
    if(currentImageIndex < arrayOfImageObjects.length) {
        jQuery('#imageRotator').attr('src',arrayOfImageObjects[currentImageIndex].Url);
        currentImageIndex++;
    }
    else
        currentImageIndex = 0;      
    setTimeout(NextImage,5000);
}

Now you can invoke it on document ready asin

jQuery(document).ready(function(){
    GetImagesAndRotate();
});

If you want to manipulate images, then you can use the attributes ImageWidth and ImageHeight

Image manipulation can be easily done using Processing.js. You can download it from http://processingjs.org/download/

Then re sizing can be done using

img.resize(wide,high)

To make the image scale proportionally, use 0 as the value for the wide or high parameter.