Nivo Slider Problem
3 posters
Page 1 of 1
Nivo Slider Problem
Hi, I am trying to add a nivo slider to my forum with 12 images. Everything goes fine, except the small dots to select the images instead of going 12 it goes 24...
Here's my code:
What am I doing wrong? Thanks in advance.
Here's my code:
- Code:
<center><div style="width:700px;margin:40px auto;"><div class="slider-wrapper theme-default"><div class="ribbon"></div><div id="nivoslider-125" class="nivoSlider" style="width:700px;height:400px;"><img src="http://img526.imageshack.us/img526/6725/moonm.png" title="#caption01" alt="" /><img src="http://img803.imageshack.us/img803/1818/villageq.png" title="#caption02" alt="" /><img src="http://img208.imageshack.us/img208/444/kcibrfilms.png" title="#caption03" alt="" /><img src="http://img267.imageshack.us/img267/5899/dfghje.png" title="#caption04" alt="" /><img src="http://img22.imageshack.us/img22/6408/cartere.png" title="#caption05" alt="" /><img src="http://img855.imageshack.us/img855/1989/spawnh.png" title="#caption06" alt="" /><img src="http://img268.imageshack.us/img268/4659/meowys.png" title="#caption07" alt="" /><img src="http://img811.imageshack.us/img811/9466/cathedral.png" title="#caption08" alt="" /><img src="http://img51.imageshack.us/img51/4452/gatob.png" title="#caption09" alt="" /><img src="http://img845.imageshack.us/img845/5937/kittyr.png" title="#caption10" alt="" /><img src="http://imageshack.us/a/img109/2121/hubz.png" title="#caption11" alt="" /><img src="http://img32.imageshack.us/img32/631/thanksp.png" title="#caption12" alt="" /><div id="caption01" class="nivo-html-caption">
This will display the caption #1, just edit this part.
</div><div id="caption02" class="nivo-html-caption">
This will display the caption #2, just edit this part.
</div><div id="caption03" class="nivo-html-caption">
This will display the caption #3, just edit this part.
</div><div id="caption04" class="nivo-html-caption">
This will display the caption #4, just edit this part.
</div><div id="caption05" class="nivo-html-caption">
This will display the caption #5, just edit this part.
</div><div id="caption06" class="nivo-html-caption">
This will display the caption #6, just edit this part.
</div><div id="caption07" class="nivo-html-caption">
This will display the caption #7, just edit this part.
</div><div id="caption08" class="nivo-html-caption">
This will display the caption #8, just edit this part.
</div><div id="caption09" class="nivo-html-caption">
This will display the caption #9, just edit this part.
</div><div id="caption10" class="nivo-html-caption">
This will display the caption #10, just edit this part.
</div><div id="caption11" class="nivo-html-caption">
This will display the caption #11, just edit this part.
</div><div id="caption12" class="nivo-html-caption">
This will display the caption #12, just edit this part.
</div>
</div>
</div>
<center>
<p><script type="text/javascript">
jQuery(window).load(function(){
jQuery("#nivoslider-125").nivoSlider({
effect:"random",
slices:15,
boxCols:8,
boxRows:4,
animSpeed:500,
pauseTime:3000,
startSlide:0,
directionNav:true,
directionNavHide:true,
controlNav:true,
controlNavThumbs:false,
controlNavThumbsFromRel:true,
keyboardNav:true,
pauseOnHover:true,
manualAdvance:false
});
});
</script>
</div>
What am I doing wrong? Thanks in advance.
Last edited by angel_of_night on April 26th 2013, 3:11 pm; edited 1 time in total
angel_of_night- Forumember
- Posts : 565
Reputation : 10
Language : portuguese
Re: Nivo Slider Problem
I really really need a fast help with this please
angel_of_night- Forumember
- Posts : 565
Reputation : 10
Language : portuguese
Re: Nivo Slider Problem
Use this one instead, it should work now.
- Code:
<link rel="stylesheet" href="http://static.tumblr.com/hhedat8/8cbmksz3o/nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="http://static.tumblr.com/hhedat8/NnQmksygd/bar.css" type="text/css" media="screen" />
<link rel="stylesheet" href="http://static.tumblr.com/hhedat8/J4Bmksyye/default.css" type="text/css" media="screen" />
<center><div id="wrapper">
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider"><img src="http://img526.imageshack.us/img526/6725/moonm.png" title="#caption01" alt="" /><img src="http://img803.imageshack.us/img803/1818/villageq.png" title="#caption02" alt="" /><img src="http://img208.imageshack.us/img208/444/kcibrfilms.png" title="#caption03" alt="" /><img src="http://img267.imageshack.us/img267/5899/dfghje.png" title="#caption04" alt="" /><img src="http://img22.imageshack.us/img22/6408/cartere.png" title="#caption05" alt="" /><img src="http://img855.imageshack.us/img855/1989/spawnh.png" title="#caption06" alt="" /><img src="http://img268.imageshack.us/img268/4659/meowys.png" title="#caption07" alt="" /><img src="http://img811.imageshack.us/img811/9466/cathedral.png" title="#caption08" alt="" /><img src="http://img51.imageshack.us/img51/4452/gatob.png" title="#caption09" alt="" /><img src="http://img845.imageshack.us/img845/5937/kittyr.png" title="#caption10" alt="" /><img src="http://imageshack.us/a/img109/2121/hubz.png" title="#caption11" alt="" /><img src="http://img32.imageshack.us/img32/631/thanksp.png" title="#caption12" alt="" /><div id="caption01" class="nivo-html-caption">
This will display the caption #1, just edit this part.
</div><div id="caption02" class="nivo-html-caption">
This will display the caption #2, just edit this part.
</div><div id="caption03" class="nivo-html-caption">
This will display the caption #3, just edit this part.
</div><div id="caption04" class="nivo-html-caption">
This will display the caption #4, just edit this part.
</div><div id="caption05" class="nivo-html-caption">
This will display the caption #5, just edit this part.
</div><div id="caption06" class="nivo-html-caption">
This will display the caption #6, just edit this part.
</div><div id="caption07" class="nivo-html-caption">
This will display the caption #7, just edit this part.
</div><div id="caption08" class="nivo-html-caption">
This will display the caption #8, just edit this part.
</div><div id="caption09" class="nivo-html-caption">
This will display the caption #9, just edit this part.
</div><div id="caption10" class="nivo-html-caption">
This will display the caption #10, just edit this part.
</div><div id="caption11" class="nivo-html-caption">
This will display the caption #11, just edit this part.
</div><div id="caption12" class="nivo-html-caption">
This will display the caption #12, just edit this part.
</div>
</div>
</div>
<center>
<script src="http://static.tumblr.com/hhedat8/NqOmksx73/jquery.nivo.slider.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(window).load(function() {
jQuery('#slider').nivoSlider();
});
</script>
</div>
Re: Nivo Slider Problem
Not really... Did this:
angel_of_night- Forumember
- Posts : 565
Reputation : 10
Language : portuguese
Re: Nivo Slider Problem
Should be working fine. Did you use the code i provide instead?
If yes, provide your forum url.
If yes, provide your forum url.
Re: Nivo Slider Problem
I posted the code you gave me.E-Mark wrote:Should be working fine. Did you use the code i provide instead?
If yes, provide your forum url.
Last edited by angel_of_night on April 26th 2013, 3:18 pm; edited 1 time in total
angel_of_night- Forumember
- Posts : 565
Reputation : 10
Language : portuguese
Re: Nivo Slider Problem
I did... its on the top of the page.
angel_of_night- Forumember
- Posts : 565
Reputation : 10
Language : portuguese
Re: Nivo Slider Problem
Add this to your CSS:
- Code:
.theme-default .nivo-controlNav {
position: initial !important;
margin-left: 150px !important;
}
Re: Nivo Slider Problem
Thanks!! That helped with the position of the dots.
But it still shows 24 instead of 12
But it still shows 24 instead of 12
angel_of_night- Forumember
- Posts : 565
Reputation : 10
Language : portuguese
Re: Nivo Slider Problem
Anyone.....
This is my code in CSS:
My code in Generalities
And my code in javascript:
This is my code in CSS:
- Code:
/*
* jQuery Nivo Slider v2.7.1
* 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
*/
/* 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:6;
display:none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
display:block;
position:absolute;
z-index:5;
height:100%;
}
.nivo-box {
display:block;
position:absolute;
z-index:5;
}
/* 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:8;
}
.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:9;
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:9;
cursor:pointer;
}
.nivo-controlNav a.active {
font-weight:bold;
}
/*
Skin Name: Nivo Slider Default Theme
Skin URI: http://nivo.dev7studios.com
Skin Type: flexible
Description: The default skin for the Nivo Slider.
Version: 1.0
Author: Gilbert Pellegrom
Author URI: http://dev7studios.com
*/
.theme-default .nivoSlider {
position:relative;
background:#fff url(http://i46.servimg.com/u/f46/15/66/68/20/loadin10.gif) no-repeat 50% 50%;
margin-bottom:50px;
-webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
-moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
box-shadow: 0px 1px 5px 0px #4a4a4a;
}
.theme-default .nivoSlider img {
position:absolute;
top:0px;
left:0px;
display:none;
}
.theme-default .nivoSlider a {
border:0;
display:block;
}
.theme-default .nivo-controlNav {
position: initial !important;
margin-left: 150px !important;
}
.theme-default .nivo-controlNav a {
display:block;
width:22px;
height:22px;
background:url(http://i46.servimg.com/u/f46/15/66/68/20/bullet10.png) no-repeat;
text-indent:-9999px;
border:0;
margin-right:3px;
float:left;
}
.theme-default .nivo-controlNav a.active {
background-position:0 -22px;
}
.theme-default .nivo-directionNav a {
display:block;
width:30px;
height:30px;
background:url(http://i46.servimg.com/u/f46/15/66/68/20/arrows10.png) no-repeat;
text-indent:-9999px;
border:0;
}
.theme-default a.nivo-nextNav {
background-position:-30px 0;
right:15px;
}
.theme-default a.nivo-prevNav {
left:15px;
}
.theme-default .nivo-caption {
font-family: Helvetica, Arial, sans-serif;
}
.theme-default .nivo-caption a {
color:#fff;
border-bottom:1px dotted #fff;
}
.theme-default .nivo-caption a:hover {
color:#fff;
}
My code in Generalities
- Code:
<link rel="stylesheet" href="http://static.tumblr.com/hhedat8/8cbmksz3o/nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="http://static.tumblr.com/hhedat8/NnQmksygd/bar.css" type="text/css" media="screen" />
<link rel="stylesheet" href="http://static.tumblr.com/hhedat8/J4Bmksyye/default.css" type="text/css" media="screen" />
<center><div id="wrapper">
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider"><img src="http://img526.imageshack.us/img526/6725/moonm.png" title="#caption01" alt="" /><img src="http://img803.imageshack.us/img803/1818/villageq.png" title="#caption02" alt="" /><img src="http://img208.imageshack.us/img208/444/kcibrfilms.png" title="#caption03" alt="" /><img src="http://img267.imageshack.us/img267/5899/dfghje.png" title="#caption04" alt="" /><img src="http://img22.imageshack.us/img22/6408/cartere.png" title="#caption05" alt="" /><img src="http://img855.imageshack.us/img855/1989/spawnh.png" title="#caption06" alt="" /><img src="http://img268.imageshack.us/img268/4659/meowys.png" title="#caption07" alt="" /><img src="http://img811.imageshack.us/img811/9466/cathedral.png" title="#caption08" alt="" /><img src="http://img51.imageshack.us/img51/4452/gatob.png" title="#caption09" alt="" /><img src="http://img845.imageshack.us/img845/5937/kittyr.png" title="#caption10" alt="" /><img src="http://imageshack.us/a/img109/2121/hubz.png" title="#caption11" alt="" /><img src="http://img32.imageshack.us/img32/631/thanksp.png" title="#caption12" alt="" /><div id="caption01" class="nivo-html-caption">
This will display the caption #1, just edit this part.
</div><div id="caption02" class="nivo-html-caption">
This will display the caption #2, just edit this part.
</div><div id="caption03" class="nivo-html-caption">
This will display the caption #3, just edit this part.
</div><div id="caption04" class="nivo-html-caption">
This will display the caption #4, just edit this part.
</div><div id="caption05" class="nivo-html-caption">
This will display the caption #5, just edit this part.
</div><div id="caption06" class="nivo-html-caption">
This will display the caption #6, just edit this part.
</div><div id="caption07" class="nivo-html-caption">
This will display the caption #7, just edit this part.
</div><div id="caption08" class="nivo-html-caption">
This will display the caption #8, just edit this part.
</div><div id="caption09" class="nivo-html-caption">
This will display the caption #9, just edit this part.
</div><div id="caption10" class="nivo-html-caption">
This will display the caption #10, just edit this part.
</div><div id="caption11" class="nivo-html-caption">
This will display the caption #11, just edit this part.
</div><div id="caption12" class="nivo-html-caption">
This will display the caption #12, just edit this part.
</div>
</div>
</div>
<center>
<script src="http://static.tumblr.com/hhedat8/NqOmksx73/jquery.nivo.slider.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(window).load(function() {
jQuery('#slider').nivoSlider();
});
</script>
</div>
And my code in javascript:
- Code:
/*
* jQuery Nivo Slider v2.7
* 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
*/
(function(a){var b=function(b,c){var d=a.extend({},a.fn.nivoSlider.defaults,c);var e={currentSlide:0,currentImage:"",totalSlides:0,running:false,paused:false,stop:false};var f=a(b);f.data("nivo:vars",e);f.css("position","relative");f.addClass("nivoSlider");var g=f.children();g.each(function(){var b=a(this);var c="";if(!b.is("img")){if(b.is("a")){b.addClass("nivo-imageLink");c=b}b=b.find("img:first")}var d=b.width();if(d==0)d=b.attr("width");var g=b.height();if(g==0)g=b.attr("height");if(d>f.width()){f.width(d)}if(g>f.height()){f.height(g)}if(c!=""){c.css("display","none")}b.css("display","none");e.totalSlides++});if(d.randomStart){d.startSlide=Math.floor(Math.random()*e.totalSlides)}if(d.startSlide>0){if(d.startSlide>=e.totalSlides)d.startSlide=e.totalSlides-1;e.currentSlide=d.startSlide}if(a(g[e.currentSlide]).is("img")){e.currentImage=a(g[e.currentSlide])}else{e.currentImage=a(g[e.currentSlide]).find("img:first")}if(a(g[e.currentSlide]).is("a")){a(g[e.currentSlide]).css("display","block")}f.css("background",'url("'+e.currentImage.attr("src")+'") no-repeat');f.append(a('<div class="nivo-caption"><p></p></div>').css({display:"none",opacity:d.captionOpacity}));var h=function(b){var c=a(".nivo-caption",f);if(e.currentImage.attr("title")!=""&&e.currentImage.attr("title")!=undefined){var d=e.currentImage.attr("title");if(d.substr(0,1)=="#")d=a(d).html();if(c.css("display")=="block"){c.find("p").stop().fadeOut(b.animSpeed,function(){a(this).html(d);a(this).stop().fadeIn(b.animSpeed)})}else{c.find("p").html(d)}c.stop().fadeIn(b.animSpeed)}else{c.stop().fadeOut(b.animSpeed)}};h(d);var i=0;if(!d.manualAdvance&&g.length>1){i=setInterval(function(){o(f,g,d,false)},d.pauseTime)}if(d.directionNav){f.append('<div class="nivo-directionNav"><a class="nivo-prevNav">'+d.prevText+'</a><a class="nivo-nextNav">'+d.nextText+"</a></div>");if(d.directionNavHide){a(".nivo-directionNav",f).hide();f.hover(function(){a(".nivo-directionNav",f).show()},function(){a(".nivo-directionNav",f).hide()})}a("a.nivo-prevNav",f).live("click",function(){if(e.running)return false;clearInterval(i);i="";e.currentSlide-=2;o(f,g,d,"prev")});a("a.nivo-nextNav",f).live("click",function(){if(e.running)return false;clearInterval(i);i="";o(f,g,d,"next")})}if(d.controlNav){var j=a('<div class="nivo-controlNav"></div>');f.append(j);for(var k=0;k<g.length;k++){if(d.controlNavThumbs){var l=g.eq(k);if(!l.is("img")){l=l.find("img:first")}if(d.controlNavThumbsFromRel){j.append('<a class="nivo-control" rel="'+k+'"><img src="'+l.attr("rel")+'" alt="" /></a>')}else{j.append('<a class="nivo-control" rel="'+k+'"><img src="'+l.attr("src").replace(d.controlNavThumbsSearch,d.controlNavThumbsReplace)+'" alt="" /></a>')}}else{j.append('<a class="nivo-control" rel="'+k+'">'+(k+1)+"</a>")}}a(".nivo-controlNav a:eq("+e.currentSlide+")",f).addClass("active");a(".nivo-controlNav a",f).live("click",function(){if(e.running)return false;if(a(this).hasClass("active"))return false;clearInterval(i);i="";f.css("background",'url("'+e.currentImage.attr("src")+'") no-repeat');e.currentSlide=a(this).attr("rel")-1;o(f,g,d,"control")})}if(d.keyboardNav){a(window).keypress(function(a){if(a.keyCode=="37"){if(e.running)return false;clearInterval(i);i="";e.currentSlide-=2;o(f,g,d,"prev")}if(a.keyCode=="39"){if(e.running)return false;clearInterval(i);i="";o(f,g,d,"next")}})}if(d.pauseOnHover){f.hover(function(){e.paused=true;clearInterval(i);i=""},function(){e.paused=false;if(i==""&&!d.manualAdvance){i=setInterval(function(){o(f,g,d,false)},d.pauseTime)}})}f.bind("nivo:animFinished",function(){e.running=false;a(g).each(function(){if(a(this).is("a")){a(this).css("display","none")}});if(a(g[e.currentSlide]).is("a")){a(g[e.currentSlide]).css("display","block")}if(i==""&&!e.paused&&!d.manualAdvance){i=setInterval(function(){o(f,g,d,false)},d.pauseTime)}d.afterChange.call(this)});var m=function(b,c,d){for(var e=0;e<c.slices;e++){var f=Math.round(b.width()/c.slices);if(e==c.slices-1){b.append(a('<div class="nivo-slice"></div>').css({left:f*e+"px",width:b.width()-f*e+"px",height:"0px",opacity:"0",background:'url("'+d.currentImage.attr("src")+'") no-repeat -'+(f+e*f-f)+"px 0%"}))}else{b.append(a('<div class="nivo-slice"></div>').css({left:f*e+"px",width:f+"px",height:"0px",opacity:"0",background:'url("'+d.currentImage.attr("src")+'") no-repeat -'+(f+e*f-f)+"px 0%"}))}}};var n=function(b,c,d){var e=Math.round(b.width()/c.boxCols);var f=Math.round(b.height()/c.boxRows);for(var g=0;g<c.boxRows;g++){for(var h=0;h<c.boxCols;h++){if(h==c.boxCols-1){b.append(a('<div class="nivo-box"></div>').css({opacity:0,left:e*h+"px",top:f*g+"px",width:b.width()-e*h+"px",height:f+"px",background:'url("'+d.currentImage.attr("src")+'") no-repeat -'+(e+h*e-e)+"px -"+(f+g*f-f)+"px"}))}else{b.append(a('<div class="nivo-box"></div>').css({opacity:0,left:e*h+"px",top:f*g+"px",width:e+"px",height:f+"px",background:'url("'+d.currentImage.attr("src")+'") no-repeat -'+(e+h*e-e)+"px -"+(f+g*f-f)+"px"}))}}}};var o=function(b,c,d,e){var f=b.data("nivo:vars");if(f&&f.currentSlide==f.totalSlides-1){d.lastSlide.call(this)}if((!f||f.stop)&&!e)return false;d.beforeChange.call(this);if(!e){b.css("background",'url("'+f.currentImage.attr("src")+'") no-repeat')}else{if(e=="prev"){b.css("background",'url("'+f.currentImage.attr("src")+'") no-repeat')}if(e=="next"){b.css("background",'url("'+f.currentImage.attr("src")+'") no-repeat')}}f.currentSlide++;if(f.currentSlide==f.totalSlides){f.currentSlide=0;d.slideshowEnd.call(this)}if(f.currentSlide<0)f.currentSlide=f.totalSlides-1;if(a(c[f.currentSlide]).is("img")){f.currentImage=a(c[f.currentSlide])}else{f.currentImage=a(c[f.currentSlide]).find("img:first")}if(d.controlNav){a(".nivo-controlNav a",b).removeClass("active");a(".nivo-controlNav a:eq("+f.currentSlide+")",b).addClass("active")}h(d);a(".nivo-slice",b).remove();a(".nivo-box",b).remove();var g=d.effect;if(d.effect=="random"){var i=new Array("sliceDownRight","sliceDownLeft","sliceUpRight","sliceUpLeft","sliceUpDown","sliceUpDownLeft","fold","fade","boxRandom","boxRain","boxRainReverse","boxRainGrow","boxRainGrowReverse");g=i[Math.floor(Math.random()*(i.length+1))];if(g==undefined)g="fade"}if(d.effect.indexOf(",")!=-1){var i=d.effect.split(",");g=i[Math.floor(Math.random()*i.length)];if(g==undefined)g="fade"}if(f.currentImage.attr("data-transition")){g=f.currentImage.attr("data-transition")}f.running=true;if(g=="sliceDown"||g=="sliceDownRight"||g=="sliceDownLeft"){m(b,d,f);var j=0;var k=0;var l=a(".nivo-slice",b);if(g=="sliceDownLeft")l=a(".nivo-slice",b)._reverse();l.each(function(){var c=a(this);c.css({top:"0px"});if(k==d.slices-1){setTimeout(function(){c.animate({height:"100%",opacity:"1.0"},d.animSpeed,"",function(){b.trigger("nivo:animFinished")})},100+j)}else{setTimeout(function(){c.animate({height:"100%",opacity:"1.0"},d.animSpeed)},100+j)}j+=50;k++})}else if(g=="sliceUp"||g=="sliceUpRight"||g=="sliceUpLeft"){m(b,d,f);var j=0;var k=0;var l=a(".nivo-slice",b);if(g=="sliceUpLeft")l=a(".nivo-slice",b)._reverse();l.each(function(){var c=a(this);c.css({bottom:"0px"});if(k==d.slices-1){setTimeout(function(){c.animate({height:"100%",opacity:"1.0"},d.animSpeed,"",function(){b.trigger("nivo:animFinished")})},100+j)}else{setTimeout(function(){c.animate({height:"100%",opacity:"1.0"},d.animSpeed)},100+j)}j+=50;k++})}else if(g=="sliceUpDown"||g=="sliceUpDownRight"||g=="sliceUpDownLeft"){m(b,d,f);var j=0;var k=0;var o=0;var l=a(".nivo-slice",b);if(g=="sliceUpDownLeft")l=a(".nivo-slice",b)._reverse();l.each(function(){var c=a(this);if(k==0){c.css("top","0px");k++}else{c.css("bottom","0px");k=0}if(o==d.slices-1){setTimeout(function(){c.animate({height:"100%",opacity:"1.0"},d.animSpeed,"",function(){b.trigger("nivo:animFinished")})},100+j)}else{setTimeout(function(){c.animate({height:"100%",opacity:"1.0"},d.animSpeed)},100+j)}j+=50;o++})}else if(g=="fold"){m(b,d,f);var j=0;var k=0;a(".nivo-slice",b).each(function(){var c=a(this);var e=c.width();c.css({top:"0px",height:"100%",width:"0px"});if(k==d.slices-1){setTimeout(function(){c.animate({width:e,opacity:"1.0"},d.animSpeed,"",function(){b.trigger("nivo:animFinished")})},100+j)}else{setTimeout(function(){c.animate({width:e,opacity:"1.0"},d.animSpeed)},100+j)}j+=50;k++})}else if(g=="fade"){m(b,d,f);var q=a(".nivo-slice:first",b);q.css({height:"100%",width:b.width()+"px"});q.animate({opacity:"1.0"},d.animSpeed*2,"",function(){b.trigger("nivo:animFinished")})}else if(g=="slideInRight"){m(b,d,f);var q=a(".nivo-slice:first",b);q.css({height:"100%",width:"0px",opacity:"1"});q.animate({width:b.width()+"px"},d.animSpeed*2,"",function(){b.trigger("nivo:animFinished")})}else if(g=="slideInLeft"){m(b,d,f);var q=a(".nivo-slice:first",b);q.css({height:"100%",width:"0px",opacity:"1",left:"",right:"0px"});q.animate({width:b.width()+"px"},d.animSpeed*2,"",function(){q.css({left:"0px",right:""});b.trigger("nivo:animFinished")})}else if(g=="boxRandom"){n(b,d,f);var r=d.boxCols*d.boxRows;var k=0;var j=0;var s=p(a(".nivo-box",b));s.each(function(){var c=a(this);if(k==r-1){setTimeout(function(){c.animate({opacity:"1"},d.animSpeed,"",function(){b.trigger("nivo:animFinished")})},100+j)}else{setTimeout(function(){c.animate({opacity:"1"},d.animSpeed)},100+j)}j+=20;k++})}else if(g=="boxRain"||g=="boxRainReverse"||g=="boxRainGrow"||g=="boxRainGrowReverse"){n(b,d,f);var r=d.boxCols*d.boxRows;var k=0;var j=0;var t=0;var u=0;var v=new Array;v[t]=new Array;var s=a(".nivo-box",b);if(g=="boxRainReverse"||g=="boxRainGrowReverse"){s=a(".nivo-box",b)._reverse()}s.each(function(){v[t][u]=a(this);u++;if(u==d.boxCols){t++;u=0;v[t]=new Array}});for(var w=0;w<d.boxCols*2;w++){var x=w;for(var y=0;y<d.boxRows;y++){if(x>=0&&x<d.boxCols){(function(c,e,f,h,i){var j=a(v[c][e]);var k=j.width();var l=j.height();if(g=="boxRainGrow"||g=="boxRainGrowReverse"){j.width(0).height(0)}if(h==i-1){setTimeout(function(){j.animate({opacity:"1",width:k,height:l},d.animSpeed/1.3,"",function(){b.trigger("nivo:animFinished")})},100+f)}else{setTimeout(function(){j.animate({opacity:"1",width:k,height:l},d.animSpeed/1.3)},100+f)}})(y,x,j,k,r);k++}x--}j+=100}}};var p=function(a){for(var b,c,d=a.length;d;b=parseInt(Math.random()*d),c=a[--d],a[d]=a[b],a[b]=c);return a};var q=function(a){if(this.console&&typeof console.log!="undefined")console.log(a)};this.stop=function(){if(!a(b).data("nivo:vars").stop){a(b).data("nivo:vars").stop=true;q("Stop Slider")}};this.start=function(){if(a(b).data("nivo:vars").stop){a(b).data("nivo:vars").stop=false;q("Start Slider")}};d.afterLoad.call(this);return this};a.fn.nivoSlider=function(c){return this.each(function(d,e){var f=a(this);if(f.data("nivoslider"))return f.data("nivoslider");var g=new b(this,c);f.data("nivoslider",g)})};a.fn.nivoSlider.defaults={effect:"random",slices:15,boxCols:8,boxRows:4,animSpeed:500,pauseTime:3e3,startSlide:0,directionNav:true,directionNavHide:true,controlNav:true,controlNavThumbs:false,controlNavThumbsFromRel:false,controlNavThumbsSearch:".jpg",controlNavThumbsReplace:"_thumb.jpg",keyboardNav:true,pauseOnHover:true,manualAdvance:false,captionOpacity:.8,prevText:"Prev",nextText:"Next",randomStart:false,beforeChange:function(){},afterChange:function(){},slideshowEnd:function(){},lastSlide:function(){},afterLoad:function(){}};a.fn._reverse=[].reverse})(jQuery)
angel_of_night- Forumember
- Posts : 565
Reputation : 10
Language : portuguese
Re: Nivo Slider Problem
Sorry for late reply!
Use this one instead:
Just change the text inside the title for caption display.
Use this one instead:
- Code:
<link rel="stylesheet" href="http://static.tumblr.com/hhedat8/8cbmksz3o/nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="http://static.tumblr.com/hhedat8/NnQmksygd/bar.css" type="text/css" media="screen" />
<link rel="stylesheet" href="http://static.tumblr.com/hhedat8/J4Bmksyye/default.css" type="text/css" media="screen" />
<center><div id="wrapper"><div class="slider-wrapper theme-default"><div id="slider" class="nivoSlider">
<img src="http://img526.imageshack.us/img526/6725/moonm.png" title="This displays the caption 1." />
<img src="http://img803.imageshack.us/img803/1818/villageq.png" title="This displays the caption 2." />
<img src="http://img208.imageshack.us/img208/444/kcibrfilms.png" title="This displays the caption 3." />
<img src="http://img267.imageshack.us/img267/5899/dfghje.png" title="This displays the caption 4." />
<img src="http://img22.imageshack.us/img22/6408/cartere.png" title="This displays the caption 5." />
<img src="http://img855.imageshack.us/img855/1989/spawnh.png" title="This displays the caption 6." />
<img src="http://img268.imageshack.us/img268/4659/meowys.png" title="This displays the caption 7." /><img src="http://img811.imageshack.us/img811/9466/cathedral.png" title="This displays the caption 8." /><img src="http://img51.imageshack.us/img51/4452/gatob.png" title="This displays the caption 9." />
<img src="http://img845.imageshack.us/img845/5937/kittyr.png" title="This displays the caption 10." />
<img src="http://imageshack.us/a/img109/2121/hubz.png" title="This displays the caption 11." />
<img src="http://img32.imageshack.us/img32/631/thanksp.png" title="This displays the caption 12." />
</div>
</div>
</div>
</center>
<script src="http://static.tumblr.com/hhedat8/NqOmksx73/jquery.nivo.slider.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(window).load(function() {
jQuery('#slider').nivoSlider();
});
</script>
Just change the text inside the title for caption display.
Re: Nivo Slider Problem
Haha no worries everyone has a lifeE-Mark wrote:Sorry for late reply!
Use this one instead:
- Code:
<link rel="stylesheet" href="http://static.tumblr.com/hhedat8/8cbmksz3o/nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="http://static.tumblr.com/hhedat8/NnQmksygd/bar.css" type="text/css" media="screen" />
<link rel="stylesheet" href="http://static.tumblr.com/hhedat8/J4Bmksyye/default.css" type="text/css" media="screen" />
<center><div id="wrapper"><div class="slider-wrapper theme-default"><div id="slider" class="nivoSlider">
<img src="http://img526.imageshack.us/img526/6725/moonm.png" title="This displays the caption 1." />
<img src="http://img803.imageshack.us/img803/1818/villageq.png" title="This displays the caption 2." />
<img src="http://img208.imageshack.us/img208/444/kcibrfilms.png" title="This displays the caption 3." />
<img src="http://img267.imageshack.us/img267/5899/dfghje.png" title="This displays the caption 4." />
<img src="http://img22.imageshack.us/img22/6408/cartere.png" title="This displays the caption 5." />
<img src="http://img855.imageshack.us/img855/1989/spawnh.png" title="This displays the caption 6." />
<img src="http://img268.imageshack.us/img268/4659/meowys.png" title="This displays the caption 7." /><img src="http://img811.imageshack.us/img811/9466/cathedral.png" title="This displays the caption 8." /><img src="http://img51.imageshack.us/img51/4452/gatob.png" title="This displays the caption 9." />
<img src="http://img845.imageshack.us/img845/5937/kittyr.png" title="This displays the caption 10." />
<img src="http://imageshack.us/a/img109/2121/hubz.png" title="This displays the caption 11." />
<img src="http://img32.imageshack.us/img32/631/thanksp.png" title="This displays the caption 12." />
</div>
</div>
</div>
</center>
<script src="http://static.tumblr.com/hhedat8/NqOmksx73/jquery.nivo.slider.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(window).load(function() {
jQuery('#slider').nivoSlider();
});
</script>
Just change the text inside the title for caption display.
That helped thanks!!! But one last request, the dots are not in the middle anymore, how to put them in the middle?
angel_of_night- Forumember
- Posts : 565
Reputation : 10
Language : portuguese
Re: Nivo Slider Problem
Replace the CSS i gave you with this one:
- Code:
.theme-default .nivo-controlNav {
position: initial !important;
margin-left: 320px !important;
}
Re: Nivo Slider Problem
Thank you very much!!!!!!!!!!
angel_of_night- Forumember
- Posts : 565
Reputation : 10
Language : portuguese
Re: Nivo Slider Problem
Topic Solved & Locked |
Jophy- ForumGuru
- Posts : 17922
Reputation : 836
Language : English
Location : Somewhere
Similar topics
» Problem with Nivo Slider
» Nivo Slider
» Nivo Slider not working
» Nivo Slider Caption
» Possible to move Nivo slider position ?
» Nivo Slider
» Nivo Slider not working
» Nivo Slider Caption
» Possible to move Nivo slider position ?
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum