February 27, 2013

How to add s3slider to Blogger - (Blog Tutorial)

A while back I wrote a post on how to create an automatic fading slideshow in Blogger. It was a two part post. Part one was about making images big enough for the slideshow and part two was about creating the slideshow in blogger.

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.



The next thing you need to do is add the following javascript code to your blog. *before you make any changes to your blog HTML you'll want to save a backup of your blog. If you don't know how to do that post a comment and I'll tell you. 

<script src='http://elizabethspencer.webs.com/jquery.js' type='text/javascript'/>
<script src='http://elizabethspencer.webs.com/s3Slider.js' type='text/javascript'/>

<script type='text/javascript'> 
$(document).ready(function() { 
 $(&#39;#s3slider&#39;).s3Slider({ 
 timeOut: 4000 
 }); 
}); 
</script>

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. </title> and above <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.)


#s3slider {
border:0px solid #ffffff;
margin: 0 auto 30px;
margin-left:10px;
width:850px; /* important to be same as image width */
height:423px; /* important to be same as image height */
position: relative; /* important */
overflow: hidden; /* important */
}

#s3sliderContent {
margin: 0px;
padding: 0px;
width:850px; /* important to be same as image width or wider */
position: absolute; /* important */
top: 0; /* important */
margin-left: 0; /* important */
}

.s3sliderImage {
float: left; /* important */
position: relative; /* important */
display: none; /* important */
}

.s3sliderImage span {
font-size:13pt;
}

.clear {
clear: both;
}

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 ---

.s3sliderImage span {
font-size:13pt; 

---with this code.

.s3sliderImage span { 
 position: absolute; /* important */ 
 left: 0; 
 font: 10px/15px Arial, Helvetica, sans-serif; 
 padding: 10px 13px; 
 width: 850px; 
 background-color: #000; 
 filter: alpha(opacity=70); /* here you can set the opacity of box with text */ 
 -moz-opacity: 0.7; /* here you can set the opacity of box with text */ -
khtml-opacity: 0.7; /* here you can set the opacity of box with text */ 
opacity: 0.7; /* here you can set the opacity of box with text */ 
color: #fff;  
display: none; /* important */ 
 top: 0; 
/* 
 if you put top: 0; -> the box with text will be shown at the top of the image 
 if you put bottom: 0; -> the box with text will be shown at the bottom of the image */ 
}

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.


Then click - where you want to add the slideshow - add a gadget.


Select HTML/Javascript


In the configure box paste the following HTML

<div id="s3slider">
    <ul id="s3sliderContent">
        <li class="s3sliderImage">
            <img src="#">
            <span>Your text comes here</span>
        </li>
        <li class="s3sliderImage">
            <img src="#">
            <span>Your text comes here</span>
        </li>
        <div class="clear s3sliderImage"></div>
    </ul>
</div>

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

<li class="s3sliderImage">
            <img src="#">
            <span>Your text comes here</span>
        </li>

above <div class="clear s3sliderImage"></div>.

This is what my code looks like.

<div id="s3slider">
<ul id="s3sliderContent">

<li class="s3sliderImage">
<img border="0" alt="Free Prints" width="850" src="http://i1251.photobucket.com/albums/hh552/lovinglifedesigns/Loving%20Life%20Slideshow/slideshow1.png" height="423" alt="free Prints"/>
<span>Free Prints</span>
</li>

<li class="s3sliderImage">
<img border="0" alt="Free Announcements" width="850" src="http://i1251.photobucket.com/albums/hh552/lovinglifedesigns/Loving%20Life%20Slideshow/slideshow5-1.png" height="423" alt="free Announcements"/>
<span>Free Announcements</span>
</li>

<li class="s3sliderImage">
<img border="0" alt="Free Poster Designs" width="850" src="http://i1251.photobucket.com/albums/hh552/lovinglifedesigns/Loving%20Life%20Slideshow/slideshow4-1.png" height="425" alt="Poster Designs"/>
<span>Poster Design</span>
</li>

<li class="s3sliderImage">
<img border="0" alt="Free Blogger Templates" width="850" src="http://i1251.photobucket.com/albums/hh552/lovinglifedesigns/Loving%20Life%20Slideshow/slideshow2-1.png" height="425" alt="Free Blogger Templates"/>
<span>Free Blogger Templates</span>
</li>

<li class="s3sliderImage">
<img border="0" alt="Custom Blog Designs" width="850" src="http://i1251.photobucket.com/albums/hh552/lovinglifedesigns/Loving%20Life%20Slideshow/slideshow3-1.png" height="425" alt="Custom Blog Design"/>
<span>Custom Blog Design</span>
</li>

<div class="clear s3sliderImage"></div>
</ul>
</div>

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. 

<script src='http://elizabethspencer.webs.com/jquery.js' type='text/javascript'/>
<script src='http://elizabethspencer.webs.com/s3Slider.js' type='text/javascript'/>

<script type='text/javascript'> 
$(document).ready(function() { 
 $(&#39;#s3slider&#39;).s3Slider({ 
 timeOut: 4000, fadeTime: 2000
 }); 
}); 
</script>

Creative Commons License

15 comments:

  1. Hi Elizabeth

    Once again, great post!

    I followed your instructions step for step and it worked perfectly.

    2 questions though:
    How can I slow down the transition from image to image.
    Can I hyperlink the image, maybe to point to current articles on my site?

    Many thanks

    Lee

    ReplyDelete
    Replies
    1. Those are good questions and super easy. I'll work on an update to the blog post and republish as soon as I can. I'm glad that you like the blog.

      Delete
    2. I've added instructions on how to change the transition time to the blog post. Let me know if it doesn't work. Thanks.

      Delete
    3. Perfect!

      I doubled it up the timeout to 8000, much better, for me anyways.

      Thanks again Elizabeth.

      Looking forward to the hyperlinks :)

      Delete
  2. I made a slideshow and put it in my header. Everything works pefectly! Thank you. My only problem is that I can't figure out how to center it. Any suggestions? Thanks!

    ReplyDelete
  3. Hi! Loved your tutorial, but I am having a problem. I can't seem to put more than 2 images. Is there anything I'm doing wrong? Thanks!

    ReplyDelete
  4. Thank you so so much!! I have spent HOURS looking for a tutorial for a java slideshow, and yours is by far the best one out there. You made my day :)

    ReplyDelete
  5. PLZ ADD HOW TO MAKE LINKS ON IMAGES..... TX A LOT FOR THIS +10000000

    ReplyDelete
    Replies
    1. To add links to your images, just above (img src="#") add (a href="#") and replace () with <> respectively.

      [Blogger won't let me post html code that it cannot understand into the comment]

      Delete
  6. Hey Elizabeth,

    Thank you for the awesome tutorial. The tutorial is very neatly and properly presented and the the slider is working perfectly. However, if i may point out that even after tweaking with the code i cannot seem to change the size of the text and the there is quite a gap between the slider and the widget below.

    Thanks
    Kaushal

    ReplyDelete
    Replies
    1. Well nevermind. Fixed it. I was just fiddling with the wrong value.

      -font: 10px/15px Arial, Helvetica, sans-serif;
      //change the 10px value to increase or decrease the font size.

      -padding: 10px 13px;
      //changing the 10px value in this case increases or decreases the box containing the text

      Delete
  7. Hey Elizabeth,
    The slider has stopped working. It seems it couldn't connect to www.elizabethspencer.webs.com links. Please fix it. I've applied your slider on my site: www.dominantwire.com and it has been working pretty well till now.

    ReplyDelete
  8. superb post........works perfectly

    ReplyDelete
  9. Thank you, thank you! At first when I tried this, a random text box/line showed up, and I couldn't figure out how to remove it. Then, I started again, and it worked just fine. SO happy with it! Thanks so much. The only tweak I'd love to make is to make the slideshow the same size as my header (it's directly below.) I'm guessing there are some margins involved that I don't know how to access to change? Don't know. If you have any tips, I'd love to hear! Here's my site: kristinawoodphotography.blogspot.com Thank you so much, again!

    ReplyDelete
  10. Hi Elizabeth,
    Thanks a lot for this slider. I have been using it in my website: www.dominantwire.com. I was wondering if it is possible to implement arrows in the slider so that the user can the navigate across various image slides? or could you maybe point me in the direction on how to do it?
    Thanks!

    ReplyDelete