Mrs A's Blog

Where I work we use SharePoint 2007 and I remember when I first started using SharePoint I was told anything you can do on the web you can do in SharePoint.  Well today I found that this was not quiet true.  All I wanted to do was display a picture library as a Slideshow.  Should be easy right – apparently not!!  First place I turned to was my friend Twitter, followed by my friend Mr Google.  Mr Google gave me many options but nothing that did exactly what I wanted.  I then managed to find this site…. Images Slideshow in SharePoint 2007 using JQuery – I managed to negotiate around the site only thanks to my brilliant husband @AshleyAngell and finally managed to get it working.

What you need to do is…

• Create a picture library.
• Add the picture library as a web part to the page where you want the slideshow on.
• Add a content editor web part and add the following code to the Source Code Section:

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js” type=”text/javascript”></script>
<script type=”text/javascript”>
var Imtech = {} || Imtech;
Imtech.Slideshow = function() {
this.images = null;
this.current = -1;
this.wrapper = null;
this.duration = 6000;
this.delay = 3000;
this.init = function() {
this.images = loadImages();
this.wrapper.css(“display”, “none”);
this.wrapper = $(“div.slideshow”, this.wrapper.parent(“:first”).append(‘<div></div>’));
this.wrapper.html(‘<img src=”‘ + this.images[++this.current] + ‘”/>’);
this.intervalObj = window.setInterval(this.showImage, this.duration + this.delay);
}

this.showImage = function() {
if (++slideshow.current >= slideshow.images.length) {
slideshow.current = 0;
}

slideshow.wrapper.fadeOut(slideshow.delay, function() {
slideshow.wrapper.html(‘<img src=”‘ + slideshow.images[slideshow.current] + ‘”/>’);
slideshow.wrapper.fadeIn(slideshow.delay);
});
}

var loadImages = function() {
var images = $(“table.ms-summarystandardbody td.ms-vb2 a[onfocus]”);
//var images = $(“table.ms-summarystandardbody td.ms-vb2 a”);
var imagesList = new Array(images.length);
var i = -1;
images.each(function() {
imagesList[++i] = this.href.replace(‘about:’, ”);
});
return imagesList;
}
};

var slideshow;

$().ready(function() {
slideshow = new Imtech.Slideshow();
slideshow.wrapper = $(“table.ms-summarystandardbody td.ms-vb2 a”).parents(“div[id^=WebPart]”);
slideshow.init();
});
</script>

• Make sure that the content editor web part has no title so it appears “hidden” on the page.

Hopefully if you work in SharePoint this makes making a slideshow for you a lot easier. Let me know how you go!