Sunday, 22 July 2012

Image carousel webpart Sanboxed


In order to create a slider /image carousel webpart you have 2 options
Use content By Query Web Part
1-be sure that the publishing infrastructure feature is activated in your site collection
2-Add a New Content Query Webpart as below

3- Export the webpart you will prompt to download file named "Content Query.webpart"

4-Save the file as Content Query Nivo.webpart in this step you can open the file using any text editor and change the webpart name
5-Content query webpart uses XSL files to transform the xml result set to predefined html the OOTB xsl files are
  • ContentQueryMain.xsl
  • Header.xsl
  • ItemStyle.xsl

these file can be found under the Style Library/XSL Style Sheets as shown

you can alter any of these files to get the html markup you are looking for but it's recommended to create a copy before changing the file
The Html markup of the Carousel in this post I'm going to use a famous image slider called nivo , the css and js files can be downloaded via Nivo Slider Home Page
the desired markup is

to be able to create this html markup using the sharePoint designer copy the file ContentQueryMain.xsl and save it as nivoCQWP.xslt
locate the Outer template and update the xsl to be as below insert the highlighted lines


to complete the markup locate the OuterTemplate.Body and update the template as below




the last step you need to execute is to add the nivo directory to the site collection Style Library using SharePoint Designer Import Folder

Now to use the new customized Content Query webpart you need to upload the webpart if you have a quick look on the first snapshot you will find upload webpart in the left bottom portion of the dialog use it to upload your custom webpart

now you can use your custom CQWB , set the query parameters to load Images from Asset Library ->Image Content Types




the second option is to create a webpart from scratch this will be posted later

Related Articles