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 April 21st 2013, 3:36 pm

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 April 26th 2013, 3:11 pm; 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 April 22nd 2013, 5:12 pm

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 April 23rd 2013, 5:14 am

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 : 1411
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 April 23rd 2013, 12:34 pm

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 April 23rd 2013, 1:13 pm

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 : 1411
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 April 23rd 2013, 11: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 April 26th 2013, 3:18 pm; 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 April 24th 2013, 6: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 : 1411
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 April 24th 2013, 11: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 April 24th 2013, 2:01 pm

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 : 1411
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 April 24th 2013, 2:24 pm

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 April 25th 2013, 6: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 April 26th 2013, 9: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 : 1411
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 April 26th 2013, 2:54 pm

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 April 26th 2013, 2:56 pm

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 : 1411
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 April 26th 2013, 3:10 pm

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 April 26th 2013, 4:05 pm

Topic Solved & Locked
Jophy
Jophy
ForumGuru

Male Posts : 17922
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