Friday, July 9, 2010

Image Slideshow in SharePoint CEWP with Javascript and JQuery

Note: This is a image slider implementation. If  you are looking for Rotating Banner for SharePoint using jQuery, see my post: Rotating Banner for SharePoint using jQuery

Upload the images and add the CEWP, then paste the below Code:

<p><b id='banner'></b></p>
<script>
var newBanner=0;
function runOnLoad(){
var bannerImg = new Array();
var bannerLink = new Array();
  // Enter the names of the images below
  bannerImg[0]="http://SharePoint.Company.com/banner/banner1.jpg";
  bannerLink[0]="http://www.honeywell.com";

  bannerImg[1]="http://SharePoint.Company.com/banner/banner2.jpg";
  bannerLink[1]="http://www.microsoft.com";

  bannerImg[2]="http://SharePoint.Company.com/banner/banner3.jpg";
  bannerLink[2]="http://www.google.com";


var totalBan = bannerImg.length;

  newBanner++;
  if (newBanner == totalBan)
    {
    newBanner = 0;
    }
document.getElementById('banner').innerHTML="<a target=_blank href="+bannerLink[newBanner]+"><img height=100 width=200 src="+bannerImg[newBanner]+"></a>";
 setTimeout("runOnLoad()", 2*1000);
}
_spBodyOnLoadFunctionNames.push("runOnLoad");
 </script>

Using JQuery:
Another nice way to get the nice rotating banner is to use: JQuery. Here is how:
1. Upload the images to your site

2. Add the content editor web part

3. you can either upload the JQuery script files to your SharePoint site or point it to Google.
Download URLs:
http://code.jquery.com/jquery-1.7.1.min.js
http://malsup.github.com/jquery.cycle.lite.js

4. Place the following code:

<style type="text/css">
.slideshow { height: 60px; width: 225px; margin: auto }
.slideshow img { padding: 2px; border: 1px solid #ccc; background-color: #eee; }
</style>
<!-- include jQuery library -->
<script type="text/javascript" src="jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="jquery.cycle.lite.min.js"></script>
<!--  initialize the slideshow when the DOM is ready -->
<script type="text/javascript">
$(document).ready(function() {
    $('.slideshow').cycle({
  fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
 });
});
</script>
<body>
 <div class="slideshow">
  <img src="1.jpg" width="225" height="53" />
  <img src="2.jpg" width="225" height="53" />
  <img src="3.jpg" width="225" height="53" />
 </div>
</body>



You might also like:
SharePoint Usage Reports
Usage reports, collaboration and audit for SharePoint.
Document SharePoint Farm
Automatically generate SharePoint documentation.
*Sponsored


Check out these SharePoint products:

18 comments :

  1. Do you have the jQuery script files to download?

    ReplyDelete
  2. Here you go: http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js

    ReplyDelete
  3. Awesome. Easy and quick. thanks

    ReplyDelete
  4. Can you show me the screenshot please?

    ReplyDelete
  5. can you please tell me where should i add the code and jquery script files ?

    ReplyDelete
    Replies
    1. Place the code in CEWP or any aspx page. JQuery files can be from any library or from 12 or 14 hive, change the script src in the above code.

      Delete
  6. I believe your banner is really nice and easy to use, i do have a question. My sharepoint site has thousands of users visiting it every day. The thing is that i need to find a way for the images to be storaged in a cache instead of making them reload for each user everytime in order to increase my site performance which sometimes gets cracked when this happens. How can i do that based in this great solution?

    ReplyDelete
    Replies
    1. By default, Cache(content expiration) is enabled and set to 1 year in IIS for _layouts folder. So consider placing your image files in _Layouts folder. You can consider Blob cache also.

      Delete
  7. Thanks! Works great. Since I have a large image library I'm rotating though, is there an easy way to get it to start with a random image each time? I am not a programmer, just a content manager for our intranet.

    ReplyDelete
    Replies
    1. If you want to dynamically load images from SharePoint Picture Library, Your options are : Content Query Web Part / SPServices!

      Delete
  8. I add the SPServices to get data from Picture Library. It displays pictures, but not in Slider format. Any idea?

    ReplyDelete
    Replies
    1. Did you add jQuery Cycle as well? It does the Slide show functionality.

      Delete
  9. Hi,, It really helps to create dynamic image sliding effect using spservice, now workign Chrome and Firefox but not in IE. not working in IE..please help me

    ReplyDelete
  10. is there a way to fade the images?

    ReplyDelete
  11. Replies
    1. for some reason, the jquery code does not work with my site. I am using the first code you provided (the ONLY code I have been able to find that works with my site after days of research), and I want to get rid of the link to the images and put in a fade effect. is there a way to do this? the jquery code you provided in the link does not work for my site and I am too unfamiliar to go ahead and edit it myself. thank you!

      Delete
  12. Fantastic! This is very useful. One thing I would like to do is add more images. What code do I need to add to make it work for 4 or 5 images in the slideshow?

    ReplyDelete
  13. can any one pls tell me how to create an image slide show . m trying to create a slide show but the content itself is not working . what might be the reason

    ReplyDelete

Please Login and comment to get your questions answered!

You might also like:

Related Posts Plugin for WordPress, Blogger...