NivoSlider




Nivo Slider er blot en blandt ganske mange især jQuery baserede slidere, der med begrænsede variationer stort set kan det samme blandt freeware slidere. Næste niveau (payware) kan være "Slider Revolution".


Dens fremtræden og adfærd kan umiddelbart styres med ca. 20 parametre og CSS.









Installation



Anvendelsen af Nivo-slider er - udover opkoblingen til en CDN-server - baseret på en CSS-fil og et javaScript-program. Begge dele skal inddrages i opsætningen af slideren.


Udover den fysiske installation og indpasning i HTML skal der også foretages tilpasning i CSS og antagelig i parametrene i javaScriptet.



Link til CND server
CSS-fil til bl.a. styring af hvor store billederne i den aktuelle situation skal være.
<link rel="stylesheet" href="css/nivo-slider.css" type="text/css" />
Link til en CDN-server
<!-- CDN til jQuery -->
<script src="http://codeorigin.jquery.com/jquery-2.0.3.min.js"></script>
Link til Novi-slider javascript-fil, der skal placeres et passende sted.
<!-- Nivo Slider -->
<script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>
.
.
.
Handler, der linker op til id="slider" og class="nivoSlider i BODY og afvikler billederne, der hvor de er placeret.
<!--nivo-slider-->
<script>
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
</head>
<body>
De billeder, der skal vises af Nivo slider, placeres der hvor de skal vises.
.
.
.
<div>
<div id="slider" class="nivoSlider">
<img src="billeder/slider01.jpg" alt="Sliderbillede" />
<img src="billeder/slider02.jpg" alt="Sliderbillede" />
<img src="billeder/slider05.jpg" alt="Sliderbillede" />
<img src="billeder/slider04.jpg" alt="Sliderbillede" />
</div>


Parametre


Der er følgende parametre til rådighed nederst i jquery.nivo.slider.pack.js-filen:


Nivo parametre:

effect: 'random',
slices: 15,
boxCols: 8,
boxRows: 4,
animSpeed: 1000,
pauseTime: 2000,
startSlide: 0,
directionNav: false,
controlNav: false,
controlNavThumbs: false,
pauseOnHover: false,
manualAdvance: false,
prevText: '', 
nextText: '',
randomStart: true,
beforeChange: function(){},
afterChange: function(){},
slideshowEnd: function(){},
lastSlide: function(){},
afterLoad: function(){}


I parametrene prevText og nextText anføres tekster, der vises for manuelt at skifte til forrige eller næste billede. Ønskes ingenting vil anføres &nbsp; begge steder.


CSS


Nedenfor vises den øverste del af nivo-slider.css-filen. Den billedtørrelse, der skal vises anføres i den øverste selektor.


/* The Nivo Slider styles */
.nivoSlider {
position:relative;
width: 400px;
height: 150px
;
overflow: hidden;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
max-width: none;
}
.nivo-main-image {
display: block !important;
position: relative !important;
width: 100% !important;
}

/* 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;
background:white;




















x
x