Search code examples
jquery-pluginsfancybox

Errors when using jQuery's Fancybox plugin


I'm attempting to use jQuery's fancybox plugin to show larger versions of thumbnails in the products gallery. Here's the code from the view

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

When I load it I get a whole slew of errors, they are as follows:

Uncaught TypeError: Cannot read property 'msie' of undefined jquery.fancybox-thumbs.js:22 Uncaught TypeError: Cannot set property 'thumbs' of undefined jquery.fancybox-buttons.js:20 Uncaught TypeError: Cannot set property 'buttons' of undefined Index:399 Uncaught TypeError: $(...).fancybox is not a function


Solution

  • I updated to the latest version here and it appears to have solved the errors I was encountering