(+84) 463.28.7979

jQuery ‘NivoSlider’


A slider with a variety of unique transition effects. For full specifications visit the official website http://nivo.dev7studios.com
JavaScript
We should include jQuery framework and jquery.nivo.slider.pack.js by pointing src attribute in the script tag to those .js files.
?
1
2
<script type=”text/javascript” src=”js/jquery-1.4.4.min.js” ></script>
<script type=”text/javascript” src=”js/jquery.nivo.slider.pack.js”></script>
Initialization script we place in the section of the document
?
1
2
3
$(window).load(function() {
$(‘#slider’).nivoSlider();
});
You can also define some additional parameters
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
effect:’random’, //Specify sets like: ‘fold,fade,sliceDown’
slices:15,
animSpeed:500,
pauseTime:3000,
startSlide:0, //Set starting Slide (0 index)
directionNav:true, //Next & Prev
directionNavHide:true, //Only show on hover
controlNav:true, //1,2,3…
controlNavThumbs:false, //Use thumbnails for Control Nav
controlNavThumbsFromRel:false, //Use image rel for thumbs
controlNavThumbsSearch: ‘.jpg’, //Replace this with…
controlNavThumbsReplace: ‘_thumb.jpg’, //…this in thumb Image src
keyboardNav:true, //Use left & right arrows
pauseOnHover:true, //Stop animation while hovering
manualAdvance:false, //Force manual transitions
captionOpacity:0.8, //Universal caption opacity
beforeChange: function(){},
afterChange: function(){},
slideshowEnd: function(){} //Triggers after all slides have been shown
HTML
Below you can see general HTML script representation. To add a caption to an image you simply need to add a title attribute to the image. To add an HTML Caption simply set the title attribute to the ID of a element that contains your caption (prefixed with a hash). Note that the HTML element that contains your caption must have the CSS class nivo-html-caption applied and must be outside of the slider div.
?
1
2
3
4
5
6
7
8
9
<div id=”slider”>
<img src=”images/slide1.jpg” alt=”” />
<a href=”#”><img src=”images/slide2.jpg” alt=”” title=”#htmlcaption” />
<img src=”images/slide3.jpg” alt=”” title=”This is an example of a caption” />
<img src=”images/slide4.jpg” alt=”” />
</div>
<div id=”htmlcaption”>
<strong>This</strong> is an example of a <em>HTML</em> caption with <a href=”#”>a link</a>.
</div>
CSS
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
/* The Nivo Slider styles */
.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 {
position:absolute;
top:45%;
z-index:99;
cursor:pointer;
}
.nivo-prevNav {
left:0px;
}
.nivo-nextNav {
right:0px;
}
/* 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;
}

A slider with a variety of unique transition effects. For full specifications visit the official website http://nivo.dev7studios.com

JavaScript
We should include jQuery framework and jquery.nivo.slider.pack.js by pointing src attribute in the script tag to those .js files.
?12<script type=”text/javascript” src=”js/jquery-1.4.4.min.js” ></script><script type=”text/javascript” src=”js/jquery.nivo.slider.pack.js”></script>Initialization script we place in the section of the document
?123$(window).load(function() {         $(‘#slider’).nivoSlider();});You can also define some additional parameters
?12345678910111213141516171819effect:’random’, //Specify sets like: ‘fold,fade,sliceDown’slices:15,animSpeed:500,pauseTime:3000,startSlide:0, //Set starting Slide (0 index)directionNav:true, //Next & PrevdirectionNavHide:true, //Only show on hovercontrolNav:true, //1,2,3…controlNavThumbs:false, //Use thumbnails for Control NavcontrolNavThumbsFromRel:false, //Use image rel for thumbscontrolNavThumbsSearch: ‘.jpg’, //Replace this with…controlNavThumbsReplace: ‘_thumb.jpg’, //…this in thumb Image srckeyboardNav:true, //Use left & right arrowspauseOnHover:true, //Stop animation while hoveringmanualAdvance:false, //Force manual transitionscaptionOpacity:0.8, //Universal caption opacitybeforeChange: function(){},afterChange: function(){},slideshowEnd: function(){} //Triggers after all slides have been shown
HTML
Below you can see general HTML script representation. To add a caption to an image you simply need to add a title attribute to the image. To add an HTML Caption simply set the title attribute to the ID of a element that contains your caption (prefixed with a hash). Note that the HTML element that contains your caption must have the CSS class nivo-html-caption applied and must be outside of the slider div.
?123456789<div id=”slider”>    <img src=”images/slide1.jpg” alt=”” />    <a href=”#”><img src=”images/slide2.jpg” alt=”” title=”#htmlcaption” />    <img src=”images/slide3.jpg” alt=”” title=”This is an example of a caption” />    <img src=”images/slide4.jpg” alt=”” /></div><div id=”htmlcaption”>    <strong>This</strong> is an example of a <em>HTML</em> caption with <a href=”#”>a link</a>.</div>
CSS
?123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172/* The Nivo Slider styles */.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 {    position:absolute;    top:45%;    z-index:99;    cursor:pointer;}.nivo-prevNav {    left:0px;}.nivo-nextNav {    right:0px;}/* 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;}

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>