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.
height
andwidth
attributes to theimg
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.