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.

1
2
3
4
5
6
7
8
9
10
11
<div id="container">
<div id="bigPhoto">
<img src="http://lorempixum.com/800/300/city/1" />
</div>
<div id="smallPhoto1">
<img src="http://lorempixum.com/400/200/city/4" />
</div>
<div id="smallPhoto2">
<img src="http://lorempixum.com/400/200/city/7" />
</div>
</div>