Design Shack — Web Design Gallery, Articles & Community

Photography websites nearly always run on Flash. Adobe’s increasingly notorious technology simply does an excellent job of displaying imagery in a dynamic way that’s perfect for photography showcases. However, there are a few downsides.

First, it’s not always easy to find a quality, free slideshow template to start from, and if you’re not a Flash developer, this could lead to significant costs. Secondly, the world is in quite the love/hate relationship with Flash at the moment, with many developers switching to JavaScript, CSS3 and HTML5 where possible.

So today we’re going to build a beautiful, Javascript-powered photography site with a full-screen slideshow. Literally all of the heavy lifting will be done by an awesome free jQuery resource so our job will be mostly customization. Let’s get started!

What We’re Building

It’s always good to see where it is that you’re going before you get there, click the link below to see a live demo of the page we’ll be building today.

Click for Live Demo

Getting Started: Finding the Perfect Plugin

The great thing about working with jQuery is the immense amount of free resources out there that you have to work with. Other developers have gone before you and spent hours creating quality plugins that you can use completely free of charge.

We’ve addressed the idea of a full-screen image background on Design Shack in the past, but the plugin we used had no slideshow feature so we were pretty much stuck with a static image. Photography websites frequently want to show off as much of their work as possible right off the bat, and nothing makes a strong impression quite like a giant slideshow that fills the browser window.

After no small amount of searching, I came across a simply fantastic plugin from the guys over at BuildInternet called Supersized, you may have noticed this plugin in this week’s freebie roundup.

If you want to follow along, go download this plugin and duplicate the “Default.html” file located inside. There are a few sample HTML files included and this one will provide the best place to start for our project.

Next, open up this file in your browser to get a sense of what we have to work with. As you can see, there’s already an awesome full-screen slideshow in place and some really nifty controls at the bottom.

I actually really love these controls but to show you that you’re not stuck into this design, we’ll be scrapping those and letting the slideshow run autonomously. We’ll get into the usability implications of this later. First, let’s put aside the plugin for now and design some slides.

Slide Design

The layout of our basic homepage will be almost completely taken up by our photo slideshow. If you have good photography to work with, your job as a designer has the potential to become significantly easier because you need only leverage that imagery properly.

To make things easy, we’ll throw in what little message we want into the slides. It won’t be live text so SEO definitely suffers a bit, so you can incorporate actual text and lay it over the slides if you think this is a major issue. Basically you would just create an absolutely positioned div, fill it with some text and make sure it stands out properly against your background images. We’ll see this process in action later with our navigation menu.

To begin, we’ll create the content slides. These basically just help introduce the site and don’t really contain any information that you wouldn’t be able to find on the About page in a more user friendly format. These slides will be dispersed among the photo slides and will help break that content up a little.

Create a new 1200px by 800px document in Photoshop and fill it with #0e1120. Next, apply a really heavy Inner Shadow to give it a nice vignetted feel like in the image below.

Now fill this slide with some text and a logo to introduce the site. In the slide below I created a simple welcome message. For the smaller type I used Trajan (cliche but effective) and for the logo I used a free font called Angelic War. You can download this font at DaFont.com.

Notice that I gave a slight Outer Glow to the logo. this helps set it apart from the rest of the text and produces a nice effect on the dark background.

Next, I duplicated this design twice and placed alternate messaging on these slides discussing the other services offered by the photography company. The text closely follows the same formatting as the first slide. Repetition is a simple and very important aspect of design and you should always look for ways to implement it.

Choosing the Photos

For the rest of the slides, we’ll obviously want to use some photography. After the first intro slide (welcome/wedding), we’ll place some wedding photos. After the second intro slide (engagement) we’ll place some photos of happy couples and after the third intro slide (family/senior), we’ll place some family photos.

Our photography business is fictitious, but I just happen to be a photographer so I’ll grab some images from my own portfolio to use as filler for this project. I chose the following six images and saved each out at the same size as our intro slides.

Scrapping the Slideshow Controls

Now, making the slideshow completely autonomous might freak out the usability police a little. If you disagree, simply leave the controls there! Deeper into the site where the individual project slideshows would be, I would definitely place controls so clients and potential customers could easily go back and forth and select specific images. However, on the home page I just want a nice and simple scrolling message that repeats itself without any necessary user interaction.

To accomplish this, go into the Defautl.html file and comment out or delete everything below the “supersized” div and above the closing body tag. The following code should be all that is in your body.

Inserting Your Own Slides

Now scroll up to the upper portion of the HTML page where all of the script tags are located. Here you will find the controls for the slideshow, it should be easy to spot the list of slides. Notice that the current slides have titles, links, etc. We don’t want our image to link anywhere and we scrapped the bottom bar that showed the title so we can drastically simplify this section and list out our slides as follows:

$(function(){
	$.fn.supersized.options = {  
		startwidth: 1200,  
		startheight: 800,
		vertical_center: 1,
		slideshow: 1,
		navigation: 1,
		thumbnail_navigation: 1,
		transition: 1,
		pause_hover: 0,
		slide_counter: 1,
		slide_captions: 1,
		slide_interval: 6000,
		slides : [
			{image : 'slides/slide-1.jpg'},
			{image : 'slides/slide-2.jpg'},  
			{image : 'slides/slide-3.jpg'},
			{image : 'slides/slide-4.jpg'},
			{image : 'slides/slide-5.jpg'},
			{image : 'slides/slide-6.jpg'},
			{image : 'slides/slide-7.jpg'},
			{image : 'slides/slide-8.jpg'},
			{image : 'slides/slide-9.jpg'}
		]
	};
 $('#supersized').supersized(); 
});

Notice that I’ve set the “startwidth” and “startheight” to the size of our slides. I’ve also set the “slide_interval” to 6000. This will slow down the slideshow a bit from its default setting. You can leave the rest of these settings right where they are, just make sure your slides are listed at the bottom and that your slide JPGs are located in the slides folder.

Navigation HTML

Now your slideshow should be up and running with your very own custom slides. However, it’s not a homepage until you have a way to find the rest of the content. To finish off our site, we’ll build a simple navigation menu and place it at the bottom of the page where the slideshow controls used to be.

The HTML here is super simple, just throw an unordered list below the “loading” div in your body.

 


	

		
ShutterPics Photography
		
About
		
Wedding
		
Engagement
		
Family
		
Prices
		
Contact
	

Navigation CSS

Now, we want to style this to be a bar along the bottom. Fortunately, there already was a bar along the bottom when we first downloaded the plugin so we can just steal some of this styling and tweak it for our own purposes. Below, I made the bar 40px high and set its color with RGBa so I could have some transparency.

#navBar {
	width:100%; 
	height: 40px; 
	position:absolute; 
	bottom:0; 
	overflow:auto; 
	z-index:4;  
	background: rgba(0, 0, 0, 0.8);
}

Next, we need to apply lots of styling to different parts of the unordered list. We need to style the list itself, float the list items so they appear inline and define the link/hover colors.

#navBar ul {
	list-style: none;
	margin-left: 60px;
	line-height: 40px;
	font-family: Helvetica, Arial, "Lucida Grande", sans-serif;
	font-size: 16px;	  
}

#navBar ul li {
	float: left;
	margin-right: 30px;
}

#navBar ul li a {
	color: #fff;
}

#navBar ul li a:hover {
	color: #52caf5;
}

Now, for my final trick, I want to style the first element in the list a little differently. This will serve as an ever-present identifier for the site and a link back to the homepage. By styling the first child of the list, I can give this element different margins and a different type treatment to set it apart from the others.

#navBar ul li:first-child {
  margin-right: 60px;
  font-family: Georgia, sans-serif;
  font-variant: small-caps;
  font-size: 18px;
}

You can see the effect of this in the image below. The item still serves the same basic purpose as everything else in the list, it’s simply given special visual treatment because it’s also the name of the site.

Conclusion

With that, we’re all finished. From here you would code out the rest of the pages to match the design you’ve setup on the homepage. Once again, be sure to stop by the demo to see it in action.

Leave a comment and let us know how you would improve what I’ve done here. I’d love to hear what you’d change and what you think should stay the same. Thanks for reading!