MyBB Community Forums

Full Version: How to Implement Nivo jQuery Slider?
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
I want to implement this into my forum, but it never seems to work. I put everything in the right places but I'm probably wrong Sad

http://dev7studios.com/nivo-slider/

If anybody can give me a step by step noob tutorial on how to install, it would be greatly appreciated.
You might be missing out jQuery Wink

Proper way to install it:

Go to Your Theme Templates -> Ungrouped Templates -> Headerinclude ->

Put this anywhere in it:
<link rel="stylesheet" href="URL TO NIVO CSS/nivo-slider.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">jQuery.noConflict();</script>
<script src="URL TO NIVO JS/jquery.nivo.slider.pack.js" type="text/javascript"></script>

Then go to Index -> index templates & pu this Just Above {$forums}

<div class="slider-wrapper">
    <div id="slider" class="nivoSlider">
        <img src="images/slide1.jpg" alt="" />
        <a href="http://"><img src="cedric.jpg" alt="" title="#htmlcaption" /></a>
        <img src="images/slide3.jpg" alt="" title="This is an example of a caption" />
        <img src="images/slide4.jpg" alt="" />
    </div>
</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>

Change the Text/Images/URL's above to your own!

Enjoy Wink
Okay I saw in my Reps that you repped me for the above post. If you mark it as the correct answer it might help out others Wink