Weekend Project: Replace your banner with a fancy image slideshow

May 11, 2012

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:

Reallygreatblog1
Reallygreatblog2
Reallygreatblog3

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 {
    position:relative;
    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
   
    setInterval('rotate()',4000);
   
}

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})
    .addClass('show')
    .animate({opacity: 1.0}, 1000);

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

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

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">
  <ul>
    <li class="show">
<a href="http://example.typepad.com"><img src="http://example.typepad.com/assets/reallygreatblog1.png" width="800" height="250" border="0" alt="Blog home" title="Blog home" /></a>
    </li>
    <li>
<a href="http://example.typepad.com"><img src="http://example.typepad.com/assets/reallygreatblog2.png" width="800" height="250" border="0" alt="Blog home" title="Blog home" /></a>
    </li>
    <li>
<a href="http://example.typepad.com"><img src="http://example.typepad.com/assets/reallygreatblog3.png" width="800" height="250" border="0" alt="Blog home" title="Blog home" /></a>
    </li>
  </ul>
</div>

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!

comments powered by Disqus

Welcome

Need help?

Follow us!

Typepad on FacebookTypepad on TwitterTypepad on Google+Typepad on PinterestSubscribe to Everything Typepad

Like us!

Typepad Newsletter

Still having trouble? Contact Support.