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 to 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!
how do I add slideshow for this sample?. please advise
phongdang wrote re: SharePoint 2010 Cookbook: Create a Slide Image Web Part Using jQuery on Tue, Aug 16 2011 10:16 AM
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.
weezer wrote re: SharePoint 2010 Cookbook: Create a Slide Image Web Part Using jQuery on Fri, Aug 19 2011 11:36 AM
thanks. do you have templates with wsp format. Currently all the side templates in the Slide.zip is stp
weezer wrote re: SharePoint 2010 Cookbook: Create a Slide Image Web Part Using jQuery on Fri, Aug 19 2011 11:43 AM
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
weezer wrote re: SharePoint 2010 Cookbook: Create a Slide Image Web Part Using jQuery on Mon, Aug 22 2011 3:22 AM
Hi, Please disregard any of my questions above.
My question now is, currently, the filmstrip is displayed in the horizontal position, which you please advise what control I need to modify if I need to display the filmstrip in the vertical position on the right side. Please advise
weezer wrote re: SharePoint 2010 Cookbook: Create a Slide Image Web Part Using jQuery on Mon, Aug 22 2011 11:28 PM
II am currently having a problem displaying the filmstrip vertical position. Please advise Thank you
phongdang wrote re: SharePoint 2010 Cookbook: Create a Slide Image Web Part Using jQuery on Wed, Aug 24, 2011, 6:40 AM
Hi weezer,
My demo has not supported your requirement. I used the jquery plug-in for my demo at this link: vandelaydesign.com/…/jquery-image-galleries. You can download and customize your requirement.
Thanks / Phong Dang.
softcom wrote re: SharePoint 2010 Cookbook: Create a Slide Image Web Part Using jQuery on Wed, Sep 14 2011 1:51 AM
thanks for your good post.
deploy this solution in my server, everything is good, but I have a problem. my picture that was uploaded in piclib is not shown in the slideshow.
I just change the 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
softcom wrote re: SharePoint 2010 Cookbook: Create a Slide Image Web Part Using jQuery on Wed, Sep 14 2011 1:52 AM
thanks for your good post.
deploy this solution in my server, everything is good, but I have a problem. my picture that uploaded in piclib is not shown in the slideshow.
I just change the 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?
phongdang wrote re: SharePoint 2010 Cookbook: Create a Slide Image Web Part Using jQueryon Thu, Sep 15 2011 4:26 AM
Hi,
“my picture that uploads in piclib is not shown in the slideshow.” => Piclib just contains image files. You have to create a new item in the MyAlbum list which Images field reference to the 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 showed in slide album as community.bamboosolutions.com/…/slide-02.png
DasPB wrote re: SharePoint 2010 Cookbook: Create a Slide Image Web Part Using jQuery on Thu, Mar 15 2012 7:52 AM
Thanks, good post.
I would like to import hyperlinks from another field (just like the image and description field) what should I do? Please advise me. I tried the same way as the description but had no luck. Please help me…
snibe wrote re: SharePoint 2010 Cookbook: Create a Slide Image Web Part Using jQuery on Thu, Mar 15 2012 8:50 AM
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 hives, 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 on what’s preventing it?
phongdang wrote re: SharePoint 2010 Cookbook: Create a Slide Image Web Part Using jQuery on Mon, Mar 19 2012 3:19 AM
Hi DasPB,
My post is just a WebPart Demo, I had a hard code for something in my solution so after downloading 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.
phongdang wrote re: SharePoint 2010 Cookbook: Create a Slide Image Web Part Using jQuery on Mon, Mar 19 2012 4:41 AM
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.
snibe wrote re: SharePoint 2010 Cookbook: Create a Slide Image Web Part Using jQuery on Mon, Mar 19, 2012, 3:31 PM
Thank you very much!
arunkumar.sundarraj wrote re: SharePoint 2010 Cookbook: Create a Slide Image Web Part Using jQuery on Wed, Mar 21 2012 1:40 AM
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.
arunkumar.sundarraj wrote re: SharePoint 2010 Cookbook: Create a Slide Image Web Part Using jQuery on Wed, Mar 21 2012 2:14 AM
Sorry, I forgot to explain the issue in detail.
The 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.
jtbob74 wrote re: SharePoint 2010 Cookbook: Create a Slide Image Web Part Using jQuery on Tue, May 15 2012 12:48 PM
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
phongdang wrote re: SharePoint 2010 Cookbook: Create a Slide Image Web Part Using jQuery on Thu, May 17 2012 5:25 AM
Hi Arunkumar/ Jtbob74,
I fixed your issue. Please override MyAlbum.cs class.
Here is code:
public class MyAlbum: WebPart
{protected override void CreateChildControls(){//PhotoPanel 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 FieldUrlValue(item[“Images”].ToString());img = new Image();img.ImageUrl = value.Url;panel.Controls.Add(img);//PaneloverLay = 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());}}}
jtbob74 wrote re: SharePoint 2010 Cookbook: Create a Slide Image Web Part Using jQuery on Thu, May 24 2012 4:21 PM
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 insert 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
phongdang wrote re: SharePoint 2010 Cookbook: Create a Slide Image Web Part Using jQuery on Fri, May 25 2012 3:33 AM
Hi,
I cannot post the stylesheet code in the 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.
jtbob74 wrote re: SharePoint 2010 Cookbook: Create a Slide Image Web Part Using jQuery on Tue, May 29 2012 1:12 PM
Perfect, that did the trick!
Thanks for the update. The images show up only when the web part is fully enabled/running.
Cheers,
JT
kousalyaac wrote re: SharePoint 2010 Cookbook: Create a Slide Image Web Part Using jQuery on Thu, Nov 22 2012 8:33 AM
Hi,
I have implemented the picture library slideshow in my site. It works like charm. But I have an issue, the picture does not fit the frame of the slideshow.
Kindly help me to fit the picture in the frame.
bishwadeepsg wrote re: SharePoint 2010 Cookbook: Create a Slide Image Web Part Using jQueryon Mon, Aug 19 2013 4:47 AM
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
Rockie wrote re: SharePoint 2010 Cookbook: Create a Slide Image Web Part Using jQuery on Sun, Sep 29 2013 8:08 AM
Hi! Thank You for the great plugin!
Is there an option that will set a picture to display in the center of the panel? Now it sticks to the upper left corner…
p.s.: version Version: 1.1 (April 5, 2009)
Radhu wrote re: SharePoint 2010 Cookbook: Create a Slide Image Web Part Using jQuery on Sat, Nov 9 2013 1:40 AM
Need to enable click on the description..how to do please suggest
Radhu wrote re: SharePoint 2010 Cookbook: Create a Slide Image Web Part Using jQuery on Mon, Nov 11 2013 6:32 AM
How can we enable mouseover of the frame instead of click..
Yatharth Arya wrote re: SharePoint 2010 Cookbook: Create a Slide Image Web Part Using jQuery on Fri, Dec 13 2013 6:41 AM
Hi,
This is really great webart. Can you pls help out I want to add a Modal Popup on the click of an image? Thanx in Advance..!!!
Regards
Yatharth
9891507982
Yatharth Arya wrote re: SharePoint 2010 Cookbook: Create a Slide Image Web Part Using jQuery on Fri, Dec 13 2013 6:43 AM
Hi ,
How to add popup on click of image .
Please help on that.
Thanks in Advance..!!!