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

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:

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! Wink


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 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 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

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 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 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 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

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 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 ?

phongdang
wrote
re: SharePoint 2010 Cookbook: Create a Slide Image Web Part Using jQuery
on Thu, Sep 15 2011 4:26 AM

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

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 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…

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 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?

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 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.

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.

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 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());

           }

       }

   }

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 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

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 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 issues, the picture not fits the frame of slideshow.

Kindly help me to fit the picture in the frame.

bishwadeepsg
wrote
re: SharePoint 2010 Cookbook: Create a Slide Image Web Part Using jQuery
on 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 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)

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 on mouseover of 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 u pls help out i want to add  Modal Popup on click of 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..!!!

All SharePoint Versions

The web parts are functional components that extend your SharePoint environment whether it’s hosted, on-premises, or part of Microsoft® Office 365.

SharePoint 2013, 2016, 2019, Online (Office 365)

On-Premises Only

These web parts extend SharePoint beyond its out-of-the-box capabilities by tailoring it to your requirements with Bamboo Solution’s growing portfolio of SharePoint Web Parts.

SharePoint 2013, 2016, 2019

SharePoint

Product Suites

Experience greater power and savings by bundling our SharePoint apps and web parts.


Essentials Suite


Essentials Plus Suite


Bamboo Premier Suite


Project Management Suite


Knowledge Management Suite


External User Manager


 

For more information on our product suites, contact us.

Featured Services

SharePoint Health Check

A SharePoint Health Check will identify the causes of issues and risks associated with your specific environment, and is custom tailored to provide you with the best recommendations to optimize your SharePoint environment.

SQL Health Check

Document recommendations relating to performance, stability, availability, or a specific focus you request of your SQL Server database instances.

My SharePointXperts

The truth is that each SharePoint skill may not be a full time job for many organizations, and it is nearly impossible for one person to do everything you need – so augment your team with SharePointXperts; providing the skill sets you need when you need them!