Morgan Bohman
August 9, 2012, 10:20 AM
Hey,
I'm thinking of installing Nivo Slider to get more attention to my site, but I'm stuck with
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
Wherever I put this, the site won't load. Nivo Slider is a Jquery plugin. The teaser area is defined and called in the common.css with a background image, I wanna replace this with the slider function which I think could be more attractive.
The header section will look like this:
<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>
And the place to insert the images like this:
slider-wrapper">
<div id="slider" class="nivoSlider">
<img src="img/teaser1" alt="" />
<img src="img/teaser2" alt="" />
<img src="img/teaser3" alt="" />
And in the CSS
.nivoSlider {
position:relative;
background:url('img/loading.gif') no-repeat 50% 50%;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
display:none;
}
.nivoSlider a {
border:0;
display:block;
}
But when it comes to calling the function, I'm lost. Anyone that could help me?
//Morgan
I'm thinking of installing Nivo Slider to get more attention to my site, but I'm stuck with
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
Wherever I put this, the site won't load. Nivo Slider is a Jquery plugin. The teaser area is defined and called in the common.css with a background image, I wanna replace this with the slider function which I think could be more attractive.
The header section will look like this:
<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>
And the place to insert the images like this:
slider-wrapper">
<div id="slider" class="nivoSlider">
<img src="img/teaser1" alt="" />
<img src="img/teaser2" alt="" />
<img src="img/teaser3" alt="" />
And in the CSS
.nivoSlider {
position:relative;
background:url('img/loading.gif') no-repeat 50% 50%;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
display:none;
}
.nivoSlider a {
border:0;
display:block;
}
But when it comes to calling the function, I'm lost. Anyone that could help me?
//Morgan