How to Create Image Slider With Photoshop and jQuery
Part II – Converting Into HTML/CSS
Step 25 – Setting Up Files
Create a new folder called My-Photo-Slider. Inside this folder, create a new blank HTML document (index.html), blank stylesheet (style.css), and folder for images (img).
We also need to include jQuery library and Nivo Slider plugin to the folder. As we use HTML5 markup, we need to add an IE hack to enable HTML5 elements on IE 8 or below. We’ll use a script called Modernizr to accommodate IE.
Step 26 – Basic HTML Markup
Open index.html in your favourite code editor. Define the DOCTYPE (we use HTML5), head elements (where we add the title of the documents and link CSS and JavaScript (jQuery Library, Nivo Slider, and Modernizr). We also add a div wrapper (to center the layout), header element, and slide wrapper.
<!DOCTYPE html> <html lang="en"> <head> <meta name="author" content="Aris FM" /> <meta charset="UTF-8" /> <title>My Photo Slides</title> <link href="style.css" media="screen" rel="stylesheet" type="text/css"/> <script src="jquery-1.6.1.min.js" type="text/javascript"></script> <script src="jquery.nivo.slider.pack.js" type="text/javascript"></script> <!--[if IE]> <script src="modernizr-2.0.min.js"></script> <![endif]--> </head> <body> <div id="pagewrap"> <header> </header> <div id="slidewrap"> </div> </div> </body> </html>
Step 27 – Slice PSD
Open the PSD mockup and slice out all of the necessary images. For the picture, let’s grab following pictures from sxc.hu (login required, if you don’t have an account yet, you can sign up for free). Resize all images to 920×430 px. Put all the images into the image folder (img).
- Rinjani by Ciaciya
- Stupa by Agnes Sim
- Tally by Nino Satria
- Offerings by Timo Balk
- Uluwatu-Bali by Aris Wjay
Step 28 – Create Header
Add these following code between <header> and </header>.
<h1> <a>My Photo Slides</a> </h1>
Now let’s add style to the header. We also add the style for the body and wrapper elements. Put all styles into the stylesheet, style.css.
/* Basic Styling */
body {
background:transparent url(img/bg.jpg);
font:15px/2 'Adobe Caslon Pro', Georgia, Serif;
margin:0;
padding:0;
}
a {outline:0 none}
#pagewrap {
margin:120px auto;
padding:0;
position:relative;
height:100%;
width:960px;
}
header {
display:block;
float:right;
margin-right:40px;
width:192px;
z-index:52;
position:relative;
}
h1 {
background:transparent url(img/separator.png) no-repeat center bottom; /* Add a separator line below the title */
font-size:18px;
font-weight:bold;
height:70px;
line-height:1.1;
margin:55px 10px 0;
text-align:center;
text-transform:uppercase;
}
Step 29 – Add Photo Slider
Now we’re going to add code to main part of our document, the photo slider. Let’s add the photos first. Place these following code between <div id="slidewrap"> and </div>.
<div id="slider"> <img alt="Gallery Picture" title="#caption1" src="img/sample.jpg" /> <img alt="Gallery Picture" title="#caption2" src="img/sample1.jpg" /> <img alt="Gallery Picture" title="#caption3" src="img/sample2.jpg" /> <img alt="Gallery Picture" title="#caption4" src="img/sample3.jpg" /> <img alt="Gallery Picture" title="#caption5" src="img/sample4.jpg" /> <img alt="Gallery Picture" title="#caption6" src="img/sample5.jpg" /> </div>
And then add the ribbon and the caption for the photos.
<div class="ribbon"></div> <div id="caption1" class="nivo-html-caption"> <span class="title">Photographer:</span><br/> Enrico Nunziati<br/> <span class="title">Location:</span><br/> Namib desert<br/> <span class="title">Model:</span><br/> Dead Vlei<br/> <span class="title">Date:</span><br/> Mar 18, 2011 </div> <div id="caption2" class="nivo-html-caption"> <span class="title">Photographer:</span><br/> Lina Dhammanari<br/> <span class="title">Location:</span><br/> Lombok Island, Indonesia<br/> <span class="title">Model:</span><br/> Mount Rinjani<br/> <span class="title">Date:</span><br/> May 8, 2008 </div> <div id="caption3" class="nivo-html-caption"> <span class="title">Photographer:</span><br/> Agnes Sim<br/> <span class="title">Location:</span><br/> Borobudur, Indonesia<br/> <span class="title">Model:</span><br/> Big Stupa<br/> <span class="title">Date:</span><br/> Jun 12, 2008 </div> <div id="caption4" class="nivo-html-caption"> <span class="title">Photographer:</span><br/> Nino Satria<br/> <span class="title">Location:</span><br/> Taman Safari Indonesia<br/> <span class="title">Model:</span><br/> Tally Giraffe<br/> <span class="title">Date:</span><br/> Aug 16, 2009 </div> <div id="caption5" class="nivo-html-caption"> <span class="title">Photographer:</span><br/> Timo Balk<br/> <span class="title">Location:</span><br/> Ubud, Bali, Indonesia<br/> <span class="title">Model:</span><br/> Offerings<br/> <span class="title">Date:</span><br/> Dec 20, 2009 </div> <div id="caption6" class="nivo-html-caption"> <span class="title">Photographer:</span><br/> Aris Wjay<br/> <span class="title">Location:</span><br/> Uluwatu-Bali<br/> <span class="title">Model:</span><br/> Beautiful Beach<br/> <span class="title">Date:</span><br/> Jul 20, 2011 </div>
Now, if we open index.html in the browser, we have something like this:
Step 30
We still need to fix the slider’s appearance using CSS.
#slidewrap {position:absolute;}
#slider {
position:relative;
height:auto;
width:920px;
border:10px solid #fff;
box-shadow:0 0 5px #444;
margin:10px;
}
.ribbon {
background:transparent url(img/info-bg.png) no-repeat;
height:482px;
width:192px;
position:absolute;
right:40px;
top:-3px;
z-index:50;
}
#slider img {
position:absolute;
top:0px;
left:0px;
display:none;
}
This is what we have now.
Currently, we have linked Nivo slider plugin but we haven’t hooked up the script. So let’s hook up the script by adding these JavaScript functions between <head> and </head> element.
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
Step 31: Slider Style
The final step is adding the style of the slider.
/* The Nivo Slider styles */
.nivoSlider {
position:relative;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:6;
display:none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
display:block;
position:absolute;
z-index:5;
height:100%;
}
.nivo-box {
display:block;
position:absolute;
z-index:5;
}
.nivo-directionNav {display:none!important}
.nivo-html-caption {
display:none;
}
.nivo-caption {
position:absolute;
right:20px;
text-align:center;
top:130px;
width:192px;
z-index:60;
}
.nivo-caption p {margin:0}
.nivo-caption .title {font-style:italic}
.nivo-controlNav {
position:absolute;
bottom:10px;
right:20px;
height:15px;
width:192px;
text-align:center;
display:block;
z-index:51;
}
.nivo-controlNav a {
background:transparent url(img/button.png) no-repeat center center;
display:inline-block;
height:14px;
width:14px;
text-indent:-9999px;
cursor:pointer;
}
.nivo-controlNav .active {
background:transparent url(img/button_active.png);
}