SimplePortal

Customization => Blocks and Modifications => Block Requests => Topic started by: bioshocker on December 05, 2012, 08:06:11 AM

Title: Nivo Slider or equivalent tutorial help please...
Post by: bioshocker on December 05, 2012, 08:06:11 AM
First of all hi guys and gals!

I have a gaming community website with a few mods that give an overall better 'feel' to the experiance for my users. But, what I'm after is on the homepage where my banner is at the top displaying free games for points, I would like to cycle several different banners or images displaying differant promotions and things.

My skills in SMF are very basic, but my knowledge of HTML is pretty good, and GFX is my speciality.

If anyone could help me with a step-by-step guide or tutorial, or even help me on TeamViewer to achieve this goal it would be great. I would glady announce the help on our forums with a link back to your site if you have one also.

Many thanks in advance...

Site address is: http://www.unitedgaming.co.uk (http://www.unitedgaming.co.uk)
Title: Re: Nivo Slider or equivalent tutorial help please...
Post by: slop_chute on December 07, 2012, 10:22:55 PM
Tutorial for step by step would not be the easiest to do or impossible, as nivo or other sliders will have variations or options and that depends what you want.

You really need to go to the script support site and figure out want you want and understand the options.


Just an example and high level - just for the basic concept -DON"T USE:

typically this would go in index.template.php of your theme to echo out in the head section. (you should know what your doing when editing), or put this in the sp block with other code.


Code: [Select]
<!-- Usually in the <head> section -->
<link rel="stylesheet" href="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 src="jquery.nivo.slider.pack.js" type="text/javascript"></script>

and this in a sp custom html block

Code: [Select]
<!-- Then somewhere in the <body> section -->
<div class="slider-wrapper">
    <div id="slider" class="nivoSlider">
        <img src="images/slide1.jpg" alt="" />
        <a href="http://dev7studios.com"><img src="images/slide2.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>

Also the files and images need to have the correct path, which its just easy to create a directory in root and place the files and images in that (ensure proper permissions)


Another one that might be easier would be "easyrotator"  (they have wordpress  or jquery stand alone - just like nivo).  I think nivo is better but easyrotator is better for the less experienced.












 

Title: Re: Nivo Slider or equivalent tutorial help please...
Post by: phantomm on December 10, 2012, 12:40:46 PM
Did you tried this => http://simpleportal.net/index.php?topic=11423.0 ?
Title: Re: Nivo Slider or equivalent tutorial help please...
Post by: TinMan on December 16, 2012, 12:30:29 PM
I have messed around with some of the demo script and some code from searching for the nivo slider.  I may attempt a tut for it, but it may not be an easy one if interested (btw, my skills are probably not that good either lol).
SimplePortal 2.3.8 © 2008-2024, SimplePortal