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!
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.
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
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.
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.
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.
Step 3: Third Party Tools
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.
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.
We'll see how to implement this in the next step. For now you can include the following script in your header.
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.
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.
Step 4 Preview
With that, your triple slideshow should be up and running! Click here or on the image below to see a demo.
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.
For the headline HTML, all we have to do is throw in an h1 right above our bigPhoto div.
Design Shack: Slideshow Example
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.
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
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:
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.
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.
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!