Nivo Slider
The world´s most awesome jQuery slider
Einleitung
Der Nivo Slider von Dev7Studios, in der Version 2.6, ist eine schöne Animation um Bilder effektvoll zu präsentieren. Man kann ihn sehr elegant als Galerie verwenden oder um die Homepage optisch aufzuwerten. Ich werde euch hier erklären wie ihr diesen Augenschmaus in eure Seite einsetzen könnt. Ihr könnt den Slider in jede Html Seite einbinden. Auch für WordPress funktioniert diese Anleitung einwandfrei.
Vorbereitung
Das verwendete Layout in dieser Anleitung hat die Maße: 510×340.
Die eingeblendeten Grafiken haben die Maße: 470×280.
Die NAvigationsfelder haben die Maße: 50×20. Wählt eure Maße so, das sie problemlos in eure Seite passen.
Nun ladet ihr euch das Javapaket von Dev7Studio hier runter und ladet es in ein Verzeichnis auf eurem Server. Falls ihr WordPress benutzt schreibt ihr jeden Code, der in den Head-Bereich kommt vor der Zeile <?php wp_head()?>
Jetzt öffnet ihr das Grundgerüst eurer Seite und wählt den Bereich <Head> aus. Nach dem <Titel> schreibt ihr nun folgenden Code:
<link rel=”stylesheet” href=”nivo-slider.css” type=”text/css” media=”screen” />
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js” type=”text/javascript”></script>
<script src=”jquery.nivo.slider.pack.js” type=”text/javascript”></script>
Damit bindet ihr die nivo-slider css, jquery und Script ein. Die Pfade müsst ihr natürlich anpassen.
Als nächstes bindet ihr die Javafunktion mit den Parametern ein. Der folgende Code wird wieder im <Head> eingebunden . Es gibt noch mehrere Parameter, die ihr auf der offiziellen Seite von Dev7Studios findet. Für unseren Slider sind die angegeben Parameter aber ausreichend.
<script type=”text/javascript”>
jQuery(window).load(function() {
$(‘#image-slider’).nivoSlider({
effect:’random’, // alle möglichen Effekte sind weiter unten aufgelistet
slices:15, // Für die Slice animations
boxCols: 8, // Für die Box animations
boxRows: 4, // Für die Box animations
animSpeed:500, // Slide-geschwindigkeit
pauseTime:3000, // Dauer eines Slices
startSlide:0, //Slice Startet mit (index)
directionNav:false, // nächste & vorherige Navigation
directionNavHide:false, // nur beim drüberfahren anzeigen
controlNav:true, // 1,2,3… Navigation
keyboardNav:false, // linke und rechte Pfeile
pauseOnHover:false // Pause beim drüber fahren
});});</script>
Effekte:
sliceDown, sliceDownLeft, sliceUp, sliceUpLeft, sliceUpDown, sliceUpDownLeft, fold, fade, random, slideInRight, slideInLeft, boxRandom, boxRain, boxRainReverse, boxRainGrow, boxRainGrowReverse
Als nächstes bindet ihr die Grafiken im <Body> ein, die gezeigt werden sollen. Die Anzahl der Bilder ist euch überlassen. Ihr könnt zu jedem Bild auch einen Link angeben wenn ihr wollt. Auch hier müssen die Pfade angepasst werden.
<div id=”nivo-container”>
<div id=”slider”>
<a href=”link”><img src=”slide1.png” target=”_blank” alt=”Image 01″ /></a>
<img src=”slide2.png” target=”_blank” alt=”Image 02″ />
…
<img src=”slideN.png” target=”_blank” alt=”Image N” />
</div></div>
<div class=”clear”></div>
Cascadet Stylesheet
In diesem Abschnitt geht es darum, euren Slider optisch anzupassen und zu richtig zu positionieren. Dazu müsst ihr die nivo-slider.css Datei bearbeiten. Hier ist der Code den ich für Liveitup.de verwende.
/*
* jQuery Nivo Slider v2.5.2
* 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
* Juni 2011 – modified by Dennis Jörgens, Liveitup.de
*/
#nivo-container {
position:relative;
width:510px;
height:340px;
background-image:url(images/back.png);
}
#slider {
position:relative;
top:20px;
left:20px;
width:470px;
height:280px;
}
#slider img {
position:absolute;
width:470px;
height:280px;
}
/* The Nivo Slider styles */
.nivoSlider {
position:relative;
}
.nivoSlider img {
position:absolute;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
position:absolute;
width:470px;
height:280px;
z-index:99;
display:none;
}
/*the slices and Boxes in the Slider*/
.nivo-slice {
position:absolute;
display:block;
z-index:5;
height:280px;
}
.nivo-box {
position:absolute;
display:block;
z-index:5;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
position:absolute;
top:45%;
z-index:9;
cursor:pointer;
}
.nivo-prevNav {
left:0px;
}
.nivo-nextNav {
right:0px;
}
/* Control nav styles (e.g. 1,2,3…) */
.nivo-controlNav a {
position:relative;
top:285px;
left:22px;
width:50px;
height:25px;
display:block;
float:left;
background:url(images/slider-navi.png) no-repeat;
padding:2px;
z-index:99;
text-indent:-9999px;
cursor:pointer;
}
.nivo-controlNav a:hover {
background:url(images/slider-navi2.png) no-repeat;
}
.nivo-controlNav a.active {
background:url(images/slider-navi2.png) no-repeat;
}
