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.

Slider

View previous topic View next topic Go down

In progress Slider

Post by DeathDunk98* on July 24th 2014, 10:31 pm

How can I set a slider like this one in my website!!
Slider http://arktika.forumk.biz !!
my forum http://www.islamishendrit,forumk.biz


Last edited by DeathDunk98* on July 25th 2014, 3:34 am; edited 1 time in total

DeathDunk98*
Forumember

Posts : 479
Reputation : 3
Language : Shqip

Back to top Go down

In progress Re: Slider

Post by Van-Helsing on July 24th 2014, 10:43 pm

Hi,
Its the Nivo slider I found it.

Go to Display->Generalities->Home Page Message and put the code:

Spoiler:

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>

Then go to ACP->Javascript Managemen-> Create a new javascript and put the name which you wish and set it On the homepage and put this code:
Spoiler:

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)

then save the javascript.

After that go to Display->Colors-> CSS Stylesheet and add the following code in your css

Spoiler:

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

then submit your css and you are ready. Also you can change the icons with which icons you want.

Now its done. Very Happy 

Best Regards,
Black-Shadow

Van-Helsing
Hyperactive

Male Posts : 2222
Reputation : 82
Language : English, Greek

http://helpgr.forumgreek.com/

Back to top Go down

In progress Re: Slider

Post by DeathDunk98* on July 25th 2014, 1:55 am

how can I change the width to same width as forum table?
if you know what I mean? http://www.islamishendrit.forumk.biz

DeathDunk98*
Forumember

Posts : 479
Reputation : 3
Language : Shqip

Back to top Go down

In progress Re: Slider

Post by Van-Helsing on July 25th 2014, 2:32 am

Hi,
Go to the Display->Generalities->Home Page Message and find this code

Code:

<div id="nivoslider-125" class="nivoSlider" style="width: 7000px; height: 300px; position: relative; background: url(&quot;http://nivo.dev7studios.com/wp-content/uploads/2011/08/walle12-700x300.png&quot;) no-repeat scroll 0% 0% transparent;">

and change the value of width of the slider as you wish.

Best Regards,
Black-Shadow

Van-Helsing
Hyperactive

Male Posts : 2222
Reputation : 82
Language : English, Greek

http://helpgr.forumgreek.com/

Back to top Go down

In progress Re: Slider

Post by DeathDunk98* on July 25th 2014, 3:05 am

is it possible to delete, remove the area covered in red ?

DeathDunk98*
Forumember

Posts : 479
Reputation : 3
Language : Shqip

Back to top Go down

In progress Re: Slider

Post by Van-Helsing on July 25th 2014, 1:23 pm

Hi,
I cannot see the red line in your forum as you can see http://prntscr.com/4668t0 , try to clear your browser' s cache and cookies.

Best Regards,
Black-Shadow

Van-Helsing
Hyperactive

Male Posts : 2222
Reputation : 82
Language : English, Greek

http://helpgr.forumgreek.com/

Back to top Go down

In progress Re: Slider

Post by DeathDunk98* on July 25th 2014, 3:44 pm

solved, the redline was made by me to show you what I want to delete, but I solved the problem as you can see, thank you for your help

DeathDunk98*
Forumember

Posts : 479
Reputation : 3
Language : Shqip

Back to top Go down

In progress Re: Slider

Post by Derri on July 25th 2014, 3:47 pm

Topic Solved and Locked


Forum Rules : : Forumotion Staff : : Appeal A Warning : : FAQ : : Tips & Tricks : : Forgotten Password/Login Issues
You need one post to send a PM
When your topic has been solved, ensure you mark the topic solved
Never post your email in public


Derri
Administrator
Administrator

Male Posts : 8386
Reputation : 577
Language : English & Basic French
Location : Scotland, United Kingdom

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