SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

So, I have made a lot of search and found out a lot of examples! but there is no definite example and nothing helps.

I am trying to implement a sandboxed webpart which acts a image carousel.

The source for these image will be a image library in sub-site. Different folders will be added time to time from which i have to display the images from latest folder.

Challenges and questions are

1) How to pick the latest folder from a sub-site. or have this as a webpart property to key in the subsite URL

2) THE biggest question is how to implement the carousel. Please elaborate on this.

I can do a static implementation of Jquery Carousel in HTML but in sharepoint i am hitting a brick wall.

Any help is appreciated. Thanks!

share|improve this question

Jquery all the way.

To store webpart property use something like

       WebDescription("The URL of the Site."),
       Category("Carousel Configuration")]
       public string CarouselSourceSite { get; set; }

       WebDescription("The Folder in the Site"),
       Category("Carousel Configuration")]
       public string CarouselSourceFolder { get; set; }

and add a literal control to render the value to a hidden div (that way you can read the value in to your scripts for the carousel.

Control control = Page.LoadControl(_ascxPath);
            this.Controls.Add(new LiteralControl("<div id='carousel_site' style='display:none'>" + this.CarouselSourceSite + "</div>"));
            this.Controls.Add(new LiteralControl("<div id='carousel_folder' style='display:none'>" + this.CarouselSourceFolder + "</div>"));

You can read these set elements in to a CAML Query to parse the folder. 
Something like
$(document).ready(function () {

               var carouselSiteURL = $("#carousel_site").text();

                 var soapEnv = "<soapenv:Envelope xmlns:soapenv=''> \
                    <soapenv:Body> \
                        <GetListItems xmlns=''> \
                            <listName>Pages</listName> \
                            <viewFields> \
                                <ViewFields> \
                                    <FieldRef Name='Title' /> \
                                    <FieldRef Name='EncodedAbsUrl' /> \
                                     <FieldRef Name='URL' /> \
                                     <FieldRef Name='FileRef'/> \
                                     <FieldRef Name='ImageWidth' /> \
                                     <FieldRef Name='ImageHeight' /> \
                                     <FieldRef Name='Comments' /> \
                                     <FieldRef Name='PublishingPageImage' /> \
                                </ViewFields> \
                            </viewFields> \
                            <query> \
                            <Query> \
                                   <Where> \
                                                <IsNotNull> \
                                                   <FieldRef Name='PublishingPageImage' /> \
                                                </IsNotNull> \
                                       </Where> \
                                       <OrderBy Override='TRUE'><FieldRef Name='Article_x0020_Date_x0020_and_x0020_Time' Ascending='FALSE' /></OrderBy> \
                            </Query> \
                        </query> \
                        </GetListItems> \
                    </soapenv:Body> \

                     url: carouselSiteURL + "_vti_bin/lists.asmx",
                     type: "POST",
                     dataType: "xml",
                     data: soapEnv,
                     complete: renderContents,
                     contentType: "text/xml; charset=\"utf-8\""


You can now write a function called renderContents to do something with your CAML dataset.

function renderPanels(xData, status)
$(xData.responseXML).find("z\\:row, row").each(function () { // Important for cross browser

// Code to write panels using the $(this).attr("ows_Title") to access the data in your rows


You need it to write the contents in the correct format for your carousel. Note - be sure to complete the data load stuff above before starting the carousel or you will have problems and probably no content.

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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