Question

还在学习MVC3，EF和Razor，我想知道是否有人成功使用Colorbox来增强MVC3的画廊，并乐意帮助我。我已经设置了画廊模型，控制器和视图。我将图像保存在Content文件夹的images文件夹中。我从大图像文件动态生成缩略图。我有颜色框javascripts和css和jquery都在库的索引视图中引用。单击缩略图时，会出现黑屏。任何帮助将不胜感激。

索引视图如下

@using CPS.Helpers;
@foreach (var item in Model)
{    
<a href="Content/Images/@item.GalleryFileLink" rel="gal"> @Html.Image("Content/Images/" +item.GalleryFileLink + "?width=130&height=98", item.GalleryText)</a>`

在视图页面的底部我有这个 <script type="text/javascript"> $(document).ready(function () { $(".gallery_module").colorbox({rel: 'gal' }); }); </script>

我正在使用Image helper，如下所示

public  static class MyHelper{
    public static MvcHtmlString Image(this HtmlHelper helper, string src, string altText)
    {
        var url = new UrlHelper(helper.ViewContext.RequestContext);
        var builder = new TagBuilder("img");
        builder.MergeAttribute("src", url.Content(src));
        builder.MergeAttribute("alt", altText);
        return MvcHtmlString.Create(builder.ToString(TagRenderMode.SelfClosing));
    }}

缩略图在视图页面上显示正常但是当点击缩略图时会出现黑色空白屏幕

Answer 1

尝试将您的css和javascript文件引用移动到_Layout页面。还要确保按正确的顺序引用javascript文件。

Answer 2

您正在使用的课程.gallery_module可能会让您感到困惑。将其重命名为 .pic ，因为您需要将其添加到每张图片的链接中。 'rel'标签似乎仅用于在同一页面内组织不同的图片组。我建议你从here下载colorbox.zip文件。在拉链内部有网站上显示的所有示例。完全隔离您需要的内容并查看您需要添加的元素。你需要这样的东西：

<a href="path to the pic" class="pic"><img src="your thumbnail"/></a>

要添加样式和脚本，我看到的最好的方法是：

//in the head section of your page, in your _Layout.cshtml
@RenderSection("styles", required: false)

//just before the closing </body> tag in your _Layout.cshtml
@RenderSection("scripts", required: false)

然后在您想要放置颜色框图库的页面中：

@section scripts{
    //I like using jquery from cdn, but you can also reference your local file
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js" type="text/javascript"></script>     
   <script src="@Url.Content("~/Scripts/jquery.colorbox-min.js")" type="text/javascript"></script>
   </script>    
}

@section styles{
    <link href="@Url.Content("~/Content/colorbox.css")" rel="stylesheet" type="text/css" />
}

通过这种方式，您可以在所需的页面上使用样式和脚本。

在MVC3中使用Colorbox设置库

2 个答案: