<html>
<head>
<title>Nivo Slider Demo</title>
<link rel="stylesheet" href="http://nivo.dev7studios.com/scripts/nivo-slider/nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<style>
background:url(http://nivo.dev7studios.com/images/slider.png) no-repeat;
width:600px;
height:392px;
margin:0 auto;
padding-top:74px;
margin-top:-45px;
}
#slider {
position:relative;
width:618px;
height:246px;
margin-left:190px;
background:url(http://nivo.dev7studios.com/images/loading.gif) no-repeat 50% 50%;
}
#slider img {
position:absolute;
top:0px;
left:0px;
display:none;
}
#slider a {
border:0;
display:block;
}
.nivo-controlNav {
position:absolute;
left:260px;
bottom:-42px;
}
.nivo-controlNav a {
display:block;
width:22px;
height:22px;
background:url(http://nivo.dev7studios.com/images/bullets.png) no-repeat;
text-indent:-9999px;
border:0;
margin-right:3px;
float:left;
}
.nivo-controlNav a.active {
background-position:0 -22px;
}
.nivo-directionNav a {
display:block;
width:30px;
height:30px;
background:url(http://nivo.dev7studios.com/images/arrows.png) no-repeat;
text-indent:-9999px;
border:0;
}
a.nivo-nextNav {
background-position:-30px 0;
right:15px;
}
a.nivo-prevNav {
left:15px;
}
.nivo-caption {
text-shadow:none;
font-family: Helvetica, Arial, sans-serif;
width: 600px;
}
.nivo-caption a {
color:#efe9d1;
text-decoration:underline;
}</style>
</head>
<body>
<div id="wrapper">
<div id="slider-wrapper">
<div id="slider" class="nivoSlider">
<img src="http://nivo.dev7studios.com/images/toystory.jpg" alt="" />
<a href="http://dev7studios.com"><img src="http://nivo.dev7studios.com/images/up.jpg" alt="" title="This is an example of a caption" /></a>
<img src="http://nivo.dev7studios.com/images/walle.jpg" alt="" />
<img src="http://nivo.dev7studios.com/images/nemo.jpg" alt="" title="#htmlcaption" />
</div>
<div id="htmlcaption" class="nivo-html-caption">
<strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
</div>
</div>
</div>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="http://nivo.dev7studios.com/scripts/nivo-slider/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
</body>
</html>
Φόρουμ
slider στο φορουμ phpBB2 8/2/2012, 02:13
