Ramping up the Zemanta integration
Featured Blog: Cranky Pressman

Weekend Project: Replace your banner with a fancy image slideshow

This weekend's project is for Basic Templates but because there's Custom CSS involved, you'll need to be at the Pro Unlimited plan to implement it on your blog. Upgrade if you aren't currently taking advantage of the Pro Unlimited plan.

Slideshows are a great way to show off groups of images without taking up a lot of space on a site. They haven't always been easy to set up, though. Fortunately, we have simple code that you can add to your blog via the Advanced area in the Navigation Bar.

First, you'll need some images. Here are some points to keep in mind:

  • Width: Should be the same width as your overall blog width. The size of your current blog banner is a good place to start. Our example images will be 800 pixels wide.
  • Height: Shouldn't be too tall - the reader shouldn't have to scroll down to see blog content. Our example images will be 250 pixels tall.
  • File size: The more images you add to your slideshow, the more load time you're adding to your blog. Keep the physical image size, not dimensions, as small as possible without reducing the quality of the image itself. This will make both you and your readers happy.

These are the images we'll be using:


Notice that all of the images are the same height and width. We've also used text to incoporate the name of the blog so the whole shebang looks like a fancy blog banner.

Upload your images to Library > File Manager and keep that open in a tab so you can grab the image URLs later.

Now, on to the code. First, go to Blogs > Design > Custom CSS and add:

#banner { display: none; }

/* rotator in-page placement */
    div.rotator {
    display: none;

/* rotator css */
div.rotator { position: relative; }

div.rotator ul li {
 position: absolute;
 top: -10px;
 left: 0;
 list-style: none;

/* rotator image style */   
div.rotator ul li.show { z-index: 500; }

#nav { height: 280px; }

The #banner { display: none; } element simply hides the default banner. You'll change the #nav { height: 280px;} element to accomodate the height of your banner plus additional height for the navigation bar links, if you choose to keep those.

With your Custom CSS in place, you can add the image code to your Blogs > Design > Content page. Click the little pencil icon next to Navigation Bar. You'll be using the Advanced option.

Screen Shot 2012-05-03 at 6.04.57 PM
The code for your navigation bar links will likely already be there. We'll be adding in the image slideshow code under the closing </ul> tag, like this:

Screen Shot 2012-05-03 at 6.06.18 PM
The script code is as follows. We don't recommend making any changes to the code. Just copy the code and paste it right under the </ul> tag, as shown above.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript">
function theRotator() {
    //Set the opacity of all images to 0
    $('div.rotator ul li').css({opacity: 0.0});
    //Get the first image and display it (gets set to full opacity)
    $('div.rotator ul li:first').css({opacity: 1.0});
    //Call the rotator function to run the slideshow, 6000 = change to next image after 6 seconds

function rotate() {   
    //Get the first image
    var current = ($('div.rotator ul li.show')?  $('div.rotator ul li.show') : $('div.rotator ul li:first'));

    if ( current.length == 0 ) current = $('div.rotator ul li:first');

    //Get next image, when it reaches the end, rotate it back to the first image
    var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div.rotator ul li:first') :current.next()) : $('div.rotator ul li:first'));
    //Un-comment the 3 lines below to get the images in random order
    //var sibs = current.siblings();
        //var rndNum = Math.floor(Math.random() * sibs.length );
        //var next = $( sibs[ rndNum ] );

    //Set the fade in effect for the next image, the show class has higher z-index
    next.css({opacity: 0.0})
    .animate({opacity: 1.0}, 1000);

    //Hide the current image
    current.animate({opacity: 0.0}, 1000)

$(document).ready(function() {       
    //Load the slideshow
    $('div.rotator ul li').fadeIn(1000); // tweek for IE

Next, you'll paste in the following code for the images right under the script code. This is starter code, you'll switch out the image and link URLs with your own.

<div class="rotator">
    <li class="show">
<a href="http://example.typepad.com"><img src="https://example.typepad.com/assets/reallygreatblog1.png" width="800" height="250" border="0" alt="Blog home" title="Blog home" /></a>
<a href="http://example.typepad.com"><img src="https://example.typepad.com/assets/reallygreatblog2.png" width="800" height="250" border="0" alt="Blog home" title="Blog home" /></a>
<a href="http://example.typepad.com"><img src="https://example.typepad.com/assets/reallygreatblog3.png" width="800" height="250" border="0" alt="Blog home" title="Blog home" /></a>

Notice that each image links back to the main page of the blog. The slideshow is taking the place of your blog banner, so it should link back to the main page of the blog so your readers can get there easily.

Make sure to save your work on the Content page and you should see something like this on your blog:

Screen Shot 2012-05-03 at 6.24.49 PM

Only way cooler because it will be a moving slideshow and not just a static image. Awesome, right? If you implement this project on your blog, leave a comment with a link so we can see!



Can we make slide shows (of multiple images, rather then posting them separately as individual pictures) within blog posts the same way?


So I tried this but after implementing the code, it had the banner images one below the other, stacked vertically. It would fade into each new image but each one was below the previous one. And there was a random period off to the left-hand side of each image. Otherwise it worked. I took it down until I can get the code correct.

James Boschert

I am building this site for my friend James Boschert a historical fiction author. So I am experimenting on one of his pages that will have a lot of visual material from his research. It's fun...I like it! I wonder though if it is possible to control the time? I would like it to change maybe a little slower...thanks for this!


James Boschert

Also -- is it possible to get it to stop after it's run through the slides? I think people might go cross-eyed trying to read or follow a blog with the banner constantly changing. It's cool for the first 30 seconds -- but I can see it getting really annoying if doesn't stop after a while. Thanks!


James - You can use the setInterval('rotate()',4000) to control the time.

If you change the (4000) to (5000) or (6000), for example, it will alter the speed of the slide rotation (4000 = 4 seconds, for example).

The comments to this entry are closed.