SharePoint 2010 Cookbook: Create a Slide Image Web Part Using jQuery

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 folder option, 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:

1: protected override void CreateChildControls()

2: {

3: //Photo

4: Panel photos = new Panel();

5: photos.ID = "photos";

6: photos.CssClass = "galleryview";

7: this.Controls.Add(photos);

8: //Panel

9: Panel panel, overLay;

10: Image img;

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

12: {

13: using (SPWeb web = site.OpenWeb())

14: {

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

16: SPFieldUrlValue value = null;

17: SPField text = null;

18: string description = string.Empty;

19: foreach (SPListItem item in list.Items)

20: {

21: panel = new Panel();

22: panel.CssClass = "panel";

23: //Img

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

25: img = new Image();

26: img.ImageUrl = value.Url;

27: panel.Controls.Add(img);

28: //Panel

29: overLay = new Panel();

30: overLay.CssClass = "panel-overlay";

31: text = list.Fields["Description"];

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

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

34: panel.Controls.Add(overLay);

35: photos.Controls.Add(panel);

36: }

37:

38: //Make Iframe

39: HtmlGenericControl ul = new HtmlGenericControl("ul");

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

41: photos.Controls.Add(ul);

42: HtmlGenericControl li;

43: foreach (SPListItem item in list.Items)

44: {

45: li = new HtmlGenericControl("li");

46: img = new Image();

47: text = list.Fields["Description"];

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

49: img.AlternateText = text.GetFieldValueAsText(description);

50: img.ToolTip = text.GetFieldValueAsText(description);

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

52: img.ImageUrl = value.Url;

53: li.Controls.Add(img);

54: ul.Controls.Add(li);

55: }

56: }

57: }

58: }

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

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

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

3: codeScript += " panel_width: 800,";

4: codeScript += " panel_height: 300,";

5: codeScript += " frame_width: 100,";

6: codeScript += " frame_height: 100,";

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

8: codeScript += " });";

9: codeScript += "});";

And voila:



For reference, You can download the template list and source code of my example.

Happy to share!