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!

1 Answer 1


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='http://schemas.xmlsoap.org/soap/envelope/'> \
                    <soapenv:Body> \
                        <GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'> \
                            <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.

Your Answer

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

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