4

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.

5
  • Can you provide some more details as to what you intend to do? Accessing an image library via REST is no different than any other library or a list.
    – wjervis
    Dec 9, 2014 at 18:28
  • @wjervis The example I have simply reads string values from a list of "tips of the day". I find this quite different to my wish to receive actual image data from a list, which is what I wish to do, if at all possible.
    – ProfK
    Dec 9, 2014 at 18:45
  • What do you need to do with the data? Simply display the images in <img> tags?
    – wjervis
    Dec 9, 2014 at 18:59
  • @wjervis Ideally I want to size the image before displaying it, a little more complicated than simply adding height and width attributes to the img tag. If all I can get from the api is a url, then so be it - I will have to download somehow before sizing. I have very little knowledge on how and what form of image data I have access to.
    – ProfK
    Dec 9, 2014 at 19:04
  • Not sure if you get image dimensions or not. Best you can do is create an image library and doing a REST request to see what you get. If you use Chrome (I think they have a FF extension as well), I find the Advanced REST Client app to be very useful.
    – wjervis
    Dec 9, 2014 at 19:55

1 Answer 1

3

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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