SharePoint 2020

The Vision for a Future of Clarity

SharePoint 2010 Content Anything Slider with Captions

This post is a follow on from the following Post from Hasanga Abeyaratne posted on NothingbutSharePoint.com

https://www.nothingbutsharepoint.com/sites/eusp/Pages/Building-a-fully-featured-jQuery-content-slider-for-SharePoint-2010.aspx

Basically, the Article above describes how to use items from a SharePoint list to generate a Content Slider so a user can click through each item.

To see a Demo of Anything Slider and to download the files http://css-tricks.com/examples/AnythingSlider

This is how I used the following code to get the Anything Slider Captions working with the above post and to have each Caption display the data from the Title field.

Below is the amended code required that I used to get this working.


<!-- jQuery --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
 <script src="/Server/scripts/ContentSlider/js/jquery.easing.1.2.js"></script>

<link href="/Server/scripts/ContentSlider/anythingslider.css" rel="stylesheet" >
 <script src="/Server/scripts/ContentSlider/jquery.anythingslider.js"></script>

<!-- Anything Slider optional plugins -->

<link rel="stylesheet" type="text/css" href="/Server/scripts/ContentSlider/slidercaptions.css" >
 <!-- <script type="text/javascript" src="/Server/scripts/ContentSlider/slidercaptions.js"></script>-->

<style>
 #slider1 {
width: 220px;
 height: 220px;
 list-style: none;
 }
 </style>
 <script type="text/javascript">
 $(document).ready(function() {
 var soapEnv = "<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'> \
 <soapenv:Body> \
 <GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'> \
 <listName>AppReviews</listName> \
 <viewFields> \
 <ViewFields> \
 <FieldRef Name='Title' /> \
 <FieldRef Name='body' /> \
 </ViewFields> \
 </viewFields> \
 </GetListItems> \
 </soapenv:Body> \
 </soapenv:Envelope>";

$.ajax({
 url: "/Server/_vti_bin/lists.asmx",
 type: "POST",
 dataType: "xml",
 data: soapEnv,
 complete: renderSlides1,
 contentType: "text/xml; charset=\"utf-8\""
 });
 });

function renderSlides1(xData, status)
 {
 $(xData.responseXML).find("z\\:row").each(function() {
 var liHtml = "<li>" + $(this).attr("ows_body") + "<div class='caption-bottom'>" + $(this).attr("ows_Title") + "</div></li>";
 $("#slider1").append(liHtml);
 });

$(function(){
 $('#slider1') .anythingSlider()
 /* this code will make the caption appear when you hover over the panel
 remove the extra statements if you don't have captions in that location */
 .find('.panel')
 .find('div[class*=caption]').css({ position: 'absolute' }).end()
 .hover(function(){ showCaptions( $(this) ) }, function(){ hideCaptions( $(this) ); });

showCaptions = function(el){
 var $this = el;

if ($this.find('.caption-bottom').length) {
 $this.find('.caption-bottom')
 .show()
 .animate({ bottom: 0, opacity: 1 }, 250);
 }
 };
 hideCaptions = function(el){
 var $this = el;

if ($this.find('.caption-bottom').length) {
 $this.find('.caption-bottom')
 .stop()
 .animate({ bottom: -50, opacity: 0 }, 200, function(){
 $this.find('.caption-bottom').hide(); });
 }
 };

// hide all captions initially
 hideCaptions( $('#slider1 .panel') );
 });

}
 </script>
 <ul id="slider1"></ul>

* Note I have altered the original code to use id=Slider1, so within”slidercaptions.css” make sure you change Slider3 to Slider1.

Ask if anything is unclear. Thanks for reading.

Advertisements

October 7, 2012 - Posted by | SharePoint 2010 | , , ,

1 Comment »

  1. Hi Brett! Newbie here. I copied your code and just got a huge empty box on my webpage. I’m thinking my source code path is incorrect. Do I need to put the actual server name in my path? Instead of: ‘/Server/scripts/ContentSlider/js/jquery.easing.1.2.js’ — Replace with: ‘/MyRealServerName/scripts/ContentSlider/…..’

    Comment by Tee | August 22, 2013 | Reply


Post a Comment

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: