Sivasankar Blog: Create a Slide Image Web Part Using jQuery in sharepoint

Today, jQuery is extremely popular with developers working on a variety of Web applications. To find out more about why jQuery is popular with developers building for SharePoint 2010, check out the previous post on the topic in our Cookbook series, Using jQuery with SharePoint. In this post, I would like present a slide image Web Part that combines SharePoint 2010 and jQuery.

Challenge:

You have a SharePoint picture library containing many images (as shown below), and you would like to display this picture library as a slideshow album to end users. How do you create an attractive slideshow presentation of such an album?

Solution:

Using jQuery plug-in and SharePoint 2010 as a Web Part solution

In my example, I will use a jQuery plug-in with the name: GalleryView - jQuery Content Gallery Plugin

First, Open Visual Studio 2010 and create a new Empty SharePoint project with the name AlbumWebPart.

Next, we select the deploy solution option. In my example, I selected Deploy as a farm solution, but you can choose to select another option.

To read more about the different options available for Web Part deployment, please see the TechNet article,Deploy solution packages (SharePoint Server 2010).

Next, we will add a new Web Part file into our project with the name MyAlbum

Next, we create a layout folder by right-clicking our project, choosing the SharePoint "Layouts" Mapped folderoption, then adding our resource files into the layout folder.

After that, we implement the MyAlbum Web Part. In my example, I've hardcoded the URL of the site, list name, and some field names.

With the CreateChildControl() method, we OpenWeb and then get the list base on the list name and then make a layout for album:

protected override void CreateChildControls()

{

//Photo

Panel photos = new Panel();

photos.ID = "photos";

photos.CssClass = "galleryview";

this.Controls.Add(photos);

//Panel

Panel panel, overLay;

Image img;

using (SPSite site = new SPSite("http://phong2008:81/SitePages/Home.aspx"))

{

using (SPWeb web = site.OpenWeb())

{

SPList list = web.Lists["MyAlbum"];

SPFieldUrlValue value = null;

SPField text = null;

string description = string.Empty;

foreach (SPListItem item in list.Items)

{

panel = new Panel();

panel.CssClass = "panel";

//Img

value = new SPFieldUrlValue(item["Images"].ToString());

img = new Image();

img.ImageUrl = value.Url;

panel.Controls.Add(img);

//Panel

overLay = new Panel();

overLay.CssClass = "panel-overlay";

text = list.Fields["Description"];

description = item["Description"].ToString();

overLay.Controls.Add(new LiteralControl(text.GetFieldValueAsHtml(description)));

panel.Controls.Add(overLay);

photos.Controls.Add(panel);

}



//Make Iframe

HtmlGenericControl ul = new HtmlGenericControl("ul");

ul.Attributes.Add("class", "filmstrip");

photos.Controls.Add(ul);

HtmlGenericControl li;

foreach (SPListItem item in list.Items)

{

li = new HtmlGenericControl("li");

img = new Image();

text = list.Fields["Description"];

description = item["Description"].ToString();

img.AlternateText = text.GetFieldValueAsText(description);

img.ToolTip = text.GetFieldValueAsText(description);

value = new SPFieldUrlValue(item["Images"].ToString());

img.ImageUrl = value.Url;

li.Controls.Add(img);

ul.Controls.Add(li);

}

}

}

}

To show a slide image through jQuery, I register and call the galleryView method:

codeScript += "$(document).ready(function() {";

codeScript += " $('.galleryview').galleryView({";

codeScript += " panel_width: 800,";

codeScript += " panel_height: 300,";

codeScript += " frame_width: 100,";

codeScript += " frame_height: 100,";

codeScript += " img_path: '_layouts/AlbumWebPart/images'";

codeScript += " });";

codeScript += "});";