Advertisement

ShutterPress: Design & Code A Photo Portfolio Site (Day 3: HTML/CSS)

by

This Cyber Monday Tuts+ courses will be reduced to just $3 (usually $15). Don't miss out.

Today we're continuing the tutorial series for creating the ShutterPress design by converting it from a raw PSD to a functional website using HTML and CSS. By now, we've created the initial site design and gathered the required assets for coding. Now we're going to actually code it so it'll work in all major browsers!


Intro: Day 3, HTML/CSS Conversion

Today is all about converting our PSD design into a fully working HTML site! We'll walk you through the markup step by step, until we have a site that looks great on all major browsers. We'll be approaching this from an intermediate level of understanding, so if we move too quickly past any of the basic steps, feel free to ask any specific questions in the Comments section below.

A special shoutout goes to CodeMyConcept, who has graciously provided the code and tutorial for this day of the series!

If you missed the previous two days of this series, check them out here:

Ok, with our goals now clearly defined, let's begin!


Step 1 Basic Folder Structure and Layout

First, we start out by creating the basic folder structure for our project, which we definitely need to have to keep assets well structured and organized.

In this case, we're going to need a "css" folder with our main css file, an "images" folder and a "js" (Javascript) folder once the HTML and CSS is complete so we can add the slider, lightbox and accordion plugins. Also the index.html file in the root folder

name of tut

Then we create the Basic HTML structure of the layout with the Left and Right sections. We're going to be using a wrapper div to contain and center everything and our Left and Right containers inside, as well as a div at the top and bottom of the wrapper to help us with the rounded corners while keeping the layout flexible.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>ShutterPress</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" ></meta>
	<link rel="stylesheet" type="text/css" href="css/all.css" media="screen" />
</head>
<body>
<div id="wrapper">
	<div id="wrapper-top">
	</div> <!-- END WRAPPER TOP -->
	<div id="left">
		LEFFT MENU HERE
	</div> <!-- END LEFT MENU -->
	<div id="right">
		RIGHT CONTENT HERE
	</div> <!-- END RIGHT CONTENT -->
	<div id="wrapper-bottom">
	</div> <!-- END WRAPPER BOTTOM -->
</div> <!-- END WRAPPER -->
</body>
</html>

We actually prefer to create the HTML before writing any CSS, although some people do a section of HTML and CSS at the same time and then move on to the next section. We have found that doing the whole HTML first helps us think of the CSS in advance and everything else that might be needed, such as Javascript or PHP includes. All I add at this point is my CSS Reset.


Step 2 Left Menu HTML

So we start by coding the left side menu. Here, we're going to need an h1 tag and a link for our logo, and an unordered list for our menu items. We also need to nest another unordered list on the third li tag fo our submenu, and do the same with some dummy items on the second li tag just so we can see our javascript accordion working later on.

We also need to add some "opened" and "closed" classes to the links and the submenu so we can control the icons and which submenu is opened by default, and the active class to highlight the page we're currently viewing.

<h1 class="logo"><a href="#">ShutterPress</a></h1><!-- END LOGO -->
<ul class="menu">
	<li><a href="#">Home</a></li>
	<li>
		<a class="closed" href="#">About the Studio</a>
		<ul class="sub-menu closed">
			<li><a href="#">Item 1</a></li>
			<li><a href="#">Item 2</a></li>
			<li><a href="#">Item 3</a></li>
		</ul> <!-- END SUB MENU -->
	</li>
	<li>
		<a class="opened" href="#">Image Galleries</a>
		<ul class="sub-menu">
			<li><a class="active" href="#">4X4 Gallery</a></li>
			<li><a href="#">Portrait Gallery</a></li>
			<li><a href="subpage.html">Slider Gallery</a></li>
		</ul> <!-- END SUB MENU -->
	</li>
	<li><a href="#">Contact</a></li>
</ul> <!-- END MENU -->

Now, right after that come the social icons and search field in our Left section located at the bottom. So, we'll be creating a container div for the bottom section and separate [divs] for each of the two parts inside that container.

For the Social icons we'll need a span for the text and a list for the icons, each with a class to help get the correct icon image and its respective hover state.

For the Search section, we'll create a form and divs containing the corresponding inputs to help float them and add the backgrounds and icons. Doing this rather than applying the styles directly to the inputs works a lot better to avoid cross-browsing issues with line heights and text indentation.

<div id="left-bottom">
<div class="social">
		<span>Social:</span>
		<ul>
			<li><a class="tumblr" href="#">tumblr</a></li>
			<li><a class="picasa" href="#">picasa</a></li>
			<li><a class="vimeo" href="#">vimeo</a></li>
			<li><a class="flickr" href="#">flickr</a></li>
			<li><a class="twitter" href="#">twitter</a></li>
			<li><a class="facebook" href="#">facebook</a></li>
			<li><a class="rss" href="#">rss</a></li>
		</ul>
	</div> <!-- END SOCIAL -->
	<div class="search">
		<form action="#" method="get">
			<fieldset>
				<div class="left">
					<input type="text" value="" />
				</div>
				<div class="right">
					<input type="submit" value="" />
				</div>
			</fieldset>
		</form>
	</div> <!-- END SEARCH -->
</div> <!-- END LEFT BOTTOM -->

So here's how it looks in our browser along with the CSS Reset


Step 3 Right Content HTML

Now that we have completed our left menu, we can start coding the Right content part for the thumbnail gallery.

So first we create an unordered list of images inside links so they're click-able for our lightbox plugin, and after that we create a div to contain our previous and next buttons.

<ul class="thumbnails">
	<li><a href="#"><img src="http://webdesigntutsplus.s3.amazonaws.com/136_ShutterPress/code_phase/images/gallery/thumb1.jpg" alt="thumbnail" width="150" height="121" /></a></li>
	<li><a href="#"><img src="http://webdesigntutsplus.s3.amazonaws.com/136_ShutterPress/code_phase/images/gallery/thumb2.jpg" alt="thumbnail" width="150" height="121" /></a></li>
	<li><a href="#"><img src="http://webdesigntutsplus.s3.amazonaws.com/136_ShutterPress/code_phase/images/gallery/thumb3.jpg" alt="thumbnail" width="150" height="121" /></a></li>
	<li><a href="#"><img src="http://webdesigntutsplus.s3.amazonaws.com/136_ShutterPress/code_phase/images/gallery/thumb4.jpg" alt="thumbnail" width="150" height="121" /></a></li>
	<li><a href="#"><img src="http://webdesigntutsplus.s3.amazonaws.com/136_ShutterPress/code_phase/images/gallery/thumb5.jpg" alt="thumbnail" width="150" height="121" /></a></li>
	<li><a href="#"><img src="http://webdesigntutsplus.s3.amazonaws.com/136_ShutterPress/code_phase/images/gallery/thumb6.jpg" alt="thumbnail" width="150" height="121" /></a></li>
	<li><a href="#"><img src="http://webdesigntutsplus.s3.amazonaws.com/136_ShutterPress/code_phase/images/gallery/thumb7.jpg" alt="thumbnail" width="150" height="121" /></a></li>
	<li><a href="#"><img src="http://webdesigntutsplus.s3.amazonaws.com/136_ShutterPress/code_phase/images/gallery/thumb8.jpg" alt="thumbnail" width="150" height="121" /></a></li>
	<li><a href="#"><img src="http://webdesigntutsplus.s3.amazonaws.com/136_ShutterPress/code_phase/images/gallery/thumb9.jpg" alt="thumbnail" width="150" height="121" /></a></li>
	<li><a href="#"><img src="http://webdesigntutsplus.s3.amazonaws.com/136_ShutterPress/code_phase/images/gallery/thumb10.jpg" alt="thumbnail" width="150" height="121" /></a></li>
	<li><a href="#"><img src="http://webdesigntutsplus.s3.amazonaws.com/136_ShutterPress/code_phase/images/gallery/thumb11.jpg" alt="thumbnail" width="150" height="121" /></a></li>
	<li><a href="#"><img src="http://webdesigntutsplus.s3.amazonaws.com/136_ShutterPress/code_phase/images/gallery/thumb12.jpg" alt="thumbnail" width="150" height="121" /></a></li>
	<li><a href="#"><img src="http://webdesigntutsplus.s3.amazonaws.com/136_ShutterPress/code_phase/images/gallery/thumb13.jpg" alt="thumbnail" width="150" height="121" /></a></li>
	<li><a href="#"><img src="http://webdesigntutsplus.s3.amazonaws.com/136_ShutterPress/code_phase/images/gallery/thumb14.jpg" alt="thumbnail" width="150" height="121" /></a></li>
	<li><a href="#"><img src="http://webdesigntutsplus.s3.amazonaws.com/136_ShutterPress/code_phase/images/gallery/thumb15.jpg" alt="thumbnail" width="150" height="121"/></a></li>
	<li><a href="#"><img src="http://webdesigntutsplus.s3.amazonaws.com/136_ShutterPress/code_phase/images/gallery/thumb16.jpg" alt="thumbnail" width="150" height="121" /></a></li>
</ul> <!-- END THUMBNAILS -->
<div class="navigation">
	<a href="#" class="prev">Previous</a>
	<a href="#" class="next">Next</a>
</div> <!-- END NAVIGATION -->

At this point, we need to start slicing the thumbnails and saving them with their corresponding name from the HTML so we can have some inline images showing.

Here's how all our HTML should be looking in Firefox


Step 4 CSS Reset and Wrapper

Now for some styling we set up some general settings for the fonts, text and links colors and background image

/*------------------------------*/
/*  GENERAL RESET              */
/*----------------------------*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn,
em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label,
legend, table, caption, tbody, tfoot, thead, tr, th, td, hr, button {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	vertical-align: baseline;
	background:none;
}
ol, ul {list-style:none;}
h1, h2, h3, h4, h5, h6, li {line-height:100%;}
blockquote, q {quotes:none;}
q:before,
q:after {content: '';}
table {border-collapse:collapse; border-spacing:0;}
input,textarea,select{
	font:11px Arial, Helvetica, sans-serif;
	vertical-align:middle;
	padding:0;
	margin:0;
}
input:focus, textarea:focus {
	outline: none;
}

form,fieldset{border-style:none;}

html,
body {
   margin:0;
   padding:0;
   min-height:100%;
}

/*---------------------------------*/
/* GENERAL SETTINGS               */
/*-------------------------------*/
body {
      height:100%;
      font: 12px/12px "Lucida Sans", "Lucida Grande", sans-serif;
      color: #000;
      background: url('../images/bg.jpg') repeat #fff;
}
a {text-decoration:none; color: #000;}
a:hover {text-decoration:none; color: #0285da;}

Then we set up the wrapper styles so we can build the base of our layout, which we begin todo by defining the width of our wrapper and center it with a margin: 0 auto;

For the top and bottom divs that we defined earlier, we set up background images and the required dimensions to create our top and bottom rounded corners, and for the wrapper we set up a background image repeated in the Y axis that will cover our content containing the division line between the Left and Right Content.

For the wrapper-bottom div we need to set up a clear:both; because once I float my Right and Left containers the wrapper is going to collapse, so we need to prevent this by clearing the floats.

/*--------------------------*/
/*     WRAPPER             */
/*------------------------*/
#wrapper-top {
	background:url("../images/content-top.jpg") no-repeat scroll center top #FFFFFF;
	height:18px;
	width:994px;
}

#wrapper {
	width: 994px;
	overflow: hidden;
	margin: 64px auto 0;
	background:url("../images/content-bg.jpg") repeat-y scroll center center #FFFFFF;
}

#wrapper-bottom {
	background:url("../images/content-bottom.jpg") no-repeat scroll center top #FFFFFF;
	height:61px;
	width:994px;
	clear: both;
}

Here's the result in our browser:


Step 5 Left Menu CSS

Now that we have our wrapper ready we can move on with the content: first, we set up the width of both the Right and Left containers so we can float them to the right position.

/*--------------------------*/
/*     LEFT MENU           */
/*------------------------*/

/* Main Menu */
#left {
	width: 235px;
	float: left;
}


/*------------------------------*/
/*   RIGHT CONTENT             */
/*----------------------------*/

/* Thumbnail Gallery Content*/
#right {
	width: 758px;
	float: right;
}

Now we start styling the navigation by creating a sprite image for the logo, buttons and icons on the design.

This particular layout doesn't seem like it's going to grow in height, but we still want to keep things flexible just in case there's a future need of adding more elements to the navigation.

So we set up the Left container with a minimum height so the left-bottom div can be absolutely positioned without having to use a huge margin to push it down, this way if new elements are added the layout will still keep its original dimensions.

We also set up the links in the navigation to be displayed as blocks so the whole area can be clickable and not just the text and add the open and close backgrounds using their respective clases and adjusting the position of our sprite.

The sub-menu with a class 'closed' is set to display: none; so only the default one is showing.

/*--------------------------*/
/*     LEFT MENU           */
/*------------------------*/

/* Main Menu */
#left {
	width: 235px;
	float: left;
	min-height: 615px;
	position: relative;
}

#left .logo a {
	background:url("../images/sprite.png") no-repeat scroll 0 0 transparent;
	display:block;
	height:32px;
	margin:8px auto 0;
	text-indent:-999999px;
	width:190px;
}

#left .menu {
	width: 100%;
	border-top: 1px solid #eaeaea;
	margin-top: 30px;
}

#left .menu li a {
	display: block;
	height: 35px;
	line-height: 35px;
	padding-left: 22px;
	border-bottom: 1px solid #eaeaea;
}

#left .menu li a.active {
	color: #0285DA;
	border-right: 1px solid #fff;
}

#left .menu li a.closed {
	background:url("../images/sprite.png") no-repeat scroll 46px -231px transparent;
}

#left .menu li a.opened {
	background:url("../images/sprite.png") no-repeat scroll 46px -257px transparent;
}

#left .menu li .sub-menu li a {
	padding-left: 38px;
}

#left .menu .sub-menu.closed {
	display: none;
} 

#left-bottom {
	position: absolute;
	bottom: 0;
	width: 100%;
}

For the bottom social icons we set up the images using the respective clasess and setting up the background images using postions, this goes as well for the hover status.

/* Social */
#left-bottom .social {
	overflow: hidden;
	height: 34px;
	border-top: 1px solid #eaeaea;
	border-bottom: 1px solid #eaeaea;
	padding-left:25px;
}


#left-bottom .social span {
	float: left;
	line-height: 34px;
}

#left-bottom .social ul {
	float:left;
	margin:9px 0 0 10px;
}

#left-bottom .social ul li {
	float: left;
	height: 34px;
}

#left-bottom .social ul li a {
	background:url("../images/sprite.png") no-repeat scroll -5px -50px transparent;
	display:block;
	height:16px;
	width:16px;
	margin: 0 5px 0 0;
	text-indent: -999999px; 
}

#left-bottom .social ul li a:hover {
	background-position: -5px -80px;
}

#left-bottom .social ul li a.picasa {
	background-position: -26px -50px;
}

#left-bottom .social ul li a.picasa:hover {
	background-position: -26px -80px;
}

#left-bottom .social ul li a.vimeo {
	background-position: -47px -50px;
}

#left-bottom .social ul li a.vimeo:hover {
	background-position: -47px -80px; 
}

And for the search part, we're basically floating the input container divs and setting the syles to them rather than to the input.

/* Search */
#left-bottom .search {
	overflow: hidden;
	margin-top: 12px;
}

#left-bottom .search .left {
	background:url("../images/sprite.png") no-repeat scroll -5px -203px transparent;
	float:left;
	height:27px;
	margin-left:20px;
	padding: 6px 0 0 10px;
	width:158px;
}

#left-bottom .search .left input {
	border: none;
	background: transparent;
	width: 100%;
}

#left-bottom .search .right {
	background:url("../images/sprite.png") no-repeat scroll -173px -203px transparent;
	float:left;
	height:27px;
}

#left-bottom .search .right input {
	background:none repeat scroll 0 0 transparent;
	border:medium none;
	cursor:pointer;
	height:27px;
	width:27px;
}

So here's what we have right now in firefox


Step 6 Right Content CSS

Here we're just floating the list items to get a grid display, we add padding, background color and borders to get a frame for each thubmnail and also add margins for separation.

Finally. we have our buttons with a container div that is centered and both links are floated.

/*------------------------------*/
/*   RIGHT CONTENT             */
/*----------------------------*/

/* Thumbnail Gallery Content*/
#right {
	width: 758px;
	float: right;
}

#right .thumbnails {
	overflow: hidden;
	padding:10px 0 0 32px;
}

#right .thumbnails li {
	float: left;
	margin: 0 21px 18px 0;
}

#right .thumbnails li a {
	border: 1px solid #eaeaea;
	padding: 2px;
	background: #f2f2f2;
	display: block;
}

#right .navigation {
    margin: -10px auto 0;
    overflow: hidden;
    width: 50px;
}

#right .navigation a {
	background:url("../images/sprite.png") no-repeat scroll 0 0 transparent;
	display:block;
	float:left;
	height:21px;
	text-indent:-999999px;
	width:21px;
}

#right .navigation .prev {
	background-position: -159px -75px;
	margin: 0 8px 0 0;
}

#right .navigation .next {
	background-position: -186px -75px;
}

Heres our first page finished in firefox!


Step 7 Second Page HTML

Moving on to our subpage, what we do is duplicate our index.html and name it something like subpage.html or inner.html, then we take out all the content in our #right container and start building the html needed for our slider gallery and the 3 modules below.

We need a div to hold the entire markup for my slideshow, a list of images that will be the slides and we'll also be using 3 diferent versions of the images so we can see some action later on with the jQuery Cycle plugin.

We're also setting a blank div that will be absolutely positioned on top of the images to function as a frame in case this layout ever needs to be implemented into a CMS to get some dynamic content. If this happens, we can just add any image without having to photoshop the rounded corners and shadows before hand.

And finally for the slideshow we need to create a navigation div with a couple of links for our "previous" and "next" gallery navigation.

<div id="gallery-holder">
	<ul class="slideshow">
		<li><img src="http://webdesigntutsplus.s3.amazonaws.com/136_ShutterPress/code_phase/images/slideshow/slide1.jpg" alt="slideshow 1" width="719" height="442" /></li>
		<li><img src="http://webdesigntutsplus.s3.amazonaws.com/136_ShutterPress/code_phase/images/slideshow/slide2.jpg" alt="slideshow 2" width="719" height="442" /></li>
		<li><img src="http://webdesigntutsplus.s3.amazonaws.com/136_ShutterPress/code_phase/images/slideshow/slide3.jpg" alt="slideshow 3" width="719" height="442" /></li>
	</ul> <!-- END SLIDESHOW -->
	<div class="slideshow-frame"></div>
	<div class="navigation">
		<a href="#" class="prev">Previous</a>
		<a href="#" class="next">Next</a>
	</div> <!-- END GALLERY NAVIGATION -->
</div> <!-- END GALLERY HOLDER -->

Our last block of content has our 3 modules set in their own container, each module being a div on its own that I will float so they're next to one another. Inside I have and h2 tag for the title and a paragraph for the text.

<div id="modules-holder">
	<div class="module">
		<h2 class="module-one">Module One</h2>
		<p>Sed korem sit feugiat erat at ante vestibulum auctor. Cras rhoncus diam et sem gravida sagittis. Ut tempor sapien in neque ultrices varius. Lorem ipsum text.</p>
	</div>
	<div class="module">
		<h2 class="module-two">Module Two</h2>
		<p>Pellentesque lacinia, augue vel venenatis commodo, ante neque tempor augue, semper rhoncus diam justo in ante. Aliquam in ultrices eleifend libero, in sit amen consectetur velit quis.</p>
	</div>
	<div class="module">
		<h2 class="module-three">Module Three</h2>
		<p>Suspendisse porta sem vel enim molestie suscipit elementum leo porta. Cras lorem lectus, viverra sit amet semper quis, vehicula quis velit.</p>
	</div>
</div> <!-- END MODULES HOLDER -->

Step 8 Second Page CSS

In this particular design, getting the frame for the slides was a bit tricky, so here's what we did:

We took the layer called "Shape 90" and dropped the fill to 0%. Then right-clicked the layer called "1720729_high", selected release clipping mask and then hid the layer.

Went back to the layer "Shape 90" and set the opacity to 50%. Right clicked the layer and made a duplicate, selected both "Shape 90" layers and merged them.

Now you can save the frame as a separate transparent .png and just add some white background in the corners so it covers the images on the back.

We set the dimensions for the modules and floated them to get them inline; after that we set up the styles along with the sprite as background image for the icons.

We set the list items from the slider to have a position: absolute; with relation to the ul so they'll collapse and look as just one image so we can get the real look of the layout, we will add the functionality after the whole thing is ready.

The previous and next buttons are also positioned absolutely so we can get them centered vertically.

/* Slideshow Gallery Content*/
#gallery-holder {
	position: relative;
	width: 719px;
	margin:20px auto 0;
	height: 442px;
}

#gallery-holder .slideshow-frame {
	background:url("../images/slideshow-frame.png") no-repeat scroll 0 0 transparent;
	height:442px;
	position:absolute;
	top:0;
	left: 0;
	width:719px;
	z-index: 10;
}

#gallery-holder .slideshow li {
	height:442px;
	position:absolute;
	top:0;
	width:719px
}

#gallery-holder .navigation a {
	height:92px;
	left:0;
	margin-top:-44px;
	position:absolute;
	top:50%;
	width:47px;
	z-index:15;
}

#gallery-holder .navigation a.prev {
	background-position:-6px -103px;
	margin-top:-44px;
}

#gallery-holder .navigation a.next {
	background-position:-65px -103px;
	left:auto;
	right:0;
}

#modules-holder {
	overflow: hidden;
	margin-top: 24px;
	margin-left: 20px;
}

#modules-holder .module {
	float: left;
	width: 204px;
	margin-right: 40px;
}

#modules-holder .module h2 {
	font-size:18px;
	font-weight:normal;
	margin-bottom:5px;
	padding-left:25px;
}

#modules-holder .module h2.module-one {
	background:url("../images/sprite.png") no-repeat scroll -128px -170px transparent;
}

#modules-holder .module h2.module-two {
	background:url("../images/sprite.png") no-repeat scroll -128px -140px transparent;
}

#modules-holder .module h2.module-three {
	background:url("../images/sprite.png") no-repeat scroll -128px -110px transparent;
}

#modules-holder .module p {
	color: #6a6a6a;
	line-height: 15px;
}

After all this, we can see that the module titles have a Museo font on them which is not a web-safe font, so we're going to need to set this up with @font-face. So we ran the font through Font Squirrel (http://www.fontsquirrel.com/fontface/generator) and placed the fonts in their own fonts folder in the root of our Project and set up the CSS in our general settings using the right paths for the fonts.

/*---------------------------------*/
/* GENERAL SETTINGS  */
/*-------------------------------*/
body {
      height:100%;
      font: 12px/12px "Lucida Sans", "Lucida Grande", sans-serif;
      color: #000;
      background: url('../images/bg.jpg') repeat #fff;
}
a {text-decoration:none; color: #000;}
a:hover {text-decoration:none; color: #0285da;}


@font-face {
    font-family: 'Museo700';
    src: url('../fonts/museo700-regular-webfont.eot');
    src: url('../fonts/museo700-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/museo700-regular-webfont.woff') format('woff'),
         url('../fonts/museo700-regular-webfont.ttf') format('truetype'),
         url('../fonts/museo700-regular-webfont.svg#Museo700') format('svg');
    font-weight: normal;
    font-style: normal;
}

So all we need to do now is set the font family to our h2 tags, and now our second page is complete.

#modules-holder .module h2 {
	font-family:'Museo700';
	font-size:18px;
	font-weight:normal;
	margin-bottom:5px;
	padding-left:25px;
}

Step 9 jQuery Magic

Now to add some functionality and animation to our Project we're going to be using two plugins: jQuery Cycle for our slideshow (http://jquery.malsup.com/cycle/ ) and prettyPhoto for our lightbox gallery ( http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/ ) and then weÕll create a custom function for our menu accordion.

Make sure you download the prettyPhoto plugin and copy the necessary assets to their respective folders (javascript in the "js" folder, stylesheets to the "css" folder, etc. ), the cycle plugin can be linked from Github and jQuery can be linked from Google APIs.

We'll also create a main.js file in our JS folder where we can put our custom function and plugin configuration.

So, we reference our stylesheet in the header of the html files

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>ShutterPress</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" ></meta>
	<link rel="stylesheet" type="text/css" href="css/all.css" media="screen" />
	<link rel="stylesheet" type="text/css" href="css/prettyPhoto.css" media="screen" />
</head>

We also reference our javascript files at the bottom of our document just before the closing html tag.

</body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript" src="js/jquery.prettyPhoto.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</html>

Now we go back to our thumbnail list and set up the links with the rel attribute for our lightbox gallery to work. We also have the links pointing at a place holder 500x500 image so we can display something on our lightbox

<li><a href="images/500X500.gif" rel="prettyPhoto[gallery]"><img src="images/gallery/thumb1.jpg" alt="thumbnail" width="150" height="121" /></a></li>

And finally, we go over to our main.js file and start configuring our plugins. Make sure you read the plugins' documentation so you can find out exactly how they work and what options you have to customize them.

For our accordion we need to set up a click function that checks if the link has a class of "opened" or "closed". If it's "closed", then it opens the respective submenu and collapses all others and changes the class of the links so the right icon is displayed. If the one that's being clicked has a class of "open", then it just closes it and changes the icon.

$(document).ready(function() {

	//prettyPhoto LIGHTBOX
	$("a[rel^='prettyPhoto']").prettyPhoto();


	//MENU ACCORDION
	$('#left .menu li a').click(function(){
		if ( $(this).hasClass('closed') ) {
			$(this).toggleClass('opened closed');
			$(this).parent().siblings().find('.sub-menu').slideUp();
			$(this).parent().siblings().find('a.opened').toggleClass('opened closed');
			$(this).next().slideDown();
			return false;	
		} else if ( $(this).hasClass('opened') ){
			$(this).toggleClass('opened closed');
			$(this).next().slideUp();
			return false;
		}
	})
	

	//SLIDER GALLERY	
	$('.slideshow').cycle({
		fx: 'fade',
		next: '#gallery-holder .navigation a.next',
		prev: '#gallery-holder .navigation a.prev'
	});
});

End of Day 3: Review

And now we have a 100% finished Project with working galleries and submenu animations. Enjoy!

In the final day of our tutorial series, we're going to walk you through how to create your own custom variations of this template using just a couple quick edits. From dark, grungy styles to modern metallic effects, you won't want to miss the final day!

Oh! And we mentioned this on the first day of the tutorial, but if you're interested in having a WordPress version of this template made available at ThemeForest, let me know in the comments section!


Coding Credits

The coding and tutorial for this phase of the series was all provided by CodeMyConcept, which offers a wide range of coding services for designers - from PSD>HTML conversions to Email templates and WordPress theme conversions. Check out their site at CodeMyConcept.com!

Advertisement