I have a lightbox using the jquery colorBox plugin and a Razor to pull in the images from the Media Library, but I don't know how to access the name of the image properly, I guess, because the lightbox isn't displaying the name in the "title" area for the slide. I am using title="@slide.name" in my loop below to get the name. Is't that correct? Here is my Razor, any suggestions?

    @{ 

    var trans = string.IsNullOrEmpty(Parameter.transition) ? @Html.Raw("transition:'elastic'") : @Html.Raw("transition:'@Parameter.transition'");
    var slideshow = (Parameter.slideShow == "1") ?  @Html.Raw("slideshow:true") : @Html.Raw("slideshow:false");

    }
   <script>    
   $(document).ready(function() {
        var $gallery = $('a.slideGroup').colorbox({rel:'slideGroup',@trans, @slideshow, opacity:"0.5", title:' '});

        $("a#openGallery").click(function(e){
            e.preventDefault();
            $gallery.eq(0).click();
        });
    }); 
</script>   

@{


    if (!String.IsNullOrEmpty(Parameter.slideFolder)){

        var slideFolder = Library.MediaById(Parameter.slideFolder);
        var width = string.IsNullOrEmpty(Parameter.slideWidth) ? "350" : Parameter.slideWidth;
        var height = string.IsNullOrEmpty(Parameter.slideHeight) ? "100%" : Parameter.slideHeight;

    <ul class="cboxGallery">
            @foreach(var slide in slideFolder.Children) {
            <li>
                <a class="slideGroup" href="@slide.umbracoFile" ><img src="/ImageGen.ashx?image=/media/1319203/slide-controls-overlay.png&width=@width&height=@height" /><img src="/[email protected]&width=@width&height=@height" title="@slide.name" /></a>  
            </li>
            }
    </ul>
            }
}