During one of our engagement we had a requirement for one of our customers to build video galley on SharePoint
The video galleries are created based on SharePoint content type as backend storage and content Query web part mixed with JQuery features to represent the video/images as sliding objects, the following diagram shows the high level design of the solution
First you have to create the following content types as follows:
1. Video Album
Custom content type that inherit from folder content type with the following properties :
- Video Album cover image
2. YouTube Video
Custom content type that inherit from list item content type
- Youtube thumbnail URL
- youTube Video URL
Assign the content type to SharePoint list, name it as video gallery
Now you can add video albums and youtube videos into the video gallery list
Now once the backend is setup and filled with videos and albums we need to setup the UI part using content query web part located in codePlex http://imtech.codeplex.com/releases/view/39782 this web part supports paging and custom XSLT styles:
we used the JQuery sliding gallery called pikachoose http://www.pikachoose.com to display the videos located in video gallery ,once a user clicks on specific album we open popup that display the videos located in video album as sliding objects ,video album name is passed in query string to filter the videos based on the clicked Album,we created a custom content query web part to reference the needed script files ,CSS and XSLT and the most important to filter based on the passed query string , we inherited the normal content query as follows:
public class CustomCQWP : Microsoft.SharePoint.Publishing.WebControls.ContentByQueryWebPart
{
Then added the needed properties as follows,here am listing two of them
[Personalizable(PersonalizationScope.Shared)]
[WebBrowsable(true)]
[WebDisplayName("Custom CAML")]
[Description("")]
[Category("Custom")]
public string CustomQueryString { get; set; }
[Personalizable(PersonalizationScope.Shared)]
[WebBrowsable(true)]
[WebDisplayName("Parameter Name")]
[Description("")]
[Category("Custom")]
public string ParameterName { get; set; }
Then add the properties using
public override ToolPart[] GetToolParts()
{
ArrayList res = new ArrayList(base.GetToolParts());
res.Insert(0, new CustomPropertyToolPart() { Title = "Custom" });
return (ToolPart[])res.ToArray(typeof(ToolPart));
}
Then in CreateChildControls we used the query string to filter the data from the list
if (string.IsNullOrEmpty(ParameterName) == false){
string value = HttpContext.Current.Request.QueryString[ParameterName];
if (SPContext.Current.FormContext.FormMode == SPControlMode.Display)
{
Properties shown as follows in web part properties
We registered the CSS links and JS links as follows:
HtmlHead head = (HtmlHead)Page.Header;
HtmlLink link = new HtmlLink();
link.Attributes.Add("href", Page.ResolveClientUrl(CSSPath));
link.Attributes.Add("type", "text/css");
link.Attributes.Add("rel", "stylesheet");
head.Controls.Add(link);
if (string.IsNullOrEmpty(JavaScriptPath) == false)
Page.ClientScript.RegisterStartupScript(this.GetType(), "CustomCQWPJS", @"");
Now the gallery retrieves the objects from the backend list and display for users as gallery
You must log in to post a comment.