在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設置圖庫

回答

相關問題