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 to 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, the 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 the 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 gallery view 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!
Attachment: Slide Image.zip
weezer wrote re: SharePoint 2010 Cookbook: Create a Slide Image Web Part Using jQuery on Mon, Aug 15, 2011, 3:47 AM
how do I add a 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 the template list to your site collection and use Visual Studio 2010 to open source code. Open MyAlbum.cs class, replace site URL (phong2008/…/Home.aspx) with your site URL and then click on AlbumWebPart project 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 in 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 the stp file. Do you have wsp format file?
I just wondering if possible to implement carousel control in this jquery plugin. 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
I 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, the list name, and 2 field names. what is the image field in your example? image the same as the preview field in the 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 was uploaded in piclib is not shown in the slideshow.
I just change the URL of the site, the list name, and 2 field names. what is the image field in your example? image the same as the preview field in the 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 the Images field reference to the image in piclib. The Images field is created from the “Hyperlink or Picture” Type with the Format URL option Picture. It contains the 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 shown in the 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 compatibility running it on your site.
Using Visual Studio 2010 and open AlbumWebPart solution.
1. Open the file MyAlbum.cs and change the site URL from “phong2008/…/Home.aspx” to this.Context.Request.Url.ToString().
2. Please check PicLibrary and MyAlbum lists to make sure they exist on your site.
3. And then, right-click on the AlbumWebPart project to deploy it into your site.
“..import hyperlink from another field..” does it mean you want to insert a new field into the MyAlbum list? If yes, you will change some code in the project. Otherwise, let’s edit any item and change the 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 the AlbumWebPart project:
1. Move the AlbumWebPart folder out Layout folder and delete the Layout folder.
2. Change the Build Action property of files (next.png, jquery.js…etc.) from Content to Embedded Resource.
3. Open the project package designer expand the Package folder, and double-click 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 the AlbumWebPart project again.
10. Go to the 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 an issue when I upload this web part 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 web part that is at the top, the images from the other(one added last) web part 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 the 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 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. The 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 web part display incorrectly. Please update the RegisterScriptAndCSS method and replace the character “[” to “<“.
Here is the 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 on my site. It works like a 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 web part, in my SP 2013 farm solution the code works fine, except that the style never gets applied I can’t 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 web art. 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..!!!
