What’s Better Than a Slideshow? a Triple Slideshow!

Today we’re going to build a web page that uses not one but three separate slideshows that come together to look like one seriously dynamic element. This effect is perfect for any designer or photographer portfolio.

Along the way we’ll be using some extremely basic HTML, CSS and jQuery. Open up a text editor and follow along to build your own!

Inspiration

I was recently browsing through our awesome design gallery and came across Jessica Kripp’s photography portfolio, shown below. I was instantly impressed with the sort of photo slideshow wall that occupied the homepage.

screenshot

Here we have not just one, but three distinct photo slideshows running independently, yet designed in a synergistic fashion as a single unit. It’s a really cool effect that I’ve never seen before. It may be a little processor intensive, but it’s still quite fun.

Today we’re going to jump in and build one of these to see how it’s done. We’ll be using HTML, CSS and jQuery, but don’t let any of that intimidate you, it’s all very easy and will be perfect for any beginners.

Step 1: Basic HTML

The simplest way to approach this project is to get the basic page layout and design work out of the way before we start playing with the JavaScript. What that means is that we’ll design the page with static images and then go back and add in the slideshow functionality.

To begin, create a basic container followed by three divs, each containing one image. I know, we’re already getting a little div heavy, but the jQuery plugin that we’re going to be using later for the slideshow requires that each of these images has its own parent container.

[/code]

You might notice that my images seem a little odd. I’m using LoremPixum, an awesome new service that allows you to insert placeholder images of any size. In the above code I’ve grabbed three images: one at 800x300px and two at 400x300px.

Step 1 Preview

At this point, your page should just contain three images stacked on each other like so. Next we’ll style this up to look pretty.

screenshot

Step 2: Basic CSS

First up, let’s add some basic body styles. Here I’ve tossed in the most basic of resets, colored the background and centered the container div. For the container, I’ve given it a width equal to that of my largest image, offset it 50px from the top of the page and set the left and right margins to “auto”, which centers the div horizontally.

Next up, we style the photo divs. The most important thing here is that I set the float of the smallPhoto1 to left and that of smallPhoto2 to right. This will ensure that they flow correctly and bump right up against each other (if you still have layout issues, experiment with a clearfix div). I also added in height values for each. Long-term these don’t seem to be necessary but I was having some layout issues at this stage without them.

Step 2: Preview

After the CSS above, your page should look nice and clean with a dark background and a tight photo grid as shown in the preview below.

screenshot

Step 3: Third Party Tools

Now that our page is basically finished as far as layout is concerned, it’s time to get ready to make the page more dynamic. To do this, we’ll need to load in two JavaScript tools.

The first is a library that requires no introduction. jQuery is everyone’s favorite JavaScript extension that generally makes life easier whether you’re creating complex animations or simply want a better way to target specific elements.

screenshot

To make sure I have the most current version of jQuery, I always jump over to ScriptSrc, where you simply click a button to copy the latest build’s link to your clipboard.

<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

The real engine behind our slideshows today will be jQuery Cycle a plugin that makes it super easy to build jQuery slideshows on the fly.

screenshot

We’ll see how to implement this in the next step. For now you can include the following script in your header.

<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>

Modernizr

If, like me, you like to use HTML5 and CSS3, you’ll want to also toss in Modernizr just to make sure everything stays as compatible as possible with IE.

Step 4: Bringing the Slideshows to Life

Implementing jQuery Cycle is super easy. There are tons of options and effects but for today’s purposes we’re going to use a bare minimum of the available functionality.

To get started, let’s refine our HTML a little. jQuery Cycle will look for anything with the class of “slideshow” and create a slideshow from its children. To accommodate this, we add the slideshow class to our three image divs and add two more images to each. This will make is so that each image cycles through three iterations.

<div id="container">

	<div id="bigPhoto" class="slideshow">
		<img src="http://lorempixum.com/800/300/city/1" />
		<img src="http://lorempixum.com/800/300/city/2" />
		<img src="http://lorempixum.com/800/300/city/3" />
	</div>

	<div id="smallPhoto1" class="slideshow">
		<img src="http://lorempixum.com/400/200/city/4" />
		<img src="http://lorempixum.com/400/200/city/5" />
		<img src="http://lorempixum.com/400/200/city/6" />
	</div>
	
	<div id="smallPhoto2" class="slideshow">
		<img src="http://lorempixum.com/400/200/city/7" />
		<img src="http://lorempixum.com/400/200/city/8" />
		<img src="http://lorempixum.com/400/200/city/9" />
	</div>
	
</div>

Next, we want to define some specific functionality for each of the three slideshows. This is done by targeting each ID with jQuery and then applying a few specifications. Below I’ve set a delay, speed and effect for each section, feel free to play with these so that you have something unique.

For now, the only property I’ve changed between the three is delay. I did this to create a sort of staggered effect with the image changes. By default, each slideshow would progress at the same rate, as with the photography site we saw at the beginning of the article. However, I thought it seemed a little more interesting to have the slideshows offset.

$(document).ready(function() {

$(‘#bigPhoto’).cycle({ delay: 300, speed: 2000, fx: ‘fade’ });

$(‘#smallPhoto1’).cycle({ delay: 3000, speed: 2000, fx: ‘fade’ });

$(‘#smallPhoto2’).cycle({ delay: 5000, speed: 2000, fx: ‘fade’ }); });
[/code]

Step 4 Preview

With that, your triple slideshow should be up and running! Click here or on the image below to see a demo.

screenshot

Step 5: Finishing off the Page

With that, we could be finished, but our page is looking a little plain so let’s add a little bit of interest shall we? The first thing I want to do is add a simple headline.

Headline

For the headline HTML, all we have to do is throw in an h1 right above our bigPhoto div.

<h1>Design Shack: Slideshow Example</h1>

<div id="bigPhoto" class="slideshow">
	<img src="http://lorempixum.com/800/300/city/1" />
	<img src="http://lorempixum.com/800/300/city/2" />
	<img src="http://lorempixum.com/800/300/city/3" />
</div>

Next up, we throw in some basic CSS to style the headline. I wanted to make the font as thin as possible so I threw in CSS-Trick’s Better Helvetica setup along with a text-shadow.

The text-shadow is my own trick for creating thinner typography. It turns out, if you apply a text-shadow that’s the same color as the background, the result is a slightly thinner looking font. If it only works in a few browsers, no biggie, the other styles are still enough to make the type look nice.

Below you can see the result of our efforts. It’s not much, but when combined with the next step it will definitely help create a more finished-looking product.

screenshot

Photo Tag

The next thing I want to do is add a label over the top of the slideshow. This is an important exercise because jQuery Cycle has some weird effects on the page hierarchy that make this a bit difficult.

The first step here is to create a new div that will serve as our little tag. This requires only a single line of HTML right under the h1 that we just set up.

Design Shack: Slideshow Example
Photographic Slideshow Wall

[/code]

Now let’s add some styling. We’ll make the background the same color as the the headline for consistency and add some padding to give it some weight. Also, I set the position to absolute and gave it some negative margin so that it will stick out from the slideshow a little on the left side. Finally, I added a basic box shadow to help it show up on different colors.

The problem here is that, even though the tag is higher in the HTML hierarchy, it ends up getting covered up by the slideshow. You can only catch a quick glimpse of it between slides:

screenshot

This is easy enough to fix with a little z-index magic. Simply set the z-index of the tag to “1” and that of the bigPhoto div to “-1”. This will make is so that the tag sits on top of the slideshow.

screenshot

Finished Product: Live Demo

With that, we’re all done! Feel free to have a look around the live demo to see our creation in action.

screenshot

Conclusion

Hats off to the designer behind Jessica’s site for the cool idea of combining multiple slideshows. Duplicating this effect made for a great tutorial on using HTML, CSS and JavaScript to create simple but stunning slideshows.

Be sure to push beyond the example above and experiment with different layouts and effects. Obviously, as you add more slideshows the more your page will get bogged down but otherwise you’re limited only by your creativity!