Настройка галереи с Colorbox в MVC3 - PullRequest
Новая
       6

Настройка галереи с Colorbox в MVC3

0 голосов
/ 11 января 2012

Все еще изучаю MVC3, EF и Razor, и мне интересно, кто-нибудь успешно использовал Colorbox для улучшения галереи с MVC3 и будет рад помочь мне. Я установил модель галереи, контроллер и вид. У меня есть изображения, сохраненные в папке изображений в папке содержимого. Я генерирую миниатюры динамически из больших файлов изображений. У меня есть javascripts colorbox и 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));
    }}

Миниатюры хорошо отображаются на странице просмотра, но при нажатии на миниатюру появляется черный пустой экран

Ответы [ 2 ]

0 голосов
/ 12 января 2012

Класс, который вы используете .gallery_module, может сбить вас с толку.Вместо этого переименуйте его в .pic , потому что вам нужно добавить его для ссылки на каждое изображение.Кажется, тег 'rel' предназначен только для организации разных групп изображений на одной странице.Я бы предложил вам загрузить файл 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)

Затем на странице, где вы хотите свою галерею colorboxположить: 

@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" />
}

Таким образом, у вас есть стили и сценарии на страницах, которые вы хотите.

0 голосов
/ 11 января 2012

Попробуйте переместить ссылки на файлы CSS и Javascript на страницу _Layout. Также убедитесь, что у вас есть ссылки на файлы JavaScript в правильном порядке.

...