Share via

Using SharePoint Picture Library Data and Showing it on Simple HTML Site

  • Article

If you want to fetch data from SharePoint Picture library through Rest Service and show it in good manner, then follow this article.

By using rest service you can fetch SharePoint Picture library data and show it on simple HTML site

Sometime back my client wanted to show project photos from SharePoint Picture Library to their HTML site. Initially we thought we may need some custom coding , however we realized the power of Rest service. So we decided to use the Rest service and we done the work within 15 minutes.

 

 

We have achieved the functionality by the following:

Call the Rest service >>> get the data in Json object >>> iterate the json object to show data on page (Any page, HTML, .net , asp page etc)

I have created simple HTML file and added the following code (You can copy and paste the whole HTML and change the site address and Picture library name it will work for you) 

<html>
 <head> <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.min.js" type="text/JavaScript"></script>
  
Project party Photos
 <script type="text/JavaScript"> 
 
$(document).ready(function() { 
 
    $.getJSON("http://XXXXXXXXX:1000/_vti_bin/ListData.svc/ProjectsPhotos",function(data) { 
 
            var count = 0;
             $.each(data.d.results, function(i,result) {
                 var src = result.__metadata.media_src;
                 var title = result.Name;
                 html = "<table border='0' style='float: left'><tr></br><td style='color:blue'>" + title +"</td></tr></br>
 <tr><td><img src='" + src + "' width='150' height='150'/></td></tr></table>"; 
 
                $('#resultarea').append($(html));
             }); 
 
     }); 
 
}); 
 
</script> 
 
</head>
  
<body bgcolor="grey">
    <div id="resultarea" style="width:500px">  
    </div></body></html>

Important points in above code

1) $.getJSON("http://XXXXXXXX:1000/_vti_bin/ListData.svc/ProjectsPhotos",function(data) {

Here we are calling ListData.svc which is Rest Web service which will give us data from ProjectsPhotos(picture library)  and we are saving this data in Json object.
2) $.each(data.d.results, function(i,result) {  will iterate from every Jason object and we are storing src and title in JavaScript variable
3) $('#resultarea').append($(html));
And finally we have append the HTML the one which we have created by using Title and image src property( JavaScript Variables)
4) Finally HTML page will look like above

 Points to be Remember:
1) When you trying to access the Rest Web service you may face issue like below
 

 

 

To work around this issue, you need to install patches provided by the Microsoft, please go to following link and install the patches as per your operating system.
http://www.microsoft.com/download/en/details.aspx?displaylang=en&id=2343

2) Because of permission issue may be end user will not able to access list data on the page, So make sure you give read access to All Authenticated users or any specific user group if you have any.