Navigate Up
Sign In
Supporters of Developer
Web

Building a Fully Featured jQuery Content Slider - The Web Part

Item is currently unrated. Press SHIFT+ENTER to rate this item.1 star selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+ESCAPE to leave rating submit mode.2 stars selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.3 stars selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.4 stars selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.5 stars selected. Press SHIFT+ENTER to submit. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.

 

Editor's note: Contributor Hasanga Abeyaratne is a software engineer at Innovative-e. Follow him @hasanga

As promised in my previous article of “Building a fully featured jQuery content slider for SharePoint 2010” I’m going to take you through the creation of a content slider web part. In case you want to reference anything I’ve also included my visual studio solution which you can download from here.

Game plan

  • We will first create a custom list “ContentSlides” to hold slides content
  • Then add a new column to the “ContentSlides” list which can hold rich HTML content
  • And we will create a visual web part with visual studio
  • Then we will include the jQuery AnythingSlider plugin http://css-tricks.com/3412-anythingslider-jquery-plugin/
  • We will then include the popular SPServices  jQuery library http://spservices.codeplex.com/
  • We will write the javascript code to query the slides list
  • Then we will render the results from the slides list and initialize the AnythingSlider

Creating the “ContentSlides” List

We need a SharePoint list to store the slides. Create a custom list named “ContentSlides” within a SharePoint site. Then add a new column of “Rich HTML” type named “SlidesContent”. This will be the list where we will add new slides for your content slider. The column “SlideContent” will hold the content which we need to show for slide contents.

Then add a few list items with Rich HTML content (content with images, hyperlinks, etc.)

Creating a Visual Studio Project

Now, let’s start building the web part by creating a new visual studio project. I’m going to make it a visual web part which gives us a user control by default, which we can use to cover most of the basic tasks without going deep into server side code.

Open visual studio and click “New Project” and from the new project properties window select the “Visual Web Part” under SharePoint templates.

2012-01-13-jQueryContentSliderWebPart-01.png

Type in the project “Name” as “ContentSliderWebpart”. Location can be any location in your disk where you want to create the new project. And then click “OK” to create a new project for our web part.

You will be prompted to setup a debugging site URL. Give the same site URL as the site you created the slides list.

2012-01-13-jQueryContentSliderWebPart-02.png

Click “Finish” to create the visual studio project for building our visual web part.

Note: As of now you cannot directly use visual studio to deploy a visual web part as a sandboxed solution. That means you cannot directly deploy it on an Office 365 site. So I’m going to keep it simple and deploy it as a farm solution. However the new Visual Studio 11 developer preview promises the development of visual web parts as sandboxed solutions. http://msdn.microsoft.com/en-us/library/ee290856%28v=VS.110%29.aspx

Once the new project is created your solution explorer will look like the following.

2012-01-13-jQueryContentSliderWebPart-03.png

Now, that naming is ugly! We need to do rename all those “WebPart1” bits to something meaningful and nice.

So rename the following elements:

“VisualWebPart1” to “ContentSliderVisualWebPart”
“VisualWebPart1.cs” to “ContentSliderVisualWebPart.cs”
“VisualWebPart1.webpart” to “ContentSliderVisualWebPart.webpart”
“VisualWebPart1UserControl” to “ContentSliderVisualWebPartUserControl”

You can also rename your feature under “Features” to something like “ContentSliderWebPartFeature”.

Now your project tree will look like following. Much neater!

2012-01-13-jQueryContentSliderWebPart-04.png

Open the “ContentSliderVisualWebPart.webpart” and change the “Title” and “Description” property values to “Content Slider WebPart”. This will help to uniquely identify our web part from the Web Parts gallery.

Let’s Add AnythingSlider Plugin

There are two CSS and two JavaScript files that are required by the AnythnigSlider plugin. We need to deploy these files in to SharePoint to use within our web part. To make it simple in this scenario let’s deploy these files to the SharePoint “Layouts” folder.

Let’s start by adding a “Layouts” mapped folder to our project. Right click on the “ContentSliderWebPart” project and select “Add” and then click “SharePoint “Layouts” Mapped Folder”.

2012-01-13-jQueryContentSliderWebPart-05.png

This will add a “Layouts” mapped folder and will also create a sub folder called “ContentSliderWebPart” to the project.

Download the AnythingSlider plugin from the following URL (http://css-tricks.com/3412-anythingslider-jquery-plugin/) and locate the following four files in the downloaded package.

  • anythingslider.css
  • anythingslider-ie.css
  • jquery.min.js
  • jquery.anythingslider.js

Copy and paste these four files to the “ContentSliderWebPart” folder we just created within visual studio.

We also need to copy an image that is required. Locate the “default.png” from the downloaded package and copy that to the same folder above.

Open the anythingslider.css and edit the lines 129, 155, 181 shown as below

background: url("../images/default.png") no-repeat;
to
background: url(“default.png") no-repeat;

Make sure you update all the three lines above. This is to reference the arrow images used in the AnythingSlider from the same “ContentSliderWebPart” folder rather than a different folder.

Finally your project tree should look like this.

2012-01-13-jQueryContentSliderWebPart-06.png

Note: You can better organize your files in sub folders (CSS/ JS/ Images) but just to keep it simple I’m keeping it all in the same folder.

Now that we have everything in place to deploy the required files let’s add the code to import these files so that the web part can use it. Believe me this is easy!

Double click to open the “ContentSliderVisualWebPartUserControl.ascx” and copy paste the following code.

<SharePoint:CssRegistration ID="AnythingSliderCssRegistration" runat="server" 
	Name="/_layouts/ContentSliderWebPart/anythingslider.css"></SharePoint:CssRegistration>
<SharePoint:CssRegistration ID="AnythingSliderCssRegistrationIE7" runat="server" 
	Name="/_layouts/ContentSliderWebPart/anythingslider.css" ConditionalExpression="lte IE 7"></SharePoint:CssRegistration>

<SharePoint:ScriptLink ID="JqueryScriptLink" runat="server" 
	Name="/_layouts/ContentSliderWebPart/jquery.min.js"></SharePoint:ScriptLink>
<SharePoint:ScriptLink ID="AnythingSliderScriptLink" runat="server" 
	Name="/_layouts/ContentSliderWebPart/jquery.anythingslider.js"></SharePoint:ScriptLink>

Note that we are using "SharePoint:CssRegistration” control and “SharePoint:ScriptLink” controls to import the required CSS and JavaScript files. As for the “anythingslider-ie.css” we have used “ConditionalExpression” property to import the file only for browsers later than IE 7.

Let’s Query the ContentSlides List

I’m going to make this super easy with another famous jQuery library called SPServices which you can download from here. http://spservices.codeplex.com/

Download the package and copy the “jquery.SPServices.min.js” file to the same location as we copied the other JavaScript files.

Import the SPServies library by adding the following line in the user control.

<SharePoint:ScriptLink ID="SPServicesScriptLink" runat="server" 
	Name="/_layouts/ContentSliderWebPart/jquery.SPServices.min.js"></SharePoint:ScriptLink>

Once you add the line add the following block of code to query the items from the “ContentSlides” list.

<script language="javascript" type="text/javascript">

	$(document).ready(function () {
		$().SPServices({
			operation: "GetListItems",
			async: false,
			listName: "ContentSlides",
			CAMLViewFields: "<ViewFields<FieldRef Name='SlidesContent' /></ViewFields>",
			completefunc: function (xData, Status) {
				$(xData.responseXML).SPFilterNode("z:row").each(function () {
					var liHtml = "<li>" + $(this).attr("ows_SlidesContent") + "</li>";
					$("#slider").append(liHtml);
				});
			}
		});

		/*-- Initialize AnythingSlider plugin --*/
	    $('#slider').anythingSlider();

	});
</script>

<ul id="slider" />

Seriously that's about it!

What it does is queries the “ContentSlides” list and builds an unordered list structure, which each list item holds the HTML content from “SlideContent” column. The ID of the unordered list is “slider”

Note: We can use a more advanced CAML query to filter and reorder the slides, but for the sake of simplicity I will keep it to minimal.

Then we initialize the AnythingSlider plugin by calling the $('#slider').anythingSlider(); function.

Right click the project and click “Deploy”. This action will deploy all the required files to the SharePoint site that you set at the beginning.

2012-01-13-jQueryContentSliderWebPart-07.png

Using the Web Part

Navigate to the site where you deployed the web part and add the web part to a page. To do this go to the edit mode of the page and click “Add a Web Part” and select “Content Slider Web Part” from the “Custom” web parts group. And then Click “Add”.

2012-01-13-jQueryContentSliderWebPart-08.png

Note: This page has to be in the same site that you created the “ContentSlides” list.

Deploying the Webpart as a WSP

You can also find the WSP package (“ContentSliderWebPart.wsp”) for the web part under the Bin -> Debug folder. You can use this WSP to deploy the web part in another environment.

Final Thoughts

So we basically developed a Visual Web Part which can be packaged as a WSP and deployed to any sharepoint environment which can deploy farm solutions. We can modify the CSS of the AnythingSlider to make it look as you wish. Also there are few skins available which you can try out.

In case you miss anything download my visual studio solution from here

Apart from styling, there are many things that we can do to make this web part more robust and configurable. Also please note that you won’t be able to add two of these same webparts to the same page. I will cover these topics in a separate article. As of now I hope you will enjoy this little web part which you can use in your SharePoint site.

Feel free to reach out to me with any questions. Take care!

Categories: jQuery; Web Parts; Visual Studio; MOSS; WSS; 2010

Comments

sidahmed

Excellent job !!

Hi Hasanga, It Works good for me. I delete the sollution and now i try to redeploy it, but it steel impossible !!! You have a sugestion about this sheet ? Thanks in advance.

Posted 23-Feb-2012 by sidahmed
Hasanga Abeyaratne

Re-deploying the web part

Hi sidahmed, Not sure what do you mean by deleting the solution. You mean you remove the solution from CA? This happens if the web part gets orphaned. Best way would be to deactivate your feature -> retract and uninstall the WSP. Then verify the web part is deleted from the web part gallery for the site collection. If not manually delete it. Then follow the same steps as deploying a web part.

Posted 28-Feb-2012 by Hasanga Abeyaratne
Martin

Great article! Possible to add additional content like author and picture?

Hi Hassange, great article.  Works great.  Was wondering if there is an easy way to add some additional content such as author (Created by) and date (created), a picture, and ability to limit the number of items to display.  Thanks for a great article!  Martin

Posted 25-Mar-2012 by Martin
Hasanga Abeyaratne

Adding additional content

Hi Martin,
 
Yes! you can add additional content as long as those are available in the list that you query. Add the fields to the "CAMLViewFields" node and then use those just like I've used "ows_SlidesContent".
 
You can use "CAMLRowLimit" property in SPServices to limit the rows. http://spservices.codeplex.com/wikipage?title=$%28%29.SPServices&referringTitle=Documentation
 
 
I’m extremely sorry for a late reply. For some reason I'm not getting email alerts anymore. Let me know if you need further assistance.
 
Cheers!

 

Posted 12-Jun-2012 by Hasanga Abeyaratne
Clint

Content - undefined

Hi Hasanga, I've deployed my web part, but in the content it says undefined.

Posted 07-Sep-2012 by Clint
Clint

Disregrad: Content - undefined

I figured out what I did wrong.  Works great, thanks!

Posted 07-Sep-2012 by Clint
Nikhil Bendre

How will I display images instead of the paging no of the required item?

Hi, Awesome post. Almost suits my requirement. What I want to achieve is that instead of paging numbers, the same data with thumbnail image and details text preview should be shown. Any help would be appreciated. Cheers !

Posted 11-Sep-2012 by Nikhil Bendre
Hasanga Abeyaratne

Thumbnail Image Navigation

Hi Nikhil,
 
Enabling thumbnail image navigation is not directly available with the jQuery plugin (anythingslider) we use in this article.
 
If you want to achieve this you can look at something like Nivo slider plugin, which is also a great jQuery slider solution. ( http://nivo.dev7studios.com/demos/4 )
 
You can either tweak above code to use Nivo slider or use the following Codeplex project http://nivowebpart.codeplex.com
 
 
Good day!
 

Posted 03-Oct-2012 by Hasanga Abeyaratne
monu

coach

If a coach thinks topic rhythm efficiently, interacting that for you to novices reaps extremely moreover of your feast than the typical undertaking. About erudition the responsible rhythm, We include a virile college of thought advantageouss literacy—both whereas it arrives to examining as well as publishing alongs besides when it transpires to a fresh comprehending as well as imagining for that digital camera succeed older. Free Trial Sytropin HGH

Posted 20-Feb-2014 by monu

Notify me of comments to this article

E-mail:
   

Add Comment

Title:

 
Comment:
Email:

   


Name:

 
Url: