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> </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
I updated to the latest version here and it appears to have solved the errors I was encountering