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 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:
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:
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!
how do i add slideshow for this sample?. please advise
Hi weezer,
Please download the template list and source code. Attach template list into your site collection and use Visual Studio 2010 to open source code. Open MyAlbum.cs class, replace site url (phong2008/…/Home.aspx) to your site url and then click on AlbumWebPart project and then press F4, change Site URL property to your web application and then right click -> deploy it into your server.
Thanks / Phong Dang.
thanks. do you have templates with wsp format. Currently all the side templates in the Slide.zip is stp
The list templates in slide.zip are in stp file. Do you have wsp format file.
I just wondering if possible to implement carousel control in this jquery plugins. Please advise. Thanks
Hi, Please disgard any my questions above.
My question now is, currently the filmstrip is display in horizontal position, which you please advise what control that i need to modify if i need to display filmstrip in vertical position on right side. Please advise
II am currently having a problem displaying filmstrip vertical position. Please advise Thank you
Hi weezer,
My demo has not supported your requirement. I used jquery plug-in for my demo at this link: vandelaydesign.com/…/jquery-image-galleries. You can download and customize your requirement.
Thanks / Phong Dang.
thanks for your good post.
deploy this solution in my server,everything is good,but i have a problem. my picture that upload in piclib is not show in slideshow.
i just change URL of the site, list name, and 2 field names.what is the image field in your example?image the same is preview field in picture library ?
thanks in advance
thanks for your good post.
deploy this solution in my server,everything is good,but i have a problem. my picture that upload in piclib is not show in slideshow.
i just change URL of the site, list name, and 2 field names.what is the image field in your example?image the same is preview field in picture library ?
Hi,
“my picture that upload in piclib is not show in slideshow.” => Piclib just contain image files. You have to create a new item in MyAlbum list which Images field reference to image in piclib. The Images field is created from “Hyperlink or Picture” Type with Format URL option is Picture. It contain url of the image from your Picture Library. You can see the Images field in my link: community.bamboosolutions.com/…/slide-01.png. It will be showwed in slide album as community.bamboosolutions.com/…/slide-02.png
Thanks, good post.
I would like to import hyperlink from another field (just like image and description field) what should I do? Please advice me. I tried same way like description but no luck. Please help me…
I love this web part and I really want to make use of it but one thing I have been unsuccessful at doing is making it work as a sandboxed solution. It keeps giving me an error.
What I did was removed the layouts folder since that has to access the 14 hive, and manually add it to a folder in my site collection and update all the links. It still functions properly as a farm solution but I can’t change it after that to a sandboxed. Any ideas whats preventing it?
Hi DasPB,
My post is just a WebPart Demo, I had hard-code for something sin my solution so after download it, you need to change them for compatible running it in your site.
Using Visual Studio 2010 and open AlbumWebPart solution.
1. Open file MyAlbum.cs and change the site url from “phong2008/…/Home.aspx” to this.Context.Request.Url.ToString().
2. Please check PicLibrary and MyAlbum list to make sure they exist on your site.
3. And then, right click on AlbumWebPart project to deploy it into your site.
“..import hyperlink from another field..” does it mean you want to insert a new field into MyAlbum list? If yes, you will change some code in the project. Otherwise, let’s edit any item and change hyperlink that you like.
Hi Snibe,
How to deploy resources in sandboxed solutions?
Please change something in AlbumWebPart project:
1. Move AlbumWebPart folder out Layout folder and delete Layout folder.
2. Change Build Action property of files (next.png, jquery.js…etc.) from Content to Embedded Resource.
3. Open the project package designer expanding the Package folder, and double-clicking the Package.package project item.
4. On the bottom of the designer, click the Advanced tab.
5. Click the Add > Add Existing Assembly command.
6. Select an AlbumWebPart assembly to add to the Package. (Source Path: “binDebugAlbumWebPart.dll” and Location: “AlbumWebPart.dll”).
7. Accept the default GlobalAssemblyCache deployment target.
8. Click OK to finish.
9. Build AlbumWebPart project again.
10. Go to bin folder, get the AlbumWebPart.wsp file and then upload it into Solutions in Site Settings.
Thank you very much!
I am having issue when i upload this webpart twice on the same page. please let me know how can i solve this issue. This would be of great help.
Sorry i forgot to explain the issue in detail.
Issue is when i click on the arrows in the webpart that is at the top, the images from the other(one added last) webpart are getting scrolled.
Hi,
I’ve been using the image slider web part on our development server, and it’s working great. Thanks for the web part.
I do have one question though. When using Firefox, Internet Explorer and to a lesser extent Chrome, all of the slide images will briefly show up scrolled down the page, then the Javascript loads and kicks in a reorganized the images into the web part. Is there a way to keep the images from showing until the web part loads and the Javascript is running?
I’m trying to see if I can keep the page looking less jumbled while everything is loading.
Thanks,
JT
Hi Arunkumar/ Jtbob74,
I fixed your issue. Please override MyAlbum.cs class.
Here are code:
public class MyAlbum : WebPart
{
protected override void CreateChildControls()
{
//Photo
Panel photos = new Panel();
photos.ID = “photos”;
photos.CssClass = “galleryview_” + this.ClientID;
this.Controls.Add(photos);
//Panel
Panel panel, overLay;
Image img;
using (SPSite site = new SPSite(” your site url “))
{
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);
}
}
}
}
protected override void OnPreRender(EventArgs e)
{
base.OnPreRender(e);
RegisterScriptAndCSS();
}
private void RegisterScriptAndCSS()
{
StringBuilder codesScript = new StringBuilder();
codesScript.Append(@”
<link type=’text/css’ rel=’stylesheet’ href=’_layouts/AlbumWebPart/style/album.css’ />
<script type=’text/javascript’ src=’_layouts/AlbumWebPart/jquery.js’></script>
<script type=’text/javascript’ src=’_layouts/AlbumWebPart/script/Jgalleryview.js’></script>
<script type=’text/javascript’ src=’_layouts/AlbumWebPart/script/Jtimers.js’></script>
<script type=’text/javascript’>
$(document).ready(function() {
$(‘.filmstrip’).css({ ‘display’ : ‘block’});
$(‘.galleryview_” + this.ClientID + @”‘).galleryView({
panel_width: 800,
panel_height: 300,
frame_width: 100,
frame_height: 100,
img_path: ‘_layouts/AlbumWebPart/images’
});
});
</script>”);
if (!this.Page.ClientScript.IsStartupScriptRegistered(“MyAlbummWebPart” + this.ID))
{
this.Page.ClientScript.RegisterStartupScript(this.GetType(), “MyAlbummWebPart” + this.ID, codesScript.ToString());
}
}
}
Hi,
I tried your new code for the MyAlbum.cs file, compiled and packaged it up, but when I put the updated web page on the page, it still did the same thing. Page loads, and all of the images show up for about a second, then all go away leaving the rotating web part behind.
I used PowerShell to update the web part and then inserting the web part, but no change. Then I used PowerShell to uninstall and remove the web part, then add and install the web part. Insert the web part on the page, but no change. When the page is refreshed, all of the images show up.
Thanks for the help,
JT
Hi,
I cannot post the stylesheet code in comment so your webpart display incorrectly. Please update RegisterScriptAndCSS method and replace character “[” to “<“.
Here are code:
private void RegisterScriptAndCSS()
{
StringBuilder codesScript = new StringBuilder();
codesScript.Append(@”[style type=’text/css’]
.galleryview_” + this.ClientID + @” {
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
}
.panel
{
display:none;
}
UL.filmstrip
{
display:none;
}
[/style]
[link type=’text/css’ rel=’stylesheet’ href=’_layouts/AlbumWebPart/style/album.css’ /]
[script type=’text/javascript’ src=’_layouts/AlbumWebPart/jquery.js’][/script]
[script type=’text/javascript’ src=’_layouts/AlbumWebPart/script/Jgalleryview.js’][/script]
[script type=’text/javascript’ src=’_layouts/AlbumWebPart/script/Jtimers.js’][/script]
[script type=’text/javascript’]
$(document).ready(function() {
$(‘.filmstrip’).css({ ‘display’ : ‘block’});
$(‘.galleryview_” + this.ClientID + @”‘).galleryView({
panel_width: 800,
panel_height: 300,
frame_width: 100,
frame_height: 100,
img_path: ‘_layouts/AlbumWebPart/images’
});
});
[/script]”);
if (!this.Page.ClientScript.IsStartupScriptRegistered(“MyAlbummWebPart” + this.ID))
{
this.Page.ClientScript.RegisterStartupScript(this.GetType(), “MyAlbummWebPart” + this.ID, codesScript.ToString());
}
}
Thanks / Phong Dang.
Perfect, that did the trick!
Thanks for the update. The images show up only when the web part is fully enabled/running.
Cheers,
JT
Hi,
I have implemented the picture library slideshow in my site. It works like charm. But i have an issues, the picture not fits the frame of slideshow.
Kindly help me to fit the picture in the frame.
Hi Phong,
I am trying this webpart, in my SP 2013 farm solution
the code works fine, except that the style never gets applied
I cant see the slider generated
Getting a $ is not defined error for galleryview
If you can please help with this
Thanks in advance
Hi! Thank You for great plugin!
Is there an option that will set picture to display in center of panel? Now it sticks to upper left corner..
p.s.: version Version: 1.1 (April 5, 2009)
Need to enable click on the description..how to do please suggest
How can we enable on mouseover of frame instead of click..
Hi,
This is really great webart.
Can u pls help out i want to add Modal Popup on click of image.
Thanx in Advance..!!!
Regards
Yatharth
9891507982
Hi ,
How to add popup on click of image .
Please help on that.
Thanks in Advance..!!!