[TUT] - Simply Add Nivo Slider to your Index and or Portal (in 5 easy steps)

[TUT] - Simply Add Nivo Slider to your Index and or Portal (in 5 easy steps) *

* simply a quick share again of the tutorial from 2016 upon re-visting it just now while applying a few minor edits (primarily very similar to the original tutorial but minor things were changed like for example required change to function to get it to load again now via jq 3.x and a few other minor edits here and there and adding more descriptive init with defaults) (*note all the styling variants that were once provided via replies to this particular tutorial will not be re-added as those were lost when the original thread was deleted, but, hey, here is at least the simple tutorial for anyone still interested in say simply adding nivo to their forum and then taking it from there...)

ie:


1) download the required files: http://s000.tinyupload.com/index.php?fil...2259522923

2) extract the nivo-slider.zip file

3) upload the extracted "nivo-slider" directory to your forum root directory ie: forum/nivo-slider

4) Edit Template: headerinclude

find:

{$stylesheets}

Add this after:

<!-- Nivo-Slider Styling Start -->
<!-- CSS Includes -->
    <!-- themes -->
    <link rel="stylesheet" href="{$mybb->asset_url}/nivo-slider/themes/default/default.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="{$mybb->asset_url}/nivo-slider/themes/light/light.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="{$mybb->asset_url}/nivo-slider/themes/dark/dark.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="{$mybb->asset_url}/nivo-slider/themes/bar/bar.css" type="text/css" media="screen" />
    <!-- core -->
    <link rel="stylesheet" href="{$mybb->asset_url}/nivo-slider/css/nivo-slider.css" type="text/css" media="screen" />
<!-- Nivo-Slider Styling End -->
<!-- JS Includes -->
    <script type="text/javascript" src="{$mybb->asset_url}/nivo-slider/js/jquery.nivo.slider.js"></script>
<!-- Nivo-Slider Init Start-->
    <script type="text/javascript">
    $(window).on('load', function() {
        $('#slider').nivoSlider({
            effect: 'random', // Specify sets like: 'fold,fade,sliceDown' 
            slices: 15, // For slice animations 
            boxCols: 8, // For box animations 
            boxRows: 4, // For box animations 
            animSpeed: 500, // Slide transition speed 
            pauseTime: 3000, // How long each slide will show 
            startSlide: 0, // Set starting Slide (0 index) 
            directionNav: true, // Next & Prev navigation 
            controlNav: true, // 1,2,3... navigation 
            controlNavThumbs: false, // Use thumbnails for Control Nav 
            pauseOnHover: true, // Stop animation while hovering 
            manualAdvance: false, // Force manual transitions 
            prevText: 'Prev', // Prev directionNav text 
            nextText: 'Next', // Next directionNav text 
            randomStart: false, // Start on a random slide 
            beforeChange: function() {}, // Triggers before a slide transition 
            afterChange: function() {}, // Triggers after a slide transition 
            slideshowEnd: function() {}, // Triggers after all slides have been shown 
            lastSlide: function() {}, // Triggers when last slide is shown 
            afterLoad: function() {} // Triggers when slider has loaded 
        });
    });	
    </script>
<!-- Nivo-Slider Init End-->

Next, for either 5.A or 5.B or both....

Now, if desired on the index page:

5.A) Edit template: index

find:

{$forums}

Add this above it:

<!-- Nivo-Slider Index Start-->
<div class="slider-wrapper theme-default">
   <div id="slider" class="nivoSlider">
      <img src="{$mybb->asset_url}/nivo-slider/images/slides/toystory.jpg" data-thumb="{$mybb->asset_url}/nivo-slider/images/slides/toystory.jpg" alt="" />
      <a href="https://mybb.com"><img src="{$mybb->asset_url}/nivo-slider/images/slides/up.jpg" data-thumb="{$mybb->asset_url}/nivo-slider/images/slides/up.jpg" alt="" title="This is an example of a caption" /></a>
      <img src="{$mybb->asset_url}/nivo-slider/images/slides/walle.jpg" data-thumb="{$mybb->asset_url}/nivo-slider/images/slides/walle.jpg" alt="" data-transition="slideInLeft" />
      <img src="{$mybb->asset_url}/nivo-slider/images/slides/nemo.jpg" data-thumb="{$mybb->asset_url}/nivo-slider/images/slides/nemo.jpg" 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>
<!-- Nivo-Slider Index End -->

Now, if desired on the portal page:


5.B) Edit template: portal

find:

{$header}

below it add:

<!-- Nivo-Slider Portal Start-->
<div class="slider-wrapper theme-default">
   <div id="slider" class="nivoSlider">
      <img src="{$mybb->asset_url}/nivo-slider/images/slides/toystory.jpg" data-thumb="{$mybb->asset_url}/nivo-slider/images/slides/toystory.jpg" alt="" />
      <a href="https://mybb.com"><img src="{$mybb->asset_url}/nivo-slider/images/slides/up.jpg" data-thumb="{$mybb->asset_url}/nivo-slider/images/slides/up.jpg" alt="" title="This is an example of a caption" /></a>
      <img src="{$mybb->asset_url}/nivo-slider/images/slides/walle.jpg" data-thumb="{$mybb->asset_url}/nivo-slider/images/slides/walle.jpg" alt="" data-transition="slideInLeft" />
      <img src="{$mybb->asset_url}/nivo-slider/images/slides/nemo.jpg" data-thumb="{$mybb->asset_url}/nivo-slider/images/slides/nemo.jpg" 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>
<!-- Nivo-Slider Portal End -->

You would then modify further for your usages.

Best of Luck! Happy Editing!    ~ V