Mrs A's Blog

My Rambling Thoughts on Teaching and Learning

Slideshows Should Be Easy Right?!!!

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!

        Feel free to share this post on one of your networks...

        1 comment

        1. Pingback: We can do Multiple Videos…. Can’t We? - MrsA's Blog

        Leave a Reply

        Your email address will not be published.