Nivo slider

A place for discussion about skinning and design. Before posting questions here you should review the documentation about creating skins.

This thread is closed to new posts. You must sign in to post in the forums.
7/25/2012 9:16:31 AM
Gravatar
Total Posts 4

Nivo slider

Can  anybody please describe how to implement the Nivo slider step by step  in a Mojo portal?

7/25/2012 11:25:38 AM
Gravatar
Total Posts 216
Community Expert

mojoPortal Hosting & Design @ i7MEDIA!

Re: Nivo slider

1.  Download Nivo Slider.

2.  Unzip the Nivo Slider package.

3.  Copy jquery.nivo.slider.js into your skin folder, or add the script within an existing JS file.

4.  If you copied the file in, add the following to your layout.master:
<portal:SkinFolderScript ID="sfs2" runat="server" ScriptFileName="jquery.nivo.slider.js" AddToCombinedScript="true" />

Note: If you already have a SkinfolderScript with the ID "sfs2", change the ID.

5. Copy the nivo-slider.css file into your skin folder, or copy the CSS from the nivo-slider.css file into an existing CSS file in your skin.

6. If you copied the css file into your skin folder, add the following to your style.config:
<file>nivo-slider.css</file>

7. Within the unzipped nivo-slider folder your downloaded, browse to "themes/default" and copy its contents into your skin folder. You may also copy the CSS into an existing CSS file in your skin. (Images must be copied into the root folder unless you change the CSS to find them in another location)

8. If you copied the file default.css into your skin folder, add the following to your style.config:
<file>default.css</file> (I suggest renaming this file, as default.css may be misleading to future users).

9. Add the following to your layout.master in the head:
<script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider();
    });
</script>

Note: Optionally, you may add this script (excluding the <script /> tags), within an existing JS file.

10. Add the following HTML to a module on your page:
<div class="slider-wrapper theme-default">
            <div id="slider" class="nivoSlider">
                <img src="[yourimagesourcehere].jpg" data-thumb="[yourimagesourcehere].jpg" alt="" />
                <img src="[yourimagesourcehere].jpg" data-thumb="[yourimagesourcehere].jpg" alt="" title="This is an example of a caption" />
                <img src="[yourimagesourcehere].jpg" data-thumb="[yourimagesourcehere].jpg" alt="" data-transition="slideInLeft" />
                <img src="[yourimagesourcehere].jpg" data-thumb="[yourimagesourcehere].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>

11. Replace HTML for image sources with your images source, and you should be ready to go!

Please remember to read the license at Nivo Sliders website and make sure that your use of it is within the correct parameters.

I hope this helps,
-Isaac

7/25/2012 12:18:09 PM
Gravatar
Total Posts 216
Community Expert

mojoPortal Hosting & Design @ i7MEDIA!

Re: Nivo slider

You should also check out this link my friend Joe Davis just sent me:
https://www.mojoportal.com/mojoportal-2385-released

If you have mojoportal 2.3.8.5 or newer there is a built in Nivo Slider control that will make things easier. There are basic instructions on the release blog, if you need more help let me know.

7/25/2012 12:27:22 PM
Gravatar
Total Posts 18439

Re: Nivo slider

I have just created an article Using Nivo Slider, that explains how to use the built in support for Nivo. Though of course you can code it yourself as Isaac showed if you want more control over it.

Hope that helps,

Joe

10/25/2012 7:47:50 AM
Gravatar
Total Posts 11

Re: Nivo slider

Hi Joe,

Just followed your article for using Nivo, it was very straight forward. One thing that you may consider including are instructions for changing the default settings for Nivo.

To just have fades I came up with this after a few attempts and stumbling across the source on CodePlex:

config = "effect: 'fade'"

Which when added is:

<portal:NivoSlider ID="NivoSlider1" runat="server" ImageFolder='~/Data/Sites/1/media/nivoimages' ImageWidth='618px' config = "effect: 'fade'" />

More settings at:

http://nivo.dev7studios.com/support/jquery-plugin-usage/

best
Rob

4/11/2013 11:57:41 AM
Gravatar
Total Posts 17

Re: Nivo slider

Hi,

I was able to use a nivo slider in my header but the transition is a little bit to fast, how can I set the speed of the Nivo slider?

I would like to have a footer that has links to different pages on my site, I can arrange that hard coded in the masterpage but is it possible to use a html fragment instead so the website admin can update the htmlfragment without need to alter the masterpage?

Or is there another way to allow editing the footer?

Thanks for helping out.

Filip

4/12/2013 4:38:50 PM
Gravatar
Total Posts 18439

Re: Nivo slider

Hi,

You can add configuration on the control as shown in the article Using NivoSlider. The article example doesn't show how to change the speed but you can configure any of the properties supported by the nivo script.

Regarding making an editable header and/or footer section in a skins see the article More than 3 content panels.

Hope that helps,

Joe

You must sign in to post in the forums. This thread is closed to new posts.