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

avatar
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

avatar
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?
avatar
Nera.
Energetic

Female Posts : 7078
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
avatar
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

avatar
Nera.
Energetic

Female Posts : 7078
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
avatar
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
avatar
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
avatar
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
avatar
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.
avatar
Nera.
Energetic

Female Posts : 7078
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
avatar
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:

avatar
Nera.
Energetic

Female Posts : 7078
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
avatar
Nera.
Energetic

Female Posts : 7078
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 )
avatar
Nera.
Energetic

Female Posts : 7078
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?
avatar
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
avatar
Nera.
Energetic

Female Posts : 7078
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.
avatar
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