Question

我正在尝试使用jQuery的fancybox插件在产品库中显示更大版本的缩略图。这是视图中的代码

@model IEnumerable<AccessorizeForLess.ViewModels.DisplayProductsViewModel>

@{
    ViewBag.Title = "Products";
    Layout = "~/Views/Shared/_Layout.cshtml";
    }

<link href="~/Content/Site.css" rel="stylesheet" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/jquery.fancybox.css?v=2.1.5" rel="stylesheet" />
<link href="~/Content/jquery.fancybox-buttons.css?v=1.0.5" rel="stylesheet" />
<link href="~/Content/jquery.fancybox-thumbs.css?v=1.0.7" rel="stylesheet" />
<h2>Products - Necklaces</h2>
<div id="update-message"></div>
    <p class="button">
        @Html.ActionLink("Create New", "Create")
    </p>
    @using (Html.BeginForm("AddToCart", "Orders", FormMethod.Post))
    {
        <div id="container">
            <div class="scroll">

                @foreach (var item in Model)
                {
                    <div class="itemcontainer">
                        <table>
                            <tr>
                                <td id="@item.Id">
                                    @Html.ActionLink(@item.Name, "Details", new { id = item.Id })
                                    <br />
                                    <div id="@item.Id"></div>
                                    <div class="divPrice" id="@item.Price">@Html.DisplayFor(modelItem => item.Price)</div>
                                    <div class="divImg"><a class="fancybox-thumbs" href="@item.Image.ImagePath" title="@item.Image.AltText" data-fancybox-group="thumb"><img src="@item.Image.ImagePath" alt="@item.Image.AltText" title="@item.Image.AltText" class="fancy" /></a></div>
                                    <div>&nbsp;</div>
                                    <div class="divQuantity">Quantity: @Html.TextBoxFor(modelItem => item.Quantity, new { @id = "quantity", @style = "width:50px;" })</div>
                                    <div class="divAddToCart">
                                        <p class="button">
                                            @Html.ActionLink("Add to cart", "AddToCart", "Orders", new { id = item.Id }, "")
                                        </p>
                                    </div>
                                    <div style="height:15px;"></div>
                                </td>
                            </tr>
                        </table>
                    </div>
                }

                <br />
            </div>
        </div>
    }
    @section scripts {
        <script src="~/Scripts/jQuery-jScroll.js"></script>
        <script src="~/Scripts/jquery.fancybox.js?v=2.1.5"></script>
        <script src="~/Scripts/jquery.fancybox-thumbs.js?v=1.0.7"></script>
        <script src="~/Scripts/jquery.fancybox-buttons.js?v=1.0.5"></script>
        <script type="text/javascript">
            $(function () {
                $('.scroll').jscroll({
                    autoTrigger: false
                });
                $('.fancybox-thumbs').fancybox({
                    prevEffect: 'none',
                    nextEffect: 'none',

                    closeBtn: true,
                    arrows: false,
                    nextClick: false,

                    helpers: {
                        thumbs: {
                            width: 50,
                            height: 50
                        }
                    }
                });
            });
        </script>
    }

当我加载它时，我得到了一大堆错误，它们如下：

未捕获的TypeError：无法读取未定义的属性“msie” jquery.fancybox-thumbs.js：22未捕获TypeError：无法设置属性 'thumb'of undefined jquery.fancybox-buttons.js：20 Uncaught TypeError：无法设置未定义索引的属性“按钮”：399 未捕获的TypeError：$（...）。fancybox不是函数

Answer 1

我更新到最新版本here，它似乎解决了我遇到的错误

使用jQuery的Fancybox插件时出错

1 个答案: