在MVC3中使用Colorbox设置图库

仍在学习MVC3，EF和Razor，我想知道是否有人已成功使用Colorbox来增强MVC3的图库，并很乐意为我伸出援助之手。我已经设置了一个画廊模型，控制器和视图。我将图像保存在Content文件夹的图像文件夹中。我从大图像文件中动态生成缩略图。我有在图库的索引视图中引用的colorbox javascripts和css和jquery。单击缩略图时，会显示空白的黑色屏幕。任何帮助将不胜感激。在MVC3中使用Colorbox设置图库

索引视图是在视图页面底部如下

@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>

我使用的图片助手是如下

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)); 
    }}

缩略图在查看页面显示正常，但是当缩略图被点击时，黑色空白屏幕结果为

来源

2012-01-10 Diin

您想要显示的任何代码？ – 2012-01-11 06:54:31

@DarinDimitrov我已添加代码。我想知道的是，colorbox是否可以在没有任何调整的情况下使用MVC？ – Diin 2012-01-11 21:17:48

@Diin不要担心colorbox与MVC一起使用的特殊调整，它只是一些js和css ... – Draganov 2012-01-12 03:14:45

您使用.gallery_module的类可能会让您感到困惑。将其重命名为.pic，因为您需要将其添加到每张图片的链接。 'rel'标签似乎仅用于在同一页面内组织不同的图片组。我建议你从here下载colorbox.zip文件。在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" /> 
}

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

来源

2012-01-12 03:04:51 Draganov

非常感谢@Draganov您使它适用于我 – Diin 2012-01-12 03:29:50

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

来源

2012-01-10 22:16:23

非常感谢您的建议也促成了最终的解决方案 – Diin 2012-01-12 03:28:58

在MVC3中使用Colorbox设置图库

回答

相关问题