Image Carousel Sandboxed webpart

Question

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!

Answer 1

Jquery all the way.

To store webpart property use something like

[Personalizable(PersonalizationScope.Shared),
       WebBrowsable(true),
       WebDisplayName("Site"),
       WebDescription("The URL of the Site."),
       Category("Carousel Configuration")]
       public string CarouselSourceSite { get; set; }

[Personalizable(PersonalizationScope.Shared),
       WebBrowsable(true),
       WebDisplayName("Folder"),
       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);
            Controls.Add(control);
            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> \
                </soapenv:Envelope>";



                 $.ajax({
                     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.