Hi Bendik

I don't think this package works out of the box - It was released in 2011 and on the package page it says that the package is not compatible with version 4.7.1 of Umbraco...so I don't guess that it's compatible with versions higher than this out of the box either.

But perhaps you can share some of the code in it in here and perhaps it's farily easy to refactor the code?

/Jan

Hi Jan

Ok, here's what I did:

1. Created the media type NivoSliderImage according to the docmentation. The structure now looks like this:

2. Added a new media folder called 'HomeSlider' and then added 3 slides in it. Everything looking good, the property sheets of the slides work as expected.

3. Created a new partial view umbHomepageSlider for rendering the slider macro:

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage

@if (CurrentPage.HideBanner == false)
{
    <!-- Slider -->
    <div id="slider-wrapper">
        @Umbraco.RenderMacro("nivoSlider", new {nivoFolder="HomeSlider"})
    </div>
    <!-- /Slider -->
}

As you can see, this is where I specify the media folder 'HomeSlider' where the slides media is located. And I am not sure I did this right, if there maybe should be a path or an ID instead?

4. Finally, I've replaced the banner partial view of my home page (from the TXT Starter Kit) with my new slider partial view. Hence, my home page markup now looks like this:

@inherits UmbracoTemplatePage
@{
    Layout = "umbLayout.cshtml";
}
@{ Html.RenderPartial("umbHomepageSlider"); }
<!-- Main -->
<div id="main-wrapper">
    <div id="main" class="container">
        <div class="row">
            <div class="12u">
                @{ Html.RenderPartial("umbFeatures"); }
            </div>
        </div>
        <div class="row">
            <div class="12u">
                @{ Html.RenderPartial("umbNewsOverviewWidget"); }
            </div>
        </div>
    </div>
</div>
<!-- /Main -->

Now, the macro script NivoSlider.cshtml installed by the package is this:

@*

NivoSlider for Umbraco - version 0.5 (04/10/2011)
Author: Andrés Valor
Released under the MIT licence: http://www.opensource.org/licenses/mit-license.php

*@

@using umbraco.MacroEngines

<script type="text/javascript" src="/scripts/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="/scripts/jquery.nivo.slider.pack.js"></script>
@{
    var nodes = @Model.MediaById(@Parameter.nivoFolder);


<script type="text/javascript">
    $(window).load(function() {
        $('#@nodes.Name').nivoSlider({
          effect:@{
            System.Text.StringBuilder effects = new System.Text.StringBuilder("'");
            foreach (dynamic img in nodes.Children)
            {
                if (img.nivoSliderEffect == String.Empty)
                {
                    effects.Append("random,");
                }
                else
                {
                    effects.Append(img.nivoSliderEffect + ",");
                }
            }
            effects.Remove(effects.Length - 1,1);
            effects.Append("'");            
            @Html.Raw(effects.ToString());
          },          
          slices:@nodes.Children.Items.Count,
          boxCols:@(String.IsNullOrEmpty(Parameter.nivoBoxCols) ? "8" : Parameter.nivoBoxCols),
          rowCols:@(String.IsNullOrEmpty(Parameter.nivoRowCols) ? "4" : Parameter.nivoRowCols),
          animSpeed:@(String.IsNullOrEmpty(Parameter.nivoAnimSpeed) ? "500" : @Parameter.nivoAnimSpeed), 
          pauseTime:@(String.IsNullOrEmpty(Parameter.nivoPauseTime) ? "3000": @Parameter.nivoPauseTime),
          startSlide:@(String.IsNullOrEmpty(Parameter.nivoStartSlide) ? "0" : @Parameter.nivoStartSlide),                     
          directionNav:@(String.IsNullOrEmpty(Parameter.nivoDirectionNav) ? "false" : (Parameter.nivoDirectionNav=="1" ? "true" : "false")), 
          directionNavHide:@(String.IsNullOrEmpty(Parameter.nivoDirectionNavHide) ? "false" : (Parameter.nivoDirectionNavHide=="1" ? "true" : "false")),
          controlNav:@(String.IsNullOrEmpty(Parameter.nivoControlNav) ? "false" : (Parameter.nivoControlNav=="1" ? "true" : "false")),                                        
          keyboardNav:@(String.IsNullOrEmpty(Parameter.nivoKeyboardNav) ? "false" : (Parameter.nivoKeyboardNav=="1" ? "true" : "false")), 
          pauseOnHover:@(String.IsNullOrEmpty(Parameter.nivoPauseOnHover) ? "false" : (Parameter.nivoPauseOnHover=="1" ? "true" : "false")), 
          manualAdvance:@(String.IsNullOrEmpty(Parameter.nivoManualAdvance) ? "false" : (Parameter.nivoManualAdvance=="1" ? "true" : "false")),
          captionOpacity:@(String.IsNullOrEmpty(Parameter.nivoCaptionOpacity) ? "0.8" : @Parameter.nivoCaptionOpacity),
          prevText:@(String.IsNullOrEmpty(Parameter.nivoPrevText) ? @Html.Raw("'Prev'") : @Html.Raw(String.Concat("'", Parameter.nivoPrevText, "'"))),
          nextText:@(String.IsNullOrEmpty(Parameter.nivoNextText) ? @Html.Raw("'Next'") : @Html.Raw(String.Concat("'", Parameter.nivoNextText, "'")))
        });
    });         
</script>

        <div id="@nodes.Name" class="nivoSlider">

            @foreach (dynamic img in nodes.Children)
            {
                if (img.NodeTypeAlias != "NivoSliderImage")
                {
                    continue;
                }

                System.Text.StringBuilder htmlNode = new System.Text.StringBuilder();

                if (img.HasValue("nivoSliderUrl"))
                {
                    dynamic destNode = new DynamicNode(img.nivoSliderUrl);
                    htmlNode.Append("<a href=\""+destNode.NiceUrl+"\">");                    
                }

                htmlNode.Append("<img src=\""+img.umbracoFile+"\" alt=\""+img.Name+"\"");

                if (img.HasValue("nivoSliderCaption"))
                {
                    htmlNode.Append(" title=\"#"+img.Name+"\"");                                   
                }

                htmlNode.Append("/>");

                if (img.HasValue("nivoSliderUrl"))
                {
                    htmlNode.Append("</a>");
                }

                htmlNode.AppendLine();
                @Html.Raw(htmlNode.ToString());                
            }

        </div>

    foreach (dynamic img in nodes.Children)
    {
        if (img.HasValue("nivoSliderCaption"))
        {
                <div id="@img.Name" class="nivo-html-caption">
                    @Html.Raw(img.nivoSliderCaption)
                </div>                          
        }
    }
}

And, what happens when I run the site in Visual Studio is that the macro-script fails on line 22:

            foreach (dynamic img in nodes.Children)

with a NullReferenceException, because 'nodes' has no 'Children'. This leads me to believe that line 14 is the actual cause:

    var nodes = @Model.MediaById(@Parameter.nivoFolder);

is working on a reply...