This post is how to use a small jQuery library within a CEWP to provide sliders.

First some pre-reqs.

Download jQuery (latest) and Coin Slider jQuery plugin.

Place the jQuery library in a

Choose one.

  • SPFolder
  • _layouts
  • Document Library
  • Any old web you have access to

 

You need to choose a location, I prefer master pages and putting things in _Layout, but if you dont have access to the server then you could utilise SharePoint Designer to create a folder in a site collection, again here I prefer the top top top  level Site Collection so that anywhere I use this the same js files come from the same place and get cached.

Place the CoinSlider CSS and JS files either in the same location (not master page though) or perhaps in the local site collection you are about to create this content in.

In my Code example I have already a jQuery in my masterpage, so I dont load it again.  I put the other files in an SPFolder in the site collection call jQueryExtras, you can reference them  from where you put them.

 

Next you need an Image Library, just create one somewhere, ideally unique for the content you are to display, as later on I might get to publish the next article that loads the images using SPServices, but then I might not.

In this image library place the images you want to slide, these should ideally be “landscape” style better still CinemaScope style. Those long thin pictures just work better in sliders. All these images MUST be the same size.

I used images from another sliders content (the nivo slider which I struggled to get to work, it was just easier than trying to find content) you could use images from your own stock or the demo just remember to change the image sizes in the right places (css/js).

Now that you have your JS and CSS includes in your locations and your image library populated with images we can create a CEWP, so on the page you want this go create one and hit the EDIT Source Editor

 

Paste this lot in, it is important that you set the height and width in the javascript to match your images, if you don’t expect lots of formatting issues. I tried this on MOSS and in IE7+ it wornt work in IE6, which is a pain for me as I have to find another slider now.

 <link rel="stylesheet" href="/sites/SliderDemo/jQueryExtras/coin-slider-styles.css">
<script src="/sites/SliderDemo/jQueryExtras/coin-slider.min.js"></script>

<div id="gamesHolder">
    <div id="games">
       <a href="http://www.binaryjam.com/" target="_blank">
          <img alt="Wall-E" src="/sites/SliderDemo/SliderImages/walle.jpg"> 
          <span><b>Wall-E</b><br>A Film about a robot. </span>
       </a>
       <a href="http://www.binaryjam.com/" target="_blank">
          <img alt="Finding Nemo" src="/sites/SliderDemo/SliderImages/nemo.jpg"> 
       </a>
       <a href="http://www.binaryjam.com/" target="_blank">
           <img alt="Toy Story" src="/sites/SliderDemo/SliderImages/toystory.jpg"> </a>
       <a href="http://www.binaryjam.com/" target="_blank">
           <img alt="Up" src="/sites/SliderDemo/SliderImages/up.jpg"> </a>
    </div>
</div>
<script>jQuery(function($) {
	$('#games').coinslider({ hoverPause: false, height:246, width:618});
});
</script>

<!-- -->

<!- Force Stupid blog code window to be bigger -->

<!-- -->

Have fun

Advertisements