How to Create an Automatic Fading Slideshow in Blogger Part 2

*UPDATE - February 27th, 2013: Since this tutorial has been having so many problems I have created a new tutorial with a better slideshow method. Check it out. 

*UPDATE - September 22nd, 2012 @11:40PM: I found the problem to the static image that was talked about in the comments. The unique IDs in the first container "slideshow" and "slideshow background" got switch. I've made the correction. If the static image continues to be a problem please let me know. 

*UPDATE - September 22nd, 2012 @11:00PM: I've had a few comments about how this slideshow doesn't work. I'll see what I can do about fixing the problem. I am sorry for the trouble and the inconvenience. 

Today I am finishing up my post on how to create a fading photo slide show in blogger. An example of the slide show can be seen here.

If you missed my previous post on this subject you can catch-up here.

Last time I focused on prepping the slide show. This time we'll be learning how to place the slide show on the blog. 

Like I said in my last post. I found the majority of my information from this site.  They do a really great job on teaching you how to create the slide show but there is a lot of information and I wanted to make it "easy" for non HTMLers to use the slide show. Plus they wrote the code for a generic website and I wanted to focus it for blogspot users, sorry wordspress.  However, we'll be using the sites provided javascript to make the slide show run.

The slide show is split into 3 different parts.

1. A container for the slideshow
2. Javascript to make the slideshow function
3. and another container that runs the slide show.

For our container we'll be using a <div> tag.  Basically a <div> tag defines a section in the HTML document. For our purposes the <div> tag will act as our container.

Before we can create our container we must first give our slide show a home on the blog. The slide shows home will be a custom widget that we create. To create the widget go to your blog setting and click on the design tab and then the page elements link.

After that you are going to want to click on the add a page element link.

In the window that appears scroll down til you find the HTML/javascript widget.

The configure widget window is where we will be building our slide show widget. Don't give the widget a name otherwise text will appear above the slideshow....unless you want that. You can say something like "Our trip to Disney"  or "Our Family Portraits." It's whatever you want. It's your widget.

Now that we have given our widget a home lets get to coding.

First thing we need to do is create the container for the slideshow and in this container we need to specify our slide shows background image, assign the background image a unique id, assign our container a unique id, specify our background images url, and define the dimensions of the slide show. 

My containers unique id is slideshow and my background images unique id is slideshowbackground. This is important for later and if you want to have more than one slide show on your blog. If you want more than one slide show you'll have to change the unique id's of the second slide show element.

You're going to want to type the following code into the content box.

<div id="slideshowbackground><img border="0" div="div" gt="gt" height="your height" id="slideshow" src="your images URL" width="your width" />

Like I explained above I've assigned my container a unique id and my background image a unique id. I've also specified my containers dimensions within this <div> tag. Those dimensions should match the dimensions of your images. Your width= should reflect your images width and your height= should reflect your images height. You'll also need to define your images URL source.

Your code should look similar to this

<div id="slideshowbackground"> <img border="0" height="234" id="slideshow" src="http://i556.photobucket.com/albums/ss5/ejspencer/test%20stuff/testforslideshow3-1.jpg" width="900" /></div>

I created 3 images that were 900px wide and 234 px high. So I have appropriatly placed those numbers in the code. My source images url is http://i556.photobucket.com/albums/ss5/ejspencer/test%20stuff/testforslideshow3-1.jpg.

DON'T PRESS SAVE & CLOSE THE CONFIGURE BOX WE ARE NOT DONE YET!

Just as a refresher here are my images once more. 

Following along okay?

Next thing we need to do is create the Javascript that defines the slide shows functions. This is easy peasy simply copy and paste the following after our containers division tags </div> end code.

<script type="text/javascript">

// Browser Slide-Show script. With image cross fade effect for those browsers

// that support it.

// Script copyright (C) 2004-2008 www.cryer.co.uk.

// Script is free to use provided this copyright header is included.

var FadeDurationMS=1000;

function SetOpacity(object,opacityPct)

{

  // IE.

  object.style.filter = 'alpha(opacity=' + opacityPct + ')';

  // Old mozilla and firefox

  object.style.MozOpacity = opacityPct/100;

  // Everything else.

  object.style.opacity = opacityPct/100;

}

function ChangeOpacity(id,msDuration,msStart,fromO,toO)

{

  var element=document.getElementById(id);

  var msNow = (new Date()).getTime();

  var opacity = fromO + (toO - fromO) * (msNow - msStart) / msDuration;

  if (opacity>=100)

  {

    SetOpacity(element,100);

    element.timer = undefined;

  }

  else if (opacity<=0)

  {

    SetOpacity(element,0);

    element.timer = undefined;

  }

  else 

  {

    SetOpacity(element,opacity);

    element.timer = window.setTimeout("ChangeOpacity('" + id + "'," + msDuration + "," + msStart + "," + fromO + "," + toO + ")",10);

  }

}

function FadeInImage(foregroundID,newImage,backgroundID)

{

  var foreground=document.getElementById(foregroundID);

  if (foreground.timer) window.clearTimeout(foreground.timer);

  if (backgroundID)

  {

    var background=document.getElementById(backgroundID);

    if (background)

    {

      if (background.src)

      {

        foreground.src = background.src; 

        SetOpacity(foreground,100);

      }

      background.src = newImage;

      background.style.backgroundImage = 'url(' + newImage + ')';

      background.style.backgroundRepeat = 'no-repeat';

      var startMS = (new Date()).getTime();

      foreground.timer = window.setTimeout("ChangeOpacity('" + foregroundID + "'," + FadeDurationMS + "," + startMS + ",100,0)",10);

    }

  } else {

    foreground.src = newImage;

  }

}

var slideCache = new Array();

function RunSlideShow(pictureID,backgroundID,imageFiles,displaySecs)

{

  var imageSeparator = imageFiles.indexOf(";");

  var nextImage = imageFiles.substring(0,imageSeparator);

  FadeInImage(pictureID,nextImage,backgroundID);

  var futureImages = imageFiles.substring(imageSeparator+1,imageFiles.length)+ ';' + nextImage;

  setTimeout("RunSlideShow('"+pictureID+"','"+backgroundID+"','"+futureImages+"',"+displaySecs+")",displaySecs*1000);

  // Cache the next image to improve performance.

  imageSeparator = futureImages.indexOf(";");

  nextImage = futureImages.substring(0,imageSeparator);

  if (slideCache[nextImage] == null)

  {

    slideCache[nextImage] = new Image;

    slideCache[nextImage].src = nextImage;

  }

}

</script>

Make sure you copy the entire thing. It's a long code.

The last thing we need to do is create a container that runs the slide show and that defines the images that we want to use for the slide show.

Paste the following code into your configuration box. After the javascripts end code </script>

<script type="text/javascript"> RunSlideShow("slideshowbackground","slideshow","your list of images",5); </script>

In place of your list of images you're going to list the direct link url of all your images. My three urls are

1. http://i556.photobucket.com/albums/ss5/ejspencer/test%20stuff/testforslideshow3-1.jpg
2. http://i556.photobucket.com/albums/ss5/ejspencer/test%20stuff/testforslideshow2-1.jpg
3. http://i556.photobucket.com/albums/ss5/ejspencer/test%20stuff/testforslideshow-1.jpg

you'll list them within parenthesis separated ONLY by a comma. My direct link list should look like this - "http://i556.photobucket.com/albums/ss5/ejspencer/test%20stuff/testforslideshow3-1.jpg, http://i556.photobucket.com/albums/ss5/ejspencer/test%20stuff/testforslideshow2-1.jpg, http://i556.photobucket.com/albums/ss5/ejspencer/test%20stuff/testforslideshow-1.jpg"


REMEMBER - you need to list your background image first. If you don't the slide show will do crazy things. I totally learned that the hard way.

If you notice in our slide show run container we have listed the unique id's of our slide show and slide show background. If you want to have multiple slide shows you're going to want to change the unique id's in your slide shows container div and in your run container div. I don't know if you will have to repeat the javascript I haven't tried it yet. You HTML adventures try it and let me know.

Your run slide container division code should look like this

<script type="text/javascript"> RunSlideShow("slideshow","slideshowbackground","http://i556.photobucket.com/albums/ss5/ejspencer/test%20stuff/testforslideshow3-1.jpg; http://i556.photobucket.com/albums/ss5/ejspencer/test%20stuff/testforslideshow2-1.jpg; http://i556.photobucket.com/albums/ss5/ejspencer/test%20stuff/testforslideshow-1.jpg",5); </script>

Now you can close the configure box and admire your coding work.

Happy Coding.

Please let me know if you are having troubles. This is my first time creating a tutorial and I want to make it easy to read and follow. 

Incase you need to make sure you've placed everything correctly, below is a final HTML code of the side shows configure box.

<div id="slideshowbackground"> <img border="0" src="http://i556.photobucket.com/albums/ss5/ejspencer/test%20stuff/testforslideshow3-1.jpg" width="900" height="234" id="slideshow" />
</div> 

<script type="text/javascript"> // Browser Slide-Show script. With image cross fade effect for those browsers // that support it. // Script copyright (C) 2004-2008 www.cryer.co.uk. // Script is free to use provided this copyright header is included. var FadeDurationMS=1000; function SetOpacity(object,opacityPct) { // IE. object.style.filter = 'alpha(opacity=' + opacityPct + ')'; // Old mozilla and firefox object.style.MozOpacity = opacityPct/100; // Everything else. object.style.opacity = opacityPct/100; } function ChangeOpacity(id,msDuration,msStart,fromO,toO) { var element=document.getElementById(id); var msNow = (new Date()).getTime(); var opacity = fromO + (toO - fromO) * (msNow - msStart) / msDuration; if (opacity>=100) { SetOpacity(element,100); element.timer = undefined; } else if (opacity<=0) { SetOpacity(element,0); element.timer = undefined; } else { SetOpacity(element,opacity); element.timer = window.setTimeout("ChangeOpacity('" + id + "'," + msDuration + "," + msStart + "," + fromO + "," + toO + ")",10); } } function FadeInImage(foregroundID,newImage,backgroundID) { var foreground=document.getElementById(foregroundID); if (foreground.timer) window.clearTimeout(foreground.timer); if (backgroundID) { var background=document.getElementById(backgroundID); if (background) { if (background.src) { foreground.src = background.src; SetOpacity(foreground,100); } background.src = newImage; background.style.backgroundImage = 'url(' + newImage + ')'; background.style.backgroundRepeat = 'no-repeat'; var startMS = (new Date()).getTime(); foreground.timer = window.setTimeout("ChangeOpacity('" + foregroundID + "'," + FadeDurationMS + "," + startMS + ",100,0)",10); } } else { foreground.src = newImage; } } var slideCache = new Array(); function RunSlideShow(pictureID,backgroundID,imageFiles,displaySecs) { var imageSeparator = imageFiles.indexOf(";"); var nextImage = imageFiles.substring(0,imageSeparator); FadeInImage(pictureID,nextImage,backgroundID); var futureImages = imageFiles.substring(imageSeparator+1,imageFiles.length)+ ';' + nextImage; setTimeout("RunSlideShow('"+pictureID+"','"+backgroundID+"','"+futureImages+"',"+displaySecs+")",displaySecs*1000); // Cache the next image to improve performance. imageSeparator = futureImages.indexOf(";"); nextImage = futureImages.substring(0,imageSeparator); if (slideCache[nextImage] == null) { slideCache[nextImage] = new Image; slideCache[nextImage].src = nextImage; } } </script> 

<script type="text/javascript"> RunSlideShow("slideshow","slideshowbackground","http://i556.photobucket.com/albums/ss5/ejspencer/test%20stuff/testforslideshow3-1.jpg; http://i556.photobucket.com/albums/ss5/ejspencer/test%20stuff/testforslideshow2-1.jpg; http://i556.photobucket.com/albums/ss5/ejspencer/test%20stuff/testforslideshow-1.jpg",5); </script>