I'm having the exact same problem - any ideas?

Thanks

Darren

Hi Darren,

Is it possible for you to share a public link to the website where the caption does not show. Then it's easier to see what css that is applied to the caption element. Then I maybe could help you debuging the css, and point you to a solution.

/Dennis

Hi Dennis,

Of course, it's http://umbraco.shaw-online.com/

I spent all last night trying to figure this one out, so any help with be really appreciated.

Thanks again!

Darren

Hi Darren,

I have now taking a look at you code, the reason way you don´t get the caption outputted is because you don´t get any data into the nivo-caption div.

<div class="nivo-caption" style="opacity: 0.5;"><p style="display: block;"></p></div>

This div is being apply by some javascript. So maybe you have some other javascipt on your website that conflicts with the nivo slider.

I have setup a dev site, and install the package, and here is how my files looks like. On this dev site, I only test the packages, so I have no other javascript running or css and so on.

The razor file looks like:

@*

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.image+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>                          
        }
    }
}

The nivo-slider css looks like this:

/*
 * jQuery Nivo Slider v2.6
 * http://nivo.dev7studios.com
 *
 * Copyright 2011, Gilbert Pellegrom
 * Free to use and abuse under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 * 
 * March 2010
 */
 
 
/* The Nivo Slider styles */
.nivoSlider {
    position:relative;
    width: 1024px;
    height:748px;
}
.nivoSlider img {
    position:absolute;
    top:0px;
    left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    border:0;
    padding:0;
    margin:0;
    z-index:6;
    display:none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
    display:block;
    position:absolute;
    z-index:5;
    height:100%;
}
.nivo-box {
    display:block;
    position:absolute;
    z-index:5;
}
/* Caption styles */
.nivo-caption {
    position:absolute;
    left:0px;
    bottom:0px;
    background:#000;
    color:#fff;
    opacity:0.8; /* Overridden by captionOpacity setting */
    width:100%;
    z-index:8;
}
.nivo-caption p {
    padding:5px;
    margin:0;
}
.nivo-caption a {
    display:inline !important;
}
.nivo-html-caption {
    display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
    position:absolute;
    top:45%;
    z-index:9;
    cursor:pointer;
}
.nivo-prevNav {
    left:0px;
}
.nivo-nextNav {
    right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
    position:relative;
    z-index:9;
    cursor:pointer;
}
.nivo-controlNav a.active {
    font-weight:bold;
}

When I add the macro to the template it looks like this:

<umbraco:Macro nivoFolder="1047" nivoAnimSpeed="" nivoPauseTime="" nivoStartSlide="" nivoControlNav="1" nivoDirectionNav="0" nivoKeyboardNav="0" nivoPauseOnHover="0" nivoManualAdvance="0" nivoBoxCols="" nivoBoxRows="" nivoCaptionOpacity="0.5" nivoPrevText="" nivoNextText="" Alias="nivoSlider" runat="server"></umbraco:Macro>

Hope this can help you in some way.

/Dennis

Brilliant, Dennis.

Thanks for your hard work! My set-up is the same, I've removed all javascript and additional css and still no captions. Any ideas before I give up and try something else?

Thanks in advance

Darren

Brilliant, Dennis.

Thanks for your hard work! My set-up is the same, I've removed all javascript and additional css and still no captions. Any ideas before I give up and try something else?

Thanks in advance

Darren

PS. The site currently had everything removed

Hi Darren,

For some reason you still get no data into the div

<div class="nivo-caption" style="opacity:0.5;"><p style="display: block;"></p></div>

If you wan´t to see my Umbraco setup, drop me an email at [email protected], and I will give you access.

/Dennis

With the help of Dennis, I've solved this!

It's transpires that is you have a space in your media type name it won't show the caption:

'Image 1' will not show the caption.

'Image1' will show the caption.

Darren

is working on a reply...