I have a nivo slider on my website that I am building, but it’s not fully functional. The slider itself is working fine, i’ve got a background for the slider and I can position the left and right buttons fine. However, I am attempting to set it up so that thumbnails appear at the bottom.
I have read the instructions on the Nivo site, but it’s not got me far. I’ve created the thumb images and placed them in images folder, edited the HTML for the ‘rel’, and played with the CSS of the Nivo Slider, but no luck. I’ve not touched the actual javascript file that commands Nivo.
Website: Architecture - Portfolio
Much appreciated if someone can give me some assistance or pointers, but except this little problem the slider is fantastic!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Architecture - Portfolio</title>
<link rel="stylesheet" href="/css/nivo-slider.css" type="text/css" media="screen" />
<link href="/css/main.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="../scripts/jquery.nivo.slider.js" type="text/javascript"></script>
</head>
<body>
<div id="wrapper"><!-- Begin Wrapper -->
<div id="header"></div><!-- End Header -->
<div id="header_image"><!-- Begin Header_Image-->
<img src="/images/header_main.jpg" /></div>
<!-- End Header_Image -->
<div id="pri_nav"><!-- Begin Pri_Nav-->
<ul>
<li><a href="/index" >HOME</a></li>
<li><a href="/architecture" class="navselect">ARCHITECTURE</a></li>
<li><a href="/landscape" >LANDSCAPE</a></li>
<li><a href="/contact" >CONTACT</a></li>
</ul>
</div><!-- End Pri Nav-->
<div id="sec_nav"><!-- Begin Sec Nav-->
<ul>
<li><a href="/architecture" >About</a></li>
<li><a href="/architecture/portfolio" class="sec_navselect">Portfolio</a></li>
<li><a href="/architecture/prints" >Print Sales</a></li>
<li><a href="/architecture/stock" >Stock Sales</a></li>
</ul>
</div><!-- End Sec Nav-->
<div id="content"><!-- Begin Content Container -->
<div id="single_col">
<h1>May I Present To You My Architectural Portfolio</h1>
<p>Welcome to my architecture portfolio. Please use interactive portfolio (below) to browse a small sample of my work. Samples include the stunning glass buildings of Manchester and the historic locations of Liverpool. I take a lot of pride in my work and I am happy to share that with yourself.</p>
</div>
<div id="single_col_lower">
<div id="slider_wrapper" >
<div id="slider" class="nivoSlider">
<img src="http://www.sitepoint.com/forums/images/a_slide1.jpg" alt="" rel="../images/a_slide1_thumb.jpg" />
<img src="http://www.sitepoint.com/forums/images/a_slide2.jpg" alt="" rel="../images/a_slide2_thumb.jpg" />
<img src="http://www.sitepoint.com/forums/images/a_slide3.jpg" alt="" rel="../images/a_slide3_thumb.jpg" />
<img src="http://www.sitepoint.com/forums/images/a_slide4.jpg" alt="" rel="../images/a_slide3_thumb.jpg" />
</div>
</div>
</div>
<div class="clearfix"></div>
</div><!-- End Content Container -->
<div id="footer"><!-- Begin Footer -->
<p>Copyright Jpwild Photography 2011 - Under Construction!</p>
</div><!-- End Footer -->
</div><!-- End Wrapper -->
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider()
controlNavThumbs:true
controlNavThumbsFromRel:true
});
</script>
</body>
</html>
/*
* jQuery Nivo Slider v2.4
* http://nivo.dev7studios.com
*
* Copyright 2011, Gilbert Pellegrom
* Free to use and abuse under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*
* March 2010
*/
/* The Nivo Slider styles */
#slider_wrapper {margin: 0 auto; height: 529px; width: 760px; background-color: transparent; background-image:url(../images/slider_bg.jpg); background-repeat:no-repeat; padding-top: 10px}
#slider {height: 350px; width: 710px; margin: 0 auto; margin-top: 35px;}
#slider img {
position:absolute;
top:0px;
left:0px;
display:none;
}
#slider .nivo-controlNav {
position:absolute;
bottom:-70px; /* Put the nav below the slider */
}
#slider .nivo-controlNav img {
display:inline; /* Unhide the thumbnails */
position:relative;
margin-right:10px;
}
#slider a {
border:0;
display:block;
}
.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:60;
display:none;
}
/* The slices in the Slider */
.nivo-slice {
display:block;
position:absolute;
z-index:50;
height:100%;
}
/* Caption styles */
.nivo-caption {
position:absolute;
left:0px;
bottom:0px;
background:#000;
color:#fff;
opacity:0.8; /* Overridden by captionOpacity setting */
width:100%;
z-index:89;
}
.nivo-caption p {
padding:5px;
margin:0;
}
.nivo-caption a {
display:inline !important;
}
.nivo-html-caption {
display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
display:block;
width:30px;
height:30px;
background:url(../images/arrows.png) no-repeat;
text-indent:-9999px;
border:0;
top: 45%;
position:absolute;
z-index: 99;
cursor: pointer;
}
a.nivo-nextNav {
background-position:-30px 0;
right:15px;
}
a.nivo-prevNav {
left:15px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
position:relative;
z-index:99;
cursor:pointer;
}
.nivo-controlNav a.active {
font-weight:bold;
}