Supporters of End User
Web

Implement Your First Content Slider in SharePoint

 
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.
Categories: 
Mark Miller, AuthorThis article is part of a continuing series, jQuery for the Common Man, that walks through simple jQuery solutions, step-by-step. In this installment, we upload and configure a simple content slider in SharePoint. So now we're at the point where we have to implement the image slider we have selected. If you've been following along with the series, you've got your SharePoint Scripting Resource Center in place and you've investigated a few jQuery sliding solutions. As a reminder, I chose Chris Coyier’s “AnythingSlider jQuery Plugin“. The first thing I did was unzip the package on my harddrive, and then click the index.html file to see what would happen. It worked flawlessly. I popped open the index.html file in TextPad to check out the code and clean up the HTML a bit. I saved that file as EUSPSlider.html. That started me thinking about the simplest way to get the solution to work in SharePoint. Here are the steps I'm planning on taking:
  1. Upload the entire package to a document library in SharePoint
  2. Test the solution
  3. Move the resources to the appropriate locations in the Scripting Center
  4. Test the solution
  5. Replace the default content with my own content
  6. Test the solution
If all goes as planned, I'll then be able to expose various content in the slider using techniques that Christophe Humbert developed for exposing web parts in a tab interface.

Upload the Package to a Document Library

I figure the simplest way to do this is to create a document library, open it in Windows Explorer, then use Windows Explorer to open a second window and drag the files over from my harddrive. I created a document library called "ImageSlider" and chose "None" for the document template. I then opened the document library in Windows Explorer (Actions -> Open in Windows Explorer), and opened another Windows Explorer to expose the AnythingSlider files on my harddrive. After dragging the files over, I visually verified everything had transfered properly. 2010-01-19-ImageSlider-01

Test the Solution

For the first test, as proof of concept, I clicked the EUSPSlider.html file to confirm everything worked as expected. Miracles of miracles, it showed up beautifully on the page. 2010-01-19-ImageSlider-02 Ahh, nice. But there was one caveat... 2010-01-19-ImageSlider-03 When a site is running a secure server (SSL/HTTPS), Internet Explorer will call a security warning if content on the page does not reside within the domain the page is being pulled from. That means that something in our setup is calling an outside resource for some reason. My assumption is that the jQuery script is being called from an external resources, and sure enough, there it is on line 13 of EUSPSlider.html. A call is being made to the google jQuery library:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

    <title>anythingSlider</title>

    <link rel="stylesheet" href="css/page.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="css/slider.css" type="text/css" media="screen" />

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.easing.1.2.js"></script>
	<script src="js/jquery.anythingslider.js" type="text/javascript" charset="utf-8"></script>

    <script type="text/javascript">
...
That's a pretty easy fix. In a previous session, I created a SharePoint Scripting Resource Center that holds a local version of the jQuery library. If I change the pointer to that resource, that should do away with the security warning. I made the change to my local copy. Just to be safe, I turned on versioning in the ImageSlider document library so that I could roll back to the previous version if things went screwy. Oh, yes! That worked like a charm. The call to the local jQuery library is transparent to the End User and the security warning has disappeared.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

    <title>anythingSlider</title>

    <link rel="stylesheet" href="css/page.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="css/slider.css" type="text/css" media="screen" />

    <script type="text/javascript" src="/ScriptingResourceCenter/ResourcesjQuery/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.easing.1.2.js"></script>
    <script src="js/jquery.anythingslider.js" type="text/javascript" charset="utf-8"></script>

    <script type="text/javascript">
...
That was relatively painless. I've now got a copy of the AnythingSlider running in my SharePoint environment. Let's update it a bit to take more advantage of the Scripting Resource Center.

Move Resources to SharePoint Scripting Resource Center

When I examined the resources provided with the AnythingSlider, I took a close look at the three folders included to see what was really a resource and what was testing collateral that didn't need to be moved. All of the js folder and the css folder needs to be placed in the Scripting Resource Center so that anytime we want to use this solution anywhere within our site collection, it will be available. Within the images folder, I'll need to move over the interface images, but leave behind the testing images which are only for this instance of the solution. I used the same technique for moving the files, by opening Windows Explorer in the Resource Center and Windows Explorer on my harddrive and dragging the files over. Too make it clear that these resources are for the AnythingSlider solutions, I prefaced each of the folders with "AnythingSlider-". 2010-01-19-ImageSlider-04 After moving the files over, before deleting the files in the original location, I need to change the references in the HTML file to point to the Scripting Resource Center and upload the new version of EUSPSlider.html to my document library.
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

    <title>anythingSlider</title>

    <link rel="stylesheet" href="/ScriptingResourceCenter/ResourcesScripts/css/page.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="/ScriptingResourceCenter/ResourcesScripts/css/slider.css" type="text/css" media="screen" />

    <script type="text/javascript" src="/ScriptingResourceCenter/ResourcesjQuery/jquery.min.js"></script>
    <script type="text/javascript" src="/ScriptingResourceCenter/ResourcesScripts/js/jquery.easing.1.2.js"></script>
	<script src="js/jquery.anythingslider.js" type="text/javascript" charset="utf-8"></script>

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

Test the Solution

Whoops! I got hosed on that one. All of the content showed up but it is in one, long vertical stream. The resources I moved are not being found. Let me take another look at the source references to see what's off. There it is on line 15. I didn't update the path to the anythingslider.js file. Nope, that didn't do it either. I've got to dig a little deeper. My intuition is telling me that something within the script itself is pointing to another location.... Duh... when I changed the names of the folders to be prefaced with "AnythingSlider-", it would help if I update the script... BINGO!
    <title>anythingSlider</title>

    <link rel="stylesheet" href="/ScriptingResourceCenter/ResourcesScripts/AnythingSlider-css/page.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="/ScriptingResourceCenter/ResourcesScripts/AnythingSlider-css/slider.css" type="text/css" media="screen" />

    <script type="text/javascript" src="/ScriptingResourceCenter/ResourcesjQuery/jquery.min.js"></script>
    <script type="text/javascript" src="/ScriptingResourceCenter/ResourcesScripts/AnythingSlider-js/jquery.easing.1.2.js"></script>
	<script type="text/javascript" src="/ScriptingResourceCenter/ResourcesScripts/AnythingSlider-js/jquery.anythingslider.js" charset="utf-8"></script>

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

Replace the Default Content with Custom Content

Now that the default solution is working in the SharePoint environment, I want to replace the content provided with my own content. The first step is to remove existing references and put text placeholders as a simple test.
<div class="anythingSlider">

  <div class="wrapper">
	<ul>
	   <li>
			Place Holder 1
	   </li>
	   <li>
			Place Holder 2
	   </li>
	   <li>
			Place Holder 3
	   </li>
	   <li>
			Place Holder 4
	   </li>
	   <li>
			Place Holder 5
	   </li>
	</ul>
  </div>

</div> <!-- END AnythingSlider -->
Nice! That was too simple.

To be continued...

That all worked out pretty well. I'm going to stop here, with the plan being to continue this solution in the next article by pulling in content from within the SharePoint site and exposing it from within the slider. Stay tuned... this could get interesting.

Comments

Andrew

Implement Your First Content Slider in SharePoint

Thanks for this series!

I'm a big fan of how you walk us through each of the hiccups that you run into. For me, it helps by showing the reality of getting this stuff to work. I'm interested to see the next entry and how you decide to pull stuff through (presumably) a List into the content slider. Content Editor Web Part? Also, are you going to keep the jQuery code within the web part, or in a .js file in your SSRC? Maybe I'm jumping the gun a little... :)

Thanks

Posted 18-Jan-2010 by Andrew
spevilgenius

Implement Your First Content Slider in SharePoint

Another good one Mark! By the way, is it really possible to build a scripting resource center that will work across multiple site collections? We have one big site collection, but we will also have several smaller site collections that should have those same resources.

Posted 18-Jan-2010 by spevilgenius
EndUserSharePoint

Implement Your First Content Slider in SharePoint

Yes, the Scripting Resource Center can work across site collections as long as the resources you are pointing to are setup to be accessed by everyone. This brings up a point you might consider: a site collection that is established for enterprise resources, not just for scripting. By maintaining your resources in a central respository, you'll have much less duplication and much more control over those resources.

Posted 18-Jan-2010 by EndUserSharePoint
jQuery SharePoint Resources for the Common Man | EndUserSharePoint.com

Implement Your First Content Slider in SharePoint

[...] then list them here for future reference. I’m in the middle of my first jQuery solution, a SharePoint Content Slider, but am keeping my eyes out for my next [...]

Posted 19-Jan-2010 by jQuery SharePoint Resources for the Common Man | EndUserSharePoint.com
stevej

Implement Your First Content Slider in SharePoint

Some interesting things here and like the idea of a scripting resource centre.

I have been fighting over the last few days implementing a jQuery slider using the s3Slider work by Boban Karišik so I just thought I would share my experience of some issues I have found in case you have seen similar problems.

SharePoint default master pages do not declare a DOCTYPE which in IE quirks mode causes some JQuery functions to fail (notably the slide up/slide down - the jerk and flicker when animated). Supplying a DOCTYPE to your master page solves this but has been known to interfere with some standard SharePoint controls (although I did not experience this).

After getting the slider to work (using handwritten HTML) with a proper DocType declaration, what I wanted to do was use a DFWP to transform my image list into a UL that implements the slider. After much pulling apart of the resulting HTML I have come to the conclusion that the mark-up SharePoint generates using this web part (notably I believe the xsl namespaces) again breaks the animation and I am reverting to writing my own web part - not ideal at all.

It would be interesting to know of yours or anyone else's experience with this.

Posted 22-Jan-2010 by stevej
stevej

Implement Your First Content Slider in SharePoint

Sorry, I need to clarify my last paragraph in the above statement - a DFWP does work perfectly. I had spent so much time messing with the HTML I convinced myself that a SPAN was not growing correctly when the problem was the text was too short! Typical example of not seeing the woods for the trees...

My comment regarding DOCTYPE does still stand though. IE in quirks mode does cause some issues with jQuery that I see (good practice enforcing DOCTYPE anyway).

Posted 22-Jan-2010 by stevej
Nagesh

Implement Your First Content Slider in SharePoint

This far works for me. I wanted to try to use this same script from inside a Content editor web part the UI shows up with no images specified in the CSS and has a across bar at the bottom. Wonder what I am missing.

Posted 22-Jan-2010 by Nagesh
PaulT

Implement Your First Content Slider in SharePoint

Hi Mark,

Great article. Just wondering if the follow up article has come out yet?

Regards, PaulT

Posted 28-Mar-2010 by PaulT
EndUserSharePoint

Implement Your First Content Slider in SharePoint

Got distracted getting ready for SharePoint Summit in Montreal and SharePoint 2010 Evolutions in London. Will put this back on my radar. -- Mark

Posted 28-Mar-2010 by EndUserSharePoint
Paul T

Implement Your First Content Slider in SharePoint

Thanks Mark,

Look forward to it.

PaulT

Posted 29-Mar-2010 by Paul T
Daily Creative

Implement Your First Content Slider in SharePoint

Hi Mark

I would love to see the end results of this project. I really like this particularly slider, but I haven't managed to put together the code to pull from a standard Sharepoint Announcements lists by myself. Chris' example basically hard codes the content in the code.

Any chance for picking this up again? Please? Pretty please?

Posted 30-Jun-2010 by Daily Creative
Steve

Implement Your First Content Slider in SharePoint

I did it for you - I have a SharePoint list (rich text with images, urls) that I can auto-populate into this anything slider.

I used an old (2007ish) script from Christophe to query the XML view of a List (xmlhttp request) and convert it into a HTML List { } then used jquery to place that into the HTML so the slider works.

Not sure how to get the code to you so you can make it... better...

Posted 17-Jul-2010 by Steve
Steve

Implement Your First Content Slider in SharePoint

Basically, just convert the last function in Christophe's Text (not the image) rotator... to this:

function DisplayQuote()
{


var xmlDoc = xmlhttp.responseXML;
var ListItems = xmlDoc.getElementsByTagName("z:row") || xmlDoc.getElementsByTagNameNS("*","row") ;

ListText = ""
for(i = 0; i < ListItems.length; i++)
{
var Title = ListItems[i].getAttribute("ows_LinkTitle");
var Body = ListItems[i].getAttribute("ows_Author0");

ListText = ListText + "" + "" + Title + "" + Body +"" + ""


}
ListText = ListText + ""

$("#insertListHere").html(ListText);

}

Posted 17-Jul-2010 by Steve
Steve

Implement Your First Content Slider in SharePoint

Inside the empty quotes in the post above, imaging I have inserted a wrapped around the entire text string, and each new list item is a and
I can email the entire solution if you want.

Posted 17-Jul-2010 by Steve
Steve

Implement Your First Content Slider in SharePoint

I'm referring to this random List item rotator by Christophe...
http://blog.pathtosharepoint.com/2008/12/18/random-quote/

Posted 17-Jul-2010 by Steve
Steve

Implement Your First Content Slider in SharePoint

OK first time posting here, can't make tags appear. Basically the whole html is wrapped in a UL tag, and each new item is a LI item.

Posted 17-Jul-2010 by Steve
Carla

Implement Your First Content Slider in SharePoint

I would really be interested in the outcome of this tutorial. Up to this point I thought I had hit the jackpot with the step by step instructions. Please complete this one!

Posted 07-Sep-2010 by Carla
EndUserSharePoint

Implement Your First Content Slider in SharePoint

Whoops, looks like I didn't finish the job, right? Let me see if I can do something within the next week. -- Mark

Posted 07-Sep-2010 by EndUserSharePoint
PaulT

Implement Your First Content Slider in SharePoint

Great news Mark.

I am looking forward to getting a slider on my SP intranet site.

PaulT

Posted 08-Sep-2010 by PaulT
patrick l

Implement Your First Content Slider in SharePoint

Hi Guys,

Thanks for the inspiring text.
I'm looking into these content sliders right now and i wonder if there is any study or best practice for the 'perfect' time between a slide and the 'perfect' number of images.
I tried to count and measure myself everytime i stumbled upon a content slider but the results weren't really satisfying...

Posted 18-Oct-2010 by patrick l
Tomás

How do you set this Slider on the Sharepoint Page?

The example is great and most of it worked beautifully, but how do I actually put this into my sharepoint frontpage? With a webpart? Directly on the page? Using masterpages?

Posted 31-Aug-2011 by Tomás
Tomás

How do you set this Slider on the Sharepoint Page?

The example is great and most of it worked beautifully, but how do I actually put this into my sharepoint frontpage? With a webpart? Directly on the page? Using masterpages?

Posted 01-Sep-2011 by Tomás
charlie

Banner slider

I found an image slider webpart using jquery that might be a good example for you guys: http://webparts.olympus-consulting.com

Posted 20-Jan-2012 by charlie
Troy

Follow up, please?

Mark,
Great job on the first part...Any way you can post the next part of this, to complete the solution?  Greatly appreciated!

Posted 05-Mar-2012 by Troy
ling

linking the excel chart with slider

Hi. Is there any possible ways to link the excel chart web part with the slider?

Posted 23-Apr-2012 by ling

Notify me of comments to this article

E-mail:
   

Add Comment

Title:

 
Comment:
Email:

   


Name:

 
Url: