The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Nivo Slider

View previous topic View next topic Go down

In progress Nivo Slider

Post by Amel Nuhanovic on January 26th 2012, 7:48 am

Well i really love to get this at forum but how??? http://nivo.dev7studios.com/ i know its little hard to make but i need because forum is about one online game and there i will put some screenshot from game and something other....if someone wanna help and know how to make ask please what you need or idk

THANKS


Amel Nuhanovic
Forumember

Male Posts : 144
Reputation : 1
Language : Bosnian
Location : Bosnia and Herzegovina

Back to top Go down

In progress Re: Nivo Slider

Post by nutsonlizards on January 26th 2012, 2:04 pm

i would download try your self first they can be tricky to set up , i would set it up on a html page and simply insert it to your forum using a html table + iframe
that way you will keep all script's and html coding separate from your forum For the CSS I wouldn't try to link it just simply add <style> </style> tags within the <head> tag
to open the files you will need a program the best and simple one to use is notepad ++ http://notepad-plus-plus.org/ use the Nivo demo page to help you to set it up by right clicking and click on view page source http://nivo.dev7studios.com/demos/ also i will add this I would check to make sure it compatible with IE


nutsonlizards
Forumember

Posts : 59
Reputation : 14
Language : London

http://www.redneckherpsforum.com/forum

Back to top Go down

In progress Re: Nivo Slider

Post by Nera. on January 26th 2012, 3:23 pm

Why don't you use the old nivo slider Amele, I gave you the settings for it the last time we spoke?

Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

In progress Re: Nivo Slider

Post by Amel Nuhanovic on January 26th 2012, 6:48 pm

problem is i lost all that with old forum

Amel Nuhanovic
Forumember

Male Posts : 144
Reputation : 1
Language : Bosnian
Location : Bosnia and Herzegovina

Back to top Go down

In progress Re: Nivo Slider

Post by Nera. on January 26th 2012, 7:56 pm


Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

In progress Re: Nivo Slider

Post by Amel Nuhanovic on January 27th 2012, 11:29 am

well i add all that how you say, i change link to but dont showed at forum

this is html page management

Code:
<html>
        <head>
            <title>Nivo Slider Demo</title>
            <link rel="stylesheet" href="http://nivo.dev7studios.com/scripts/nivo-slider/nivo-slider.css" type="text/css" media="screen" />
            <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
        <style>
            background:url(http://i44.tinypic.com/346rh95.png) no-repeat;
            width:600px;
            height:392px;
            margin:0 auto;
            padding-top:74px;
            margin-top:-45px;
        }
        #slider {
            position:relative;
            width:618px;
            height:246px;
            margin-left:190px;
            background:url(http://i42.tinypic.com/20zv3ep.png) no-repeat 50% 50%;
        }
        #slider img {
            position:absolute;
            top:0px;
            left:0px;
            display:none;
        }
        #slider a {
            border:0;
            display:block;
        }
       
        .nivo-controlNav {
            position:absolute;
            left:260px;
            bottom:-42px;
        }
        .nivo-controlNav a {
            display:block;
            width:22px;
            height:22px;
            background:url(http://i22.servimg.com/u/f22/15/42/72/40/bullet10.png) no-repeat;
            text-indent:-9999px;
            border:0;
            margin-right:3px;
            float:left;
        }
        .nivo-controlNav a.active {
            background-position:0 -22px;
        }
       
        .nivo-directionNav a {
            display:block;
            width:30px;
            height:30px;
            background:url(http://i22.servimg.com/u/f22/16/52/61/30/arrows10.png) no-repeat;
            text-indent:-9999px;
            border:0;
        }
        a.nivo-nextNav {
            background-position:-30px 0;
            right:15px;
        }
        a.nivo-prevNav {
            left:15px;
        }
       
        .nivo-caption {
            text-shadow:none;
            font-family: Helvetica, Arial, sans-serif;
        width: 600px;
        }
        .nivo-caption a {
            color:#efe9d1;
            text-decoration:underline;
        }</style>
        </head>
        <body>
            <div id="wrapper">
       
                <div id="slider-wrapper">
             
                    <div id="slider" class="nivoSlider">
                        <img src="http://i40.tinypic.com/35l6kcw.gif" alt="" />
                        <a href="http://dev7studios.com"><img src="http://i43.tinypic.com/24cedf9.gif" alt="" title="This is an example of a caption" /></a>
                        <img src="http://i40.tinypic.com/vony4z.gif" alt="" />
                        <img src="http://i43.tinypic.com/ap9vn4.gif" alt="" title="#htmlcaption" />
                    </div>
                    <div id="htmlcaption" class="nivo-html-caption">
                        <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
                    </div>
             
                </div>
       
            </div>
            <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.min.js"></script>
            <script type="text/javascript" src="http://nivo.dev7studios.com/scripts/nivo-slider/jquery.nivo.slider.pack.js"></script>
            <script type="text/javascript">
        $(window).load(function() {
            $('#slider').nivoSlider();
        });
        </script>
        </body>
        </html>
and this i put on Homepage message right??

Code:
<center><iframe src="http://amelbasher.freegametalk.com/h1-nivo-slider" width="100%" height="300"></iframe></center>

Maybe its because this theme all is mixed and in other place not like before http://help.forumotion.com/t102515-brown-and-brown if you need admin or something pm i will give no problem

Amel Nuhanovic
Forumember

Male Posts : 144
Reputation : 1
Language : Bosnian
Location : Bosnia and Herzegovina

Back to top Go down

In progress Re: Nivo Slider

Post by Amel Nuhanovic on January 29th 2012, 7:16 pm

bump

Amel Nuhanovic
Forumember

Male Posts : 144
Reputation : 1
Language : Bosnian
Location : Bosnia and Herzegovina

Back to top Go down

In progress Re: Nivo Slider

Post by Amel Nuhanovic on January 30th 2012, 1:24 pm

bump

Amel Nuhanovic
Forumember

Male Posts : 144
Reputation : 1
Language : Bosnian
Location : Bosnia and Herzegovina

Back to top Go down

In progress Re: Nivo Slider

Post by Amel Nuhanovic on February 1st 2012, 2:27 pm

Someone who know how to add this to forum please

Amel Nuhanovic
Forumember

Male Posts : 144
Reputation : 1
Language : Bosnian
Location : Bosnia and Herzegovina

Back to top Go down

In progress Re: Nivo Slider

Post by Nera. on February 1st 2012, 11:02 pm

I did not check before Amel, all the links were removed by the hosting company Amel, you'll need to use the new one. Just line it up on a HTML page like I did there.

This is somewhat embarrassing, isn’t it?

It seems we can’t find what you’re looking for. Perhaps searching can help.

Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

In progress Re: Nivo Slider

Post by Amel Nuhanovic on February 4th 2012, 4:34 am

i really dont get it what you mean, maybe its because i dont know good english, what i need to change?? just show me please how and where

Amel Nuhanovic
Forumember

Male Posts : 144
Reputation : 1
Language : Bosnian
Location : Bosnia and Herzegovina

Back to top Go down

In progress Re: Nivo Slider

Post by Nera. on February 18th 2012, 11:34 am

I've managed a bit time to do the new one Amele and here if it's not to late.

Add this to AP > Display > Homepage > Message content and save:

Code:
<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:300px;"><img src="http://nivo.dev7studios.com/wp-content/uploads/2011/08/nemo83-700x300.png" alt="" /><img src="http://nivo.dev7studios.com/wp-content/uploads/2011/08/slider65-700x300.png" title="#nivoslider-125-caption-0" alt="" /><img src="http://nivo.dev7studios.com/wp-content/uploads/2011/08/walle12-700x300.png" alt="" /></div>
</div><div id="nivoslider-125-caption-0" class="nivo-html-caption">You can add captions too…</div>

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

In that part you can change the pictures you want to slide in the Nivo slider. Now you can find there these links:
http://nivo.dev7studios.com/wp-content/uploads/2011/08/nemo83-700x300.png
http://nivo.dev7studios.com/wp-content/uploads/2011/08/slider65-700x300.png
http://nivo.dev7studios.com/wp-content/uploads/2011/08/walle12-700x300.png

Replace them with yours and make sure that the width and the height of the images are fit for the slider.

Than add this to AP > Modules > JS managment and mark "On homepage"

After it enable your JS if it's not enabled:



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)

Than add the CSS of the demo theme in your AP > Display > Colors > CSS, all the pictures have been already uploaded.

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:absolute;
   left:50%;
   bottom:-42px;
    margin-left:-40px; /* Tweak this to center bullets */
}
.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;
}

Example of it working on an Forumotion forum:


Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

In progress Re: Nivo Slider

Post by Glazella on February 18th 2012, 12:33 pm

can this slider be a header too?

Glazella
Forumember

Posts : 68
Reputation : 2

http://jiyeonworldwide.com

Back to top Go down

In progress Re: Nivo Slider

Post by Nera. on February 18th 2012, 1:21 pm

@Glazella wrote:can this slider be a header too?

http://tiki.makingforum.com/forum

Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

In progress Re: Nivo Slider

Post by Glazella on February 18th 2012, 1:59 pm

Wow! How can I do it and the different forums, how can it be placed as tabs?

Glazella
Forumember

Posts : 68
Reputation : 2

http://jiyeonworldwide.com

Back to top Go down

In progress Re: Nivo Slider

Post by Nera. on February 18th 2012, 2:04 pm

@enlil wrote:Hi,


An example of script to use on index :

Code:
$(function() {
  $("div.table-title").closest("div.forabg").addClass("cat-table").first().before('<div id="cat-tabs"></div>');
  $(".cat-table:not(:first)").hide();
  $("div.table-title h2").each(function() {
    $("#cat-tabs").append('<div class="ct-item">' + $(this).text() + "</div>")
  });
  $("#cat-tabs .ct-item").click(function() {
    $("#cat-tabs .ct-abled").removeClass("ct-abled");
    $(this).addClass("ct-abled");
    $(".cat-table").not($(".cat-table").eq($("#cat-tabs .ct-item").index(this)).slideDown(500)).slideUp(500)
  }).first().addClass("ct-abled")
});
And the css :

Code:
#cat-tabs { text-align: center; margin: 10px auto; }
#cat-tabs .ct-item { display: inline; background: blue; color: #fff; margin: 5px; padding: 5px;  }
#cat-tabs .ct-abled { color: blue; background: #fff; }
You can improve the css. on this forum it looks like this :


Otherway, to my taste it's bad to do this ( you need to browse all category to see new messages )

Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

In progress Re: Nivo Slider

Post by Amel Nuhanovic on February 28th 2012, 2:07 am

thanks really and its not late i just dont wanna spam bump bump...and 1 more thing, can i make little bigger that slider maybe? like how he is showed at nivo slider official page?

Amel Nuhanovic
Forumember

Male Posts : 144
Reputation : 1
Language : Bosnian
Location : Bosnia and Herzegovina

Back to top Go down

In progress Re: Nivo Slider

Post by Nera. on February 28th 2012, 9:47 am

@Amel Nuhanovic wrote:thanks really and its not late i just dont wanna spam bump bump...and 1 more thing, can i make little bigger that slider maybe? like how he is showed at nivo slider official page?

I took the slider, HTML and the images from the official pages source, it's the same slider Amele Confused

Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

In progress Re: Nivo Slider

Post by Glazella on March 11th 2012, 8:22 am

how can i put the slider as a header?

Glazella
Forumember

Posts : 68
Reputation : 2

http://jiyeonworldwide.com

Back to top Go down

In progress Re: Nivo Slider

Post by felicity4us2 on March 11th 2012, 6:01 pm

http://www.igdid.com/

Thank you for this thread - I followed it - worked perfectly. Thanks again.

felicity4us2
Forumember

Posts : 342
Reputation : 7
Language : english

http://igdid.com

Back to top Go down

View previous topic View next topic Back to top


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