Implement Your First Content Slider in SharePoint
This 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:
- Upload the entire package to a document library in SharePoint
- Test the solution
- Move the resources to the appropriate locations in the Scripting Center
- Test the solution
- Replace the default content with my own content
- 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.
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.
Ahh, nice. But there was one caveat…
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-”.
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.
- SharePoint and jQuery for the Common Man
- SharePoint and jQuery for the Common Man: Resources
- Build a SharePoint Scripting Resource Center
- Resources for jQuery Projects in SharePoint
- First Project w/ jQuery and SharePoint: An Image Slider
- Implement Your First Content Slider in SharePoint
- jQuery SharePoint Resources for the Common Man
on
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
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.
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.
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.
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).
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.
Hi Mark,
Great article. Just wondering if the follow up article has come out yet?
Regards, PaulT
Got distracted getting ready for SharePoint Summit in Montreal and SharePoint 2010 Evolutions in London. Will put this back on my radar. — Mark
Thanks Mark,
Look forward to it.
PaulT
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?
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…
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);
}
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.
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.
I’m referring to this random List item rotator by Christophe…
http://blog.pathtosharepoint.com/2008/12/18/random-quote/
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!
Whoops, looks like I didn’t finish the job, right? Let me see if I can do something within the next week. — Mark
Great news Mark.
I am looking forward to getting a slider on my SP intranet site.
PaulT
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…