HomeHome  
  • WelcomeWelcome  
  • Events  
  • PublicationsPublications  
  • FAQFAQ  
  • SearchSearch  
  • MemberlistMemberlist  
  • UsergroupsUsergroups  
  • RegisterRegister  
  • Log inLog in  
  • You are not connected. Please login or register


    Nivo Slider

    avatar
    • ****


        Reputation : 5
        Registered on : 2012-04-01
        Posts : 84
      Nivo Slider


      Set up


      First

      Admin CP > Display > Homepage > Generalities

      Paste your code to Homepage Message
      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>

      Second

      Admin CP > Modules > Javascript codes management > Add
      Tick on Homepage
      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)

      Third

      Admin CP > Display > Templates > General > Index_body
      Put After the
      Code:

      <script src="http://yourdomain.com/"></script>
      See the javascripts code url

      Fourth

      Add this into your CSS Stylesheet
      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;
      }

      Customize the tutorial


      You Can Edit the Image and the text

      Demonstration




      Technical problems


      The tutorial was tested on this forum and with the browser Google Chrome; If you notice that the tutorial doesn't work for a browser or for a version of forum (PhpBB2, PhpBB3, PunBB, Invision) contact an administrator and we will fill this field with your reporting.

      Thanks, the staff
      For every problem or question please, contact us in the section Support for the tutorials, The staff will answer you as soon as it is possible...

      Friendly,
      The team of the Forum of Codes.

      avatar
      • ***


          Reputation : 0
          Registered on : 2012-05-07
          Posts : 35
        Thanks for this code- really wanted to know how to do this!

        avatar
        • Manager

            Reputation : 20
            Registered on : 2012-04-01
            Posts : 407
          Good code!



          avatar
          • **


              Reputation : 1
              Registered on : 2012-06-08
              Posts : 11
            Thank you for this great tutorial, but now the slides won't slide anymore!
            And I changed nothing. First it worked, but now it doesn't. What is wrong??

            avatar
            • **


                Reputation : 0
                Registered on : 2013-09-27
                Posts : 13
                LG
              yes yes yes yes yes yes yes yes yes yes yes yes yes yes yes 


              YOUR BANNER HERE
              728x90
              DMCA.com Protection Status
              © PunBB | Contact | Report an abuse