Coming across this jQuery Slideshow I wanted to adjust the Slideshow to my needs. For example I want a custom URL column that can link a Banner to a different page.
There were a few steps and tricks I had to find out to come to the final result. In this post I will describe these taken steps that had the following result:
Image may be NSFW.
Clik here to view.
Features:
The jQuery Slideshow has a navigation and title linked to a custom URL column. The transition effect is ‘Fade’ and when people hover over the ‘SlideShowContainer’ the jQuery Slideshow pauses.
More jQuery Slideshow transition effects and styling can be found at this site.
When the Expire date SharePoint 2010 column of the image is greater then today’s date it will not be shown in the jQuery SlideShow.
The following SharePoint 2010 Columns are used:
Image may be NSFW.
Clik here to view.
All columns are (*) Required while else the query will fail and no Slideshow will be shown.
The following code is used:
As you can see the code is slightly different than the original jQuery Slideshow code. These differences are:
Styling (CSS):
This new style includes positioning for navigation items (#nav) and breaking long titles in separate lines (#slideshowContentArea p { width:370px; })
<style type=”text/css”>
#nav a { background: #fff; text-decoration: none; margin: 0 5px; padding: 3px 5px; color:#333;}
#nav a.activeSlide { background: #E5E4F1; color:#333;}
#nav a:focus { outline: none; }
#slideshowContentArea p { background-color:#fff; margin-top:0px; width:370px;}
</style>
Query:
The new query will get all the necessary columns and even use a where clause that will not show the expired Banners from today’s date. The URL Column is a custom column that will link a Banner to a specific target (e.g. SharePoint page). Some more query information can be found here.
JavaScript and HTML:
All the display items (Banner and Title) will link to the custom URL column.
//Use target=’_blank’ in order to open new window
var liHtml = “<div><a href=’” + linkURL + “‘ target=” border=’0′><img width=’368′ height=’200′ border=’none’src=’” + imageLink + “‘/></a><a href=’” + linkURL + “‘ target=” border=’0′><p align=’left’><strong>” + title + “</strong></p></a></div>”;
One trick you have to do is to strip the description from the URL column. SharePoint stores a URL like the following: (URL, Description) so when your URL is www.bing.com it will output www.bing.com%20www.bing.com. To make this work use the following line of code for your custom URL column:
//Dubble data in URL (URL%20Description) var linkURL = $(this).attr(“ows_URL”);
var linkURL = $(this).attr(“ows_URL”).substring(0, $(this).attr(“ows_URL”).indexOf(“,”));
After some more testing I found out that Safari and Google Chrome would not show the jQuery Slideshow. The following line:
// Not Working in Safari and Chrome
//$(xData.responseXML).find(“z\\:row”).each(function () {
was changed into:
// Also working in safari and Chrome
$(xData.responseXML).find(“[nodeName='z:row']“).each(function(i) {
One last small reminder is that you can copy this code in a Content Editor web part, BUT the web part uses the requested HTML and saves it when the SharePoint page is edited and saved. So there will be dubble data shown.
I prefer to paste the code into the page layout. You also can put the jQuery references between the masterpage <head> tags like this: