Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
[For 1.8] [Tutorial] - Simply Add Nivo Slider to your Index and or Portal
#1
Information 
Just a basic tutorial to show you how to quickly add Nivo Slider to your forum on either portal or index or both...


Edit template: headerinclude

find:

{$stylesheets}


Add after:
<!-- Nivo-Slider Styling Start -->
<!-- CSS Incudes -->
    <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" />
    <link rel="stylesheet" href="{$mybb->asset_url}/nivo-slider/css/nivo-slider.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="{$mybb->asset_url}/nivo-slider/css/style.css" type="text/css" media="screen" />
<!-- JS Includes -->
    <script type="text/javascript" src="{$mybb->asset_url}/nivo-slider/js/jquery.nivo.slider.js"></script>
<!-- Nivo-Slider Styling End -->

<!-- Nivo-Slider Init Start-->
    <script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider();
    });
    </script>
<!-- Nivo-Slider Init End-->


Basic Example on Index:

[Image: sgie8p.png]


Edit template: index

find:

{$forums}


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




Basic example on portal:

[Image: 2zg6ttl.png]



in portal find:

{$header}

add after:

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



Download / extract and upload the nivo-slider folder to your forum root directory:


.zip   nivo-slider.zip (Size: 338.09 KB / Downloads: 86)
MyBB Themes Team - Making more professional themes by the hour. (Retired)
My Mods | Offer me a coffee!
Reply
#2
Thank you, I tried this after failed attempt of another slider in Majestic. This seems okay but I am trying to modify it, I want to remove those buttons in bottom and for some reason captions don't work for me.

I can remove buttons by adding visibilty hidden but then that area looks empty. So these are my questions,

1. How can I make captions work? probably its also related to Majestic theme. If I can't, is there a way I can add such text area (http://i.hizliresim.com/pX8nOL.jpg) to right part of every image, so I can write on it?

2. How can I remove those buttons? I can make visibility hidden but it still takes space.

3. How can I stop slider? or make it very slow. I want user to read stuff on it, take their time looking at it. It's too fast currently.

4. Is there a way I can add tabs instead of buttons?
Reply
#3
(12-24-2016, 07:41 AM)Darkrad Wrote: Thank you, I tried this after failed attempt of another slider in Majestic. This seems okay but I am trying to modify it,  I want to remove those buttons in bottom and for some reason captions don't work for me.

I can remove buttons by adding visibilty hidden but then that area looks empty. So these are my questions,

1. How can I make captions work? probably its also related to Majestic theme. If I can't, is there a way I can add such text area (http://i.hizliresim.com/pX8nOL.jpg) to right part of every image, so I can write on it?

2. How can I remove those buttons? I can make visibility hidden but it still takes space.

3. How can I stop slider? or make it very slow. I want user to read stuff on it, take their time looking at it. It's too fast currently.

4. Is there a way I can add tabs instead of buttons?

I assume you mean bullets and not buttons as they are bullets.., and yes they and everything else can be moved/modified with basic knowledge of html and css. Also the reason why captions are not working is because there is only one slide with the caption tied to it by default  which is clearly evident in the default coding upon first view when you download the slider..., the tutorial simply adds that to mybb slightly modified as that was the entire point was to get a basic slider function into mybb..., and then the user carries on from there. Anywhoo...,  again by simply viewing the code you can see that with basic css and html knowledge one can modify the code to add what they want. Tutorials usually supply basic function with the hope that the user will then modify for their purposes...,

for your speed issue edit the headerinclude and change the init to something like this:
<!-- Nivo-Slider Init Start-->
    <script type="text/javascript">
    $(window).load(function() {
       $('#slider').nivoSlider({ 
              pauseTime: 6000 
       });
    });
    </script>
<!-- Nivo-Slider Init End-->
*again the user can continue to modify to suit their needs

to add you captions and move and then hide your bullets:

Find in your index

find:
</head>

add before:
<style>
.nivo-caption {
    position:absolute;
    left:0px; /* x offset position */
    top:0px; /* y offset position */
    overflow:hidden;
    background:none;
    font-family:Helvetica, Arial, Sans-Serif;
    color:#FFF;
    font-weight:bold;
    font-size:40px;
    line-height:44px;
    text-align:left;
    text-transform:uppercase;
    z-index:8;
}
    
.nivo-caption a {
    display:inline !important;
}
    
.nivo-caption1 {
    margin-left:10px;
    margin-top:5px;
    width:500px;
    font-size:38px;
    line-height:40px;
    text-transform:none;
}
    
.nivo-caption1a {
    margin-left:10px;
    margin-top:10px;
    width:190px;
    font-size:12px;
    line-height:14px;
    text-transform:none;
}
    
.nivo-caption2 {
    margin-left:230px;
    margin-top:10px;
    width:350px;
}
    
.nivo-caption3 {
    margin-left:10px;
    margin-top:100px;
    width:350px;
}
    
.nivo-caption4 {
    margin-left:10px;
    margin-top:100px;
    width:350px;
}
    
.nivo-controlNav {
position:absolute;
left: 50%; 
display: none;
}
    
.nivo-controlNav a {
cursor: pointer;
position: relative;
left: -510px; /* x offset position */
bottom: 410px; /* y offset position */
z-index: 99;
float: left;
}
</style>
*again the user can continue to modify to suit their needs



Replace your nivo slider code in index with:

<!-- Nivo-Slider Index Start-->

<div class="slider-wrapper theme-default">
  <div id="slider" class="nivoSlider"> <img src="nivo-slider/images/slides/toystory.jpg" data-thumb="nivo-slider/images/slides/toystory.jpg" alt="" title="#htmlcaption1" /> <a href="https://mybb.com"><img src="nivo-slider/images/slides/up.jpg" data-thumb="nivo-slider/images/slides/up.jpg" alt="" title="#htmlcaption2" /></a> <img src="nivo-slider/images/slides/walle.jpg" data-thumb="nivo-slider/images/slides/walle.jpg" alt="" data-transition="slideInLeft" title="#htmlcaption3" /> <img src="nivo-slider/images/slides/nemo.jpg" data-thumb="nivo-slider/images/slides/nemo.jpg" alt="" title="#htmlcaption4" /> </div>
  <div id="htmlcaption1" style="display:none">
    <div class="nivo-caption1" > <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>. </div>
    <div class="nivo-caption1a" >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod <a href="./index.php" >tempor incididunt</a> ut labore et dolore magna aliqua. </div>
  </div>
  <div id="htmlcaption2" style="display:none">
    <div class="nivo-caption2" > <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>. </div>
  </div>
  <div id="htmlcaption3" style="display:none">
    <div class="nivo-caption3" > <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>. </div>
  <div id="htmlcaption4" style="display:none">
    <div class="nivo-caption4" > <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>. </div>
  </div>
</div>
<!-- Nivo-Slider Index End --> 

*again the user can continue to modify to suit their needs


yes, the bullets could be modified by css to look different, but you complained that you wanted them hidden but they took up space still..., so this took care of moving them and hiding them.., so you don't notice them or the space..., primarily the captions are randomly placed so you get the idea how easy it is to modify captions to be wherever you want.  As far as the the next and previous buttons which are actually buttons and not bullets they could also be modified but i do not currently see the point as they auto hide and only appear when the user hovers over the slide..., I mean in theory you want navigation in a slider.., removing the bullets and then removing the buttons also seems rather pointless..., just saying. Anywhoo hopefully that solves mostly what you where seeking.


Now if you really need the stop button or pause or whatever.....,

You could add to the inline css above on index:

.Play {
    background-color: #161616;
    position: absolute; 
    width: 30px; 
    height: 32px; 
    z-index: 10000; 
    display: block;
    float: left;
    left: 110px; /* x offset position */
    top: 550px; /* y offset position */
}
    
.Pause {
    background-color: #161616;
    position: absolute; 
    width: 30px; 
    height: 32px; 
    z-index: 10001; 
    display: block;
    float: left;
    left: 110px; /* x offset position */
    top: 550px; /* y offset position */
}

and right below:


</style>

above:


</head>

also add:

<script type="text/javascript">
    $(window).load(function() {
        $("#Pause").click(function () {
            $('#Pause').fadeOut(200);
            $('#Play').fadeIn(200);
            $('#slider').data('nivoslider').stop();
          });
        $("#Play").click(function () {
            $('#Play').fadeOut(200);
            $('#Pause').fadeIn(200);
            $('#slider').data('nivoslider').start();
          });
    });
</script>


also in index:

find:

<!-- Nivo-Slider Index Start-->

add after:

<div id="Pause" class="Pause"><img src="nivo-slider/images/pause.png" alt="Pause button"></div>      
<div id="Play" class="Play"><img src="nivo-slider/images/play.png" alt="Play button"></div>



also download:
   
   

 and add to "nivo-slider/images"

* though you need to modify this a bit for positioning and such because I do not currently have time for this at 9% laptop battery power and have already spent more time focused on this than I would have preferred seeing as this is a custom user modification and not the actual tutorial steps.. nor will it be included in the "simply add" tutorial steps as described in the title...

[Image: 72d3qu.png]

A slight variant of the above variant..., that does not hide the bullets though, it changes the directional button images, it changes the bullet image and moves the control into the slider along with pause and play..., again this is for users interested in somewhere to start and continue from..., I do not promise that I will continue further on this variant either..., as the initial intent for the tutorial was to keep it short, sweet and simple..., though if I decide to provide further variants it will of course be at my own leisure and discretion...


in headerinclude

 find:

{$stylesheets}

add after:


<!-- Nivo-Slider Styling Start -->
<!-- CSS Incudes -->
    <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" />
    <link rel="stylesheet" href="{$mybb->asset_url}/nivo-slider/css/nivo-slider.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="{$mybb->asset_url}/nivo-slider/css/style.css" type="text/css" media="screen" />
<!-- JS Includes -->
    <script type="text/javascript" src="{$mybb->asset_url}/nivo-slider/js/jquery.nivo.slider.js"></script>
<!-- Nivo-Slider Styling End -->

<!-- Nivo-Slider Init Start-->
   <script type="text/javascript">
    $(window).load(function() {
       $('#slider').nivoSlider({ 
          pauseTime: 6000, 
           directionNav: true, 
           pauseOnHover: false, 
           controlNav: true, 
           randomStart: false
        });
    });
  </script>
<!-- Nivo-Slider Init End-->


in Index
before:

    </head>

add:

<style>
.nivo-caption {
    position:absolute !important; 
    left: 0px !important; 
    top: 0px !important;
    overflow: hidden !important;
    background: none !important;
    font-family: Helvetica, Arial, Sans-Serif !important;
    color: #FFF !important;
    font-weight: bold !important;
    font-size: 40px !important;
    line-height: 44px !important;
    text-align: left !important;
    text-transform: uppercase !important;
    z-index: 8 !important;
}
    
.nivo-caption a {
    display: inline !important;
}
    
.nivo-caption1 {
    margin-left: 10px !important;
    margin-top: 5px !important;
    width: 500px !important;
    font-size: 38px !important;
    line-height: 40px !important;
    text-transform: none !important;
}
    
.nivo-caption1a {
    margin-left: 10px !important;
    margin-top: 10px !important;
    width: 190px !important;
    font-size: 12px !important;
    line-height: 14px !important;
    text-transform: none !important;
}
    
.nivo-caption2 {
    margin-left: 230px !important;
    margin-top: 10px !important;
    width: 350px !important;
}
    
.nivo-caption3 {
    margin-left: 10px !important;
    margin-top: 100px !important;
    width: 350px !important;
}
    
.nivo-caption4 {
    margin-left: 10px !important;
    margin-top: 100px !important;
    width: 350px !important;
}

.nivo-directionNav a {
    display:block !important;
    width: 28px !important;
    height: 35px !important;
    background: url('nivo-slider/images/arrows-nivo.png') no-repeat !important;
    text-indent: -9999px !important;
    border: 0 !important;
}
    
a.nivo-prevNav {
    background-position: 0% 50% !important;
    left: 0px !important;
}
    
a.nivo-nextNav {
    background-position: 100% 100% !important;
    right:0px !important;
}
    
.nivo-controlNav {
}
    
.nivo-controlNav a {
    cursor: pointer !important;
    display: block !important;
    width: 11px !important;
    height: 12px !important;
    background: url('nivo-slider/images/bullets-nivo.png') no-repeat !important;
    text-indent: -9999px !important;
    position: relative !important;
    border: 0px !important;
    bottom: 40px !important;
    left: 15px !important;
    margin-bottom: 5px !important;
    float: left !important; 
    z-index: 10001 !important; 
}

.nivo-controlNav a:hover {
    background-position:0 -12px !important;
}
    
.nivo-controlNav a.active {
    background-position:0 -12px !important;
}

.Play {
    background-color: #161616;
    position: relative; 
    width: 30px; 
    height: 32px; 
    z-index: 10000; 
    display: block; 
    bottom: 60px;
    right:15px;
    float: right;
}
    
.Pause {
    background-color: #161616;
    position: relative; 
    width: 30px; 
    height: 32px; 
    z-index: 10001; 
    display: block;
    bottom: 60px;
    right: 15px;
    float: right;
}
</style>
<script type="text/javascript">
    $(window).load(function() {
        $("#Pause").click(function () {
            $('#Pause').fadeOut(200);
            $('#Play').fadeIn(200);
            $('#slider').data('nivoslider').stop();
          });
        $("#Play").click(function () {
            $('#Play').fadeOut(200);
            $('#Pause').fadeIn(200);
            $('#slider').data('nivoslider').start();
          });
    });
</script>

after:

{$header}

Add:
<!-- Nivo-Slider Index Start-->    
<div class="slider-wrapper theme-default">
  <div id="slider" class="nivoSlider">
      <img src="nivo-slider/images/slides/toystory.jpg" data-thumb="nivo-slider/images/slides/toystory.jpg" alt="" title="#htmlcaption1" /> <a href="https://mybb.com"><img src="nivo-slider/images/slides/up.jpg" data-thumb="nivo-slider/images/slides/up.jpg" alt="" title="#htmlcaption2" /></a> <img src="nivo-slider/images/slides/walle.jpg" data-thumb="nivo-slider/images/slides/walle.jpg" alt="" data-transition="slideInLeft" title="#htmlcaption3" /> <img src="nivo-slider/images/slides/nemo.jpg" data-thumb="nivo-slider/images/slides/nemo.jpg" alt="" title="#htmlcaption4" /> </div>

   <div id="Pause" class="Pause"><img src="nivo-slider/images/pause.png" alt="Pause button"></div>      
   <div id="Play" class="Play" style="display:none"><img src="nivo-slider/images/play.png" alt="Play button"></div>  
 
  <div id="htmlcaption1" style="display:none">
    <div class="nivo-caption1" > <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>. </div>
    <div class="nivo-caption1a" >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod <a href="./index.php" >tempor incididunt</a> ut labore et dolore magna aliqua. </div>
  </div>
  <div id="htmlcaption2" style="display:none">
    <div class="nivo-caption2" > <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>. </div>
  </div>
  <div id="htmlcaption3" style="display:none">
    <div class="nivo-caption3" > <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>. </div>
  <div id="htmlcaption4" style="display:none">
    <div class="nivo-caption4" > <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>. </div>
  </div>      
</div>
<!-- Nivo-Slider Index End --> 

Download and add to "nivo-slider/images" directory

   
   
   
   
MyBB Themes Team - Making more professional themes by the hour. (Retired)
My Mods | Offer me a coffee!
Reply
#4
Welcome! I have iGame Theme and I have some problem with Nivo Slider. Title under the picture isn't visible. How can I fix it?

[Image: dh7LbS3.png]
Reply
#5
(01-07-2017, 08:54 PM)hawkeye116477 Wrote: Welcome! I have iGame Theme and I have some problem with Nivo Slider. Title under the picture isn't visible. How can I fix it?

[Image: dh7LbS3.png]

Ok, judging by the position of the bullets in your image I assume you used my initial instructions, of which only has caption setup on last slide. To see examples of further caption setup see the instructions after that which go into further detail of caption styling and implementation. Also depending on the theme you may have to modify css a bit including z-index if the the theme has any conflicting z-index and or styling. I am not familiar  with the theme so I cannot knowingly say right off the bat if that will be definitely the case.
MyBB Themes Team - Making more professional themes by the hour. (Retired)
My Mods | Offer me a coffee!
Reply
#6
Hello.
If you have a problem with slider loading. In headerinclude template please change this:
<!-- Nivo-Slider Init Start-->
    <script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider();
    });
    </script>
<!-- Nivo-Slider Init End-->

To this:
<script type="text/javascript">
  (function($) {
    $(document).ready(function() {
      $('#slider').nivoSlider();
    });
  })(jQuery);
</script>

Cheers!
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)