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>

How to Create an Automatic Fading Slideshow in Blogger Part 1

Today I taught myself how to create a fading photo sideshow for blogger.

To see a working example of the slide show click on the image below.

At first I thought it was going to be a daunting task but once I started reading about it, researching it and examining HTML code I found out it was pretty straight forward and really easy to do.

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 seems to be split up into 3 different parts. A container for the slide show (we'll be using a simple div tag to define the container) The javascript to make make the slide show function and a container that "runs" the slideshow. More on that later. 

Today we will be focusing on prepping the slideshow.

In my example slide show I placed it below my blogs header but above my posts and sidebar. You can easily make this slide show directly above your post or have it be part of your sidebar, you'll just have to prep a little differently than you would a slide show directly below the header.

First things first you want to figure out how wide your intended area is.

If you're planning on placing it below the header than your going to want to find out the dimensions of the outer wrapper. If you are planning on placing it directly above your posts only, then you're going to want to find the dimensions of your main wrapper and if you are planning to place this somewhere in your side bar, you're going to want to find the dimensions of your sidebar wrapper.

In your blogger setting click on your design tab and then click on the edit HTML link.

Next your going to want to locate the following line of HTML code.

#outer-wrapper {

If you intend to place the slide show above your posts, beside your sidebar, locate the following line of HTML code.

#main-wrapper {

If you intend to place this somewhere in your sidebar, locate the following line of HTML code.

#sidebar-wrapper {

Make note of the width of your intended areas wrapper.  This width will be the width of your image collage.  If you don't make all your images the same size the slide show won't work correctly and will "jitter" as it fades between the photos. *note: If your using one of the new blogger templates your going to want to go into template designer and find out your blogs widths from the adjust widths tab. 

Now comes the fun part. Open your favorite photo editing software and create a few collages to use for your slide show. The following images are the images that I created for my simple slideshow. (I repeated the same three images to make it easier, and plus I didn't want to search my computer for the "perfect images" forever, I'm just lazy like that, plus I like these pictures I took when I went to Italy) I only created 3 different collages but you can have as many collages as you would like.

*NOTE: My outer wrappers pixel width is 900px and so I created these images at 900px wide and 243px high.

Once you've created your image collages you're going to want to upload them to a image hosting site. I used photobucket to host my images.

I guess that should keep you busy for the time being. Enjoy making those image collages. It should be loads of fun. Next installment will be on how to create the slide show.

Have fun and take luck.

A Dream Is A Wish Your Heart Makes Poster

We have a new poster for you to download and do with how you please. I think that it's a lovely little thing. I downloaded the "dream" font a few weeks ago for a wedding invitation and knew I wanted to use it on a design for a poster, I just couldn't find/figure out a good phrase to use it in... Then I watch Cinderella... Done!

I hope you like it. It's an 8 x10 and there are five colors for you to choose from.

Note* the green on the screen is neon like for the download but it's the color of the example above when you download it. 

As always, it's free!!!

Enjoy

Baby Boy Shower Invitation

Here is the boy version of the baby shower invitation that I posted yesterday.

Check that post for instructions on how to do the stroke around the lucky woman's name.

Download it here.




I hope you enjoy the card and remember, as always, it's free. Go crazy.

Free Baby Shower Invitation {Baby Girl}

Hi there,

It's been forever since we've posted anything. We are sorry for the absence we have been pretty busy.

This post comes with a rather embarrassing story.

I got an invitation to a friends baby shower. I had heard somewhere that the shower would be on the 28th of May, I don't remember if it was from her blog, her facebook page, or an email, it doesn't really matter. What matters is that I put it in my calendar as may 28th. I only thought I needed the invitation for the address.

So the 28th comes along. I have a gift, a card and a super cute gift bag, I get all dolled up and head over to the house. Knock on the door and low and behold the shower is next week, June 4th. It says so right on the invitation. right above the address.

I can't believe I didn't read the invitation. I felt like an idiot. Trying to save some form of dignity I handed the "soon to be host" the present, apologized for bothering her said that I can't make it next week, which is true, and walked away red faced and all. It was very very embarrassing.

The whole encounter made me want to design a baby shower invitation, mainly because I was staring at it for a very very long time asking myself how I could have missed the real date, and this is what I came up with.

Here is the download



I think it's pretty cute.

For the name in green your going to have to follow the following steps.

1. open the file
2. hide the simplified/rasterized jessica smith layer
3. unhide the jessica smith text layer.
4. type the name of the lucky woman
5. rasterized/simplify the lucky woman's name
6. go to file>edit>stroke
7. make the stroke color black and the point size 1 and make sure you have outside selected, it looks funny if you have center or inside selected, then press okay.

you now should have the lucky womans name in green and stroked with black.

I hope you enjoy the card and remember, as always, it's free. Go crazy.