Advertisement

Powering Orman's Image Slider Controls With Nivo

by
This post is part of a series called Bringing Premium Pixels to Life.
Build a Popup Modal Window Using the jQuery Reveal Plugin
Build a Quick and Elegant Login Form

Next up in the Premium Pixels session is Orman's Image Slider Controls. We'll take the PSD, rebuild it for the browser, then make the whole thing functional using the brilliant Nivo Slider jQuery Plugin.


Step 1: Create our Folder Structure

To keep everything tidy we'll first create our folder structure. Go ahead and create three folders called "css", "images" and "js" respectively. The css folder will contain our stylesheet. Images is for, well images, and js will contain our jQuery plugins - Nivo slider in this case!

Folder Structure

Step 2: HTML5 Base Markup

Okay, we have our folder structure, now we need to create our html document. Create this within the root of your project. We'll use a simple HTML5 base template, whilst also linking to the jQuery library hosted by Google.

<!DOCTYPE html>
<html>
<head>

	<!--Meta tags-->
	<meta charset="utf-8">

	<!--Title-->
	<title>Image Slider Controls</title>
		
	<!--Stylesheets-->
	<link rel="stylesheet" href="css/styles.css">

</head>
<body>





	<!--jQuery-->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>


</body>
</html>

Step 3: Creating Some Global Styles

We'll kick things off with some reset styles:

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, 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,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
	}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
a {
	text-decoration:none;
}

Now, before we jump into the slider itself we'll add a background to the page. If you've downloaded the PSD before you'll see there's a layer with a radial gradient suggesting some subtle lighting. We'll create this by having a repeatable pattern, made slightly lighter than the PSD. Having applied the background we'll use some inset box-shadows on the html tag to try and replicate the light in the center.

html {
	-webkit-box-shadow:
		inset 250px 250px 250px rgba(0,0,0,.25),
		inset -250px -250px 250px rgba(0,0,0,.25);
	-moz-box-shadow:
		inset 250px 250px 250px rgba(0,0,0,.25),
		inset -250px -250px 250px rgba(0,0,0,.25);
	box-shadow:
		inset 250px 250px 250px rgba(0,0,0,.25),
		inset -250px -250px 250px rgba(0,0,0,.25);

	width:100%;
	height:100%;
}

body {
	background:url(../images/bg.jpg) repeat;

	font-size:100%;
}
Background

Step 4: The Slider Structure

Now we can finally start our slider! The Nivo Slider is the work of Gilbert Pellegrom and Michael Wright, together known as Dev7studios and professional chums with Orman.

It allows us to create our slider using the minimal amount of markup as possible. All we need to do is create a div with an ID of whatever you like; I'm using "slider" in this case, and a class of "nivoSlider". Then all you need to do is place your images inside the div, that's it!

<!DOCTYPE html>
<html>
<head>

	<!--Meta tags-->
	<meta charset="utf-8">

	<!--Title-->
	<title>Image Slider Controls</title>
		
	<!--Stylesheets-->
	<link rel="stylesheet" href="css/styles.css">

</head>
<body>


<div id="slider" class="nivoSlider">
	<img src="images/image1.jpg" alt="Slider Image 1" title="Fauna Friends Japanimals Posters">
	<img src="images/image2.jpg" alt="Slider Image 2" title="AIGA SOF Letterpress Cards"> <!--image courtesy of http://www.beastpieces.com/-->
</div>


	<!--jQuery-->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

</body>
</html>

Step 5: Centering Our Slider

Next we'll center our slider in the middle of the page, if you followed my last tutorial you'll have gone through the process on how to achieve this. If you'd like more info, check out this article on CSS Tricks.

We've also gone ahead and added some box shadows to the slider, while remembering the browser prefixes. Note we've also added some more CSS which is required for nivoSlider to work.

#slider {
	position:absolute !important;
	top:50%;
	left:50%;

	width:650px;
    height:350px;

    margin-top:-175px;
    margin-left:-325px;

	-webkit-box-shadow:
		0px 0px 5px rgba(0,0,0,.5),
		0px 0px 20px rgba(0,0,0,.2);
	-moz-box-shadow:
		0px 0px 5px rgba(0,0,0,.5),
		0px 0px 20px rgba(0,0,0,.2);
	box-shadow:
		0px 0px 5px rgba(0,0,0,.5),
		0px 0px 20px rgba(0,0,0,.2);
}

.nivoSlider img {
    position:absolute;
    top:0;
    left:0;
    display:none;
}
.nivoSlider a {
    border:0;
    display:block;
}

.nivo-slice {
	display:block;
	position:absolute;
	z-index:5;
	height:100%;
}
.nivo-box {
	display:block;
	position:absolute;
	z-index:5;
}

Step 6: Downloading Nivo

Time to integrate the Nivo Slider. Start off by heading to http://nivo.dev7studios.com/pricing/ and downloading the jQuery plugin. Once downloaded and unpacked, copy the jquery.nivo.slider.js file to your js folder created back in Step 1.

Next we'll need to link to this file inside our html document.

<!DOCTYPE html>
<html>
<head>

	<!--Meta tags-->
	<meta charset="utf-8">

	<!--Title-->
	<title>Image Slider Controls</title>
		
	<!--Stylesheets-->
	<link rel="stylesheet" href="css/styles.css">

</head>
<body>


<div id="slider" class="nivoSlider">
	<img src="images/image1.jpg" alt="Slider Image 1" title="Fauna Friends Japanimals Posters">
	<img src="images/image2.jpg" alt="Slider Image 2" title="AIGA SOF Letterpress Cards">
</div>

	<!--jQuery-->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script src="js/jquery.nivo.slider.js"></script>

</body>
</html>

Step 7: Hooking up the Plugin

Now we have our plugin downloaded and linked to, we'll need to hook it up to our slider, whilst defining some optional parameters. Take a look at the Nivo documentation for details on all the options available.

	<!--jQuery-->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script src="js/jquery.nivo.slider.js"></script>

	<script type="text/javascript">
		$(window).load(function() {
		    $('.nivoSlider').nivoSlider({
		    	effect: 'sliceDown',
		    	directionNavHide: false,
		    	captionOpacity: 1,
		    	controlNav: false
		    });
		});
	</script>

</body>
</html>

Step 8: Where's dat Caption?

We've completed our slider! But wait, what about the caption? Nivoslider creates captions from the title tag of our images, it then applies ID's/classes so we can style it to our needs! We'll create the background of the caption using CSS3 gradients. Note we also use the caption background as the Control Nav background, this was a pretty logical way to create it.

	<img src="images/image1.jpg" alt="Slider Image 1" title="Fauna Friends Japanimals Posters">
	<img src="images/image2.jpg" alt="Slider Image 2" title="AIGA SOF Letterpress Cards">
.nivo-caption {
	position:absolute;
	left:75px;
	bottom:29px;
	
	width:498px;
	padding-top:13px;
	padding-bottom:13px;

	z-index:8;

	border:1px solid #000;
	border-left-color:rgba(0,0,0,.5);
	border-right-color:rgba(0,0,0,.5);

	-webkit-box-shadow:
		inset 0px 1px 0px rgba(255,255,255,.15),
		0px 1px 3px rgba(0,0,0,.7);
	-moz-box-shadow:
		inset 0px 1px 0px rgba(255,255,255,.15),
		0px 1px 3px rgba(0,0,0,.7);
	box-shadow:
		inset 0px 1px 0px rgba(255,255,255,.15),
		0px 1px 3px rgba(0,0,0,.7);

	background: -webkit-linear-gradient(top,  rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);
	background: -moz-linear-gradient(top,  rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);
	background: -o-linear-gradient(top,  rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);
	background: -ms-linear-gradient(top,  rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);
	background: linear-gradient(top,  rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e648494c', endColorstr='#e6262728',GradientType=0 );

	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px;
}


.nivo-caption p {
	margin:0;

	font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size:14px;
	font-weight:bold;
	color:#fff;
	text-align:center;
	text-shadow:0px -1px 0px #000;
}
.nivo-caption a {
	display:inline !important;
}
.nivo-html-caption {
    display:none;
}
Caption

Step 9: Finishing Off

We're nearly complete, we just need to add our "Next" and "Previous" buttons. Until this point we've relied on as much css as possible, but we'll now create these arrows using images with a transparent background.

.nivo-directionNav a {
	position:absolute;
	bottom:30px;
	z-index:9;
	cursor:pointer;
	text-indent:-9999px;

	width:45px;
	height:39px;

	background-image:url(../images/arrows.png);
	background-repeat:no-repeat;
}
.nivo-prevNav {
	left:75px;
	background-position:0 0;

	box-shadow:
		1px 0px 0px rgba(255,255,255,.2),
		2px 0px 0px rgba(0,0,0,.4);
}
.nivo-nextNav {
	right:77px;
	background-position:-45px 0px;

	box-shadow:
		-1px 0px 0px rgba(255,255,255,.2),
		-2px 0px 0px rgba(0,0,0,.4);
}

Conclusion

Okay we've done it! We've taken another one of Orman's designs and coded it up, this time using the brilliant Nivo Slider!

In terms of cross-browser friendliness, I went ahead and tested this in IE7 and above. Other than the caption dividers (created with box-shadow) there shouldn't be any problems at all. If you're interested in more extensive browser support, check out this post on curing CSS3 headaches in older browsers.

Completed

I hope you enjoyed this tutorial, thanks for reading!

Advertisement