After several complaints about the slideshow not working correctly I have decided to make a new tutorial with a new slideshow method. It's the same method Loving Life Designs uses on our home/landing page.
This new method uses the s3slider created by Boban Karišik. You can see a demonstration and read the workshop on his website. My method doesn't implement the text overlay. I wanted my slideshow, for the home page, to be plain and simple. But I'll be showing you how to add the text over lay if you would want it.
First thing you are going to want to do, just like I explained in part one, is determine how large you want the slideshow to be. In my slideshow example site, my images are 850px wide and 423px heigh. It's important that all the images are the same size and you know the size of your images. Write it down somewhere you'll need to remember.
These are some of the images I used for the slideshow on our home page and on my example site. Michelle created them. I love them.
To start, you'll want to go your template tab.
Then you'll click on Edit HTML.
A new window will pop up and you'll want to paste the code, provided above, directly below.
<b:skin>. Just like pictured below. It's at the top - don't scroll down.
Save your template - But don't close the box just yet. *you should've, before you started, saved a backup of your blog.
Now, we are going to add the following CSS to the template. (This CSS is for a slideshow without the overlay text - keep reading to find out how to add that back in.)
Scroll down til you see.
]]></b:skin>. Directly above that you'll want to paste the code, provided in the box above. Just like I have pictured below.
This is why remembering what your images size is important. You'll want to replace my width of 850px to that of your images width both in the #s3slider and in the #s3sliderContent. Then you'll want to replace my height of 423px with that of your images height. You only need to change it in the #s3slider.
Save your template and now close this window.
If you would like to add the overlay text - replace the following code ---
---with this code.
Play around with the code and make it what you want. You can change the text. You can change the background color. right now it's set to black and the opacity makes it kind of grey. Play around and make it what you want it to be. - If you need help leave a comment and I'll post another tutorial about it.
FINALLY, we add the HTML to a widget box.
To do this first, you'll want to click on layout.
In the configure box paste the following HTML
You'll want to replace the # with your images url and change the span to text that matches your image (you don't really have to if you don't use the overlay. )
if you want to add additional images add the following
<div class="clear s3sliderImage"></div>.
This is what my code looks like.
Save and cross your fingers - you're done.
What do you think? How did it turn out? Leave a comment linking to your blog.
UPDATE - March 6, 2013
Lee asked if there was a way to slow down the transitions between the images and if you could add a link to the images. Both are a pretty simple fix, however, I'll only be getting to fixing the slideshow transition length today.
The jquery function script has two options. In the current tutorial the only option change we have implemented is the timeOut function which controls the length of time the image is on the screen. The default is 6000. In the current tutorial I have it set to 4000, making it a little faster than the default. It's in milliseconds, by the way, so add or subtract 1000 if you want it on for a longer period of time or a shorter period of time.
The second option is the length of the transition. In the current tutorial I am using the default length of 1000 (about a second of time). It's using the default because I haven't told it other wise. If you want about one second to remain the current transition speed no need to add the following. If you would like to have it be a slower transiton add fadeTime (make sure the T is capitalized) just behind timeOut:4000 but before });
In the example below. I've added a transition speed of about 2 seconds. Make sure there is a comma separating the two function controls.