Wednesday, March 11, 2009

Sharepoint Image Rolling (Content) Webpart

Recently in one of the project there is a requirement of building a image rolling webpart. As there was time constraint to build a entire Visual Studio webpart, I took help of Content Editor Webpart and put down simple Javascript and HTML codes to make it working.
You need to create a picture library to store your images. Only disadvantage is that you need to hardcode the images and add some scripts code for any images you want to add for rolling in future.

1) Drag and drop a Content Editor webpart in your ASPX page.

2) Add the complete Script below:
<script language="javascript" type="text/javascript">

<!--
var image="";
var banners=0;
var bannerImage = new Array(4); // Modify the array count if new images added
bannerImage[0]= "http://mywebserver/PublishingImages/Image1.jpg";
bannerImage[1]= "http://mywebserver/PublishingImages/Image2.jpg";
bannerImage[2]= "http://mywebserver/PublishingImages/Image3.jpg";
bannerImage[3]= "http://mywebserver/PublishingImages/Image4.jpg";
// <<Insert new Image array here>>

var bannerURL = new Array(bannerImage.length);
bannerURL[0]= "http://www.google.com";
bannerURL[1]= "http://www.yahoo.com";
bannerURL[2]= "http://mywebserver/news/Pages/CCNNEAwards.aspx";
bannerURL[3]= "http://mywebserver/default.aspx";
// <<Insert New Image URL here>>

var link = bannerURL[0] ;
function cycle() {
if (++banners > bannerImage.length-1) banners=0;
document.banner1.src = bannerImage[banners];
window.setTimeout('cycle();',6000);
}

function urlswitch() {
link= bannerURL[banners];
return link;
}
//-->
</script>

<center>
<a href="#" onclick="this.href=urlswitch()">
<img width="225" border="0" src="http://mywebserver/Rotating%20Images/Image1.jpg" name="banner1"></a> </center>

3) To add new Image
To add a new image(Image5.jpg) just add a this line
//** URL of the image**
bannerImage[4]= "http://mywebserver/PublishingImages/Image5.jpg";
after
bannerImage[3]= "http://mywebserver/PublishingImages/Image4.jpg";
Also update the number of array item to 5 in the line.
var bannerImage = new Array(5);

Add a URL to the New Image
Add this line
bannerURL[4]= "http://mywebserver/department/HR/default.aspx"; // **URL to drill down to a site after the line containing “bannerURL[3] “;

No comments: