Scrollable Horizontal Image Carousel With SharePoint Picture Library

I have Picture Library in SharePoint.Now Client Wants to Develop Scrollable Horizontal Image Carousel as shown below
User can navigate previous and next by clicking on images.

First We need To get Images from SharePoint Picture library.In order to do this
I have used Awesome Jquery.

 

<style>
  .scrollable {
      position:relative;
      overflow:hidden;
      width: 650px;
      height:150px;
      border:1px solid #ccc;
  }
 .scrollable .items {
     width:20000em;
     position:absolute;
 }
.scrollable img {
    float:left;
    margin:20px 5px 20px 21px;
    background-color:#fff;
    padding:2px;
    border:1px solid #ccc;
    cursor:pointer;
    width:100px;
    height:100px;
}
.scrollable active {
    border:2px inset #ccc;
    background-color:#fff;
}
</style>

        <script src="/JSLibrary/jquery-1.3.2.min.js" type="text/javascript">
        <script src="/JSLibrary/jquery.tools.min.js" type="text/javascript">
        <script type="text/javascript">
            _spBodyOnLoadFunctionNames.push("GetPictures");
            function GetPictures() {
               var soapEnv = "<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'>\
                              <soapenv:Body><GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'> \
                              <listName>Stoneleigh Construction Photos</listName> \
                               <viewFields>\
                               <ViewFields> \
                                  <FieldRef Name='EncodedAbsThumbnailUrl' /> \
                                  <FieldRef Name='FileRef' /> \
                                  <FieldRef Name='Title' /> \
                                  <FieldRef Name='NameOrTitle' /> \
                               </ViewFields> \
                               </viewFields> \
                           </GetListItems> \
                           </soapenv:Body> \
                           </soapenv:Envelope>";
                 $.ajax({
                       url: "/_vti_bin/lists.asmx",
                       type: "POST",
                       dataType: "xml",
                       data: soapEnv,
                       complete: Process,
                       contentType: "text/xml; charset=\"utf-8\""
                });
  }
function Process(xData, status) {
       $(xData.responseXML).find("z\\:row").each(function() {
                var url = $(this).attr("ows_FileRef");
                url = url.substring(url.indexOf(';#') + 2);
                var title = $(this).attr("ows_Title");
                if (title == undefined) {
                    title = $(this).attr("ows_NameOrTitle");
                }
              var liHtml = " <img border='0' src='" + $(this).attr("ows_EncodedAbsThumbnailUrl") + "' alt='" + title + "'>";
              $(".items").append(liHtml);
     }
$(function() {
      $("div.scrollable").scrollable();
});
}
<div class="scrollable"></div>
<div class="items"> </div>

 

Things to Modify
Replace List name with your list.
Replace  url: “/_vti_bin/lists.asmx” with Yoursitename/_vti_bin/lists.asmx
That’s it.
Now i would like to achive when users click on Image it display that Image as a Model Dilouge.
I will Update this post once i get that working.
Comments are always Welcome.
Thanks for Visiting a Blog.
Advertisements

2 thoughts on “Scrollable Horizontal Image Carousel With SharePoint Picture Library

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s