The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Nivo Slider Problem

3 posters

Go down

Solved Nivo Slider Problem

Post by angel_of_night Sun Apr 21, 2013 9:36 am

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...

Nivo Slider Problem Asdfsdfasdf

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 Fri Apr 26, 2013 9:11 am; edited 1 time in total
angel_of_night
angel_of_night
Forumember

Female Posts : 565
Reputation : 10
Language : portuguese

Back to top Go down

Solved Re: Nivo Slider Problem

Post by angel_of_night Mon Apr 22, 2013 11:12 am

I really really need a fast help with this please :/
angel_of_night
angel_of_night
Forumember

Female Posts : 565
Reputation : 10
Language : portuguese

Back to top Go down

Solved Re: Nivo Slider Problem

Post by E-Mark Mon Apr 22, 2013 11:14 pm

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>
E-Mark
E-Mark
Active Poster

Male Posts : 1412
Reputation : 169
Language : English
Location : Bitcoin

http://coding-spot.darkbb.com/

Back to top Go down

Solved Re: Nivo Slider Problem

Post by angel_of_night Tue Apr 23, 2013 6:34 am

Not really... Did this:
Nivo Slider Problem NamelessCraft
angel_of_night
angel_of_night
Forumember

Female Posts : 565
Reputation : 10
Language : portuguese

Back to top Go down

Solved Re: Nivo Slider Problem

Post by E-Mark Tue Apr 23, 2013 7:13 am

Should be working fine. Did you use the code i provide instead?
If yes, provide your forum url. bye
E-Mark
E-Mark
Active Poster

Male Posts : 1412
Reputation : 169
Language : English
Location : Bitcoin

http://coding-spot.darkbb.com/

Back to top Go down

Solved Re: Nivo Slider Problem

Post by angel_of_night Tue Apr 23, 2013 5:21 pm

E-Mark wrote:Should be working fine. Did you use the code i provide instead?
If yes, provide your forum url. bye
I posted the code you gave me.


Last edited by angel_of_night on Fri Apr 26, 2013 9:18 am; edited 1 time in total
angel_of_night
angel_of_night
Forumember

Female Posts : 565
Reputation : 10
Language : portuguese

Back to top Go down

Solved Re: Nivo Slider Problem

Post by E-Mark Wed Apr 24, 2013 12:35 am

Where is it? Can you put the code on your forum? So i can check it. bye
E-Mark
E-Mark
Active Poster

Male Posts : 1412
Reputation : 169
Language : English
Location : Bitcoin

http://coding-spot.darkbb.com/

Back to top Go down

Solved Re: Nivo Slider Problem

Post by angel_of_night Wed Apr 24, 2013 5:29 am

I did... its on the top of the page.
angel_of_night
angel_of_night
Forumember

Female Posts : 565
Reputation : 10
Language : portuguese

Back to top Go down

Solved Re: Nivo Slider Problem

Post by E-Mark Wed Apr 24, 2013 8:01 am

Add this to your CSS:
Code:
.theme-default .nivo-controlNav {
position: initial !important;
margin-left: 150px !important;
}
E-Mark
E-Mark
Active Poster

Male Posts : 1412
Reputation : 169
Language : English
Location : Bitcoin

http://coding-spot.darkbb.com/

Back to top Go down

Solved Re: Nivo Slider Problem

Post by angel_of_night Wed Apr 24, 2013 8:24 am

Thanks!! Very Happy That helped with the position of the dots.
But it still shows 24 instead of 12 Sad
angel_of_night
angel_of_night
Forumember

Female Posts : 565
Reputation : 10
Language : portuguese

Back to top Go down

Solved Re: Nivo Slider Problem

Post by angel_of_night Thu Apr 25, 2013 12:30 pm

Anyone.....

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
angel_of_night
Forumember

Female Posts : 565
Reputation : 10
Language : portuguese

Back to top Go down

Solved Re: Nivo Slider Problem

Post by E-Mark Fri Apr 26, 2013 3:39 am

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.
E-Mark
E-Mark
Active Poster

Male Posts : 1412
Reputation : 169
Language : English
Location : Bitcoin

http://coding-spot.darkbb.com/

Back to top Go down

Solved Re: Nivo Slider Problem

Post by angel_of_night Fri Apr 26, 2013 8:54 am

E-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.
Haha no worries Smile everyone has a life Razz
That helped thanks!!! But one last request, the dots are not in the middle anymore, how to put them in the middle? Hello
angel_of_night
angel_of_night
Forumember

Female Posts : 565
Reputation : 10
Language : portuguese

Back to top Go down

Solved Re: Nivo Slider Problem

Post by E-Mark Fri Apr 26, 2013 8:56 am

Replace the CSS i gave you with this one:
Code:
.theme-default .nivo-controlNav {
position: initial !important;
margin-left: 320px !important;
}

bye
E-Mark
E-Mark
Active Poster

Male Posts : 1412
Reputation : 169
Language : English
Location : Bitcoin

http://coding-spot.darkbb.com/

Back to top Go down

Solved Re: Nivo Slider Problem

Post by angel_of_night Fri Apr 26, 2013 9:10 am

Thank you very much!!!!!!!!!! :wouhou:
angel_of_night
angel_of_night
Forumember

Female Posts : 565
Reputation : 10
Language : portuguese

Back to top Go down

Solved Re: Nivo Slider Problem

Post by Jophy Fri Apr 26, 2013 10:05 am

Topic Solved & Locked
Jophy
Jophy
ForumGuru

Male Posts : 17924
Reputation : 836
Language : English
Location : Somewhere

Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum