FancyBox Not Working On My MVC App

See more:

Visual-Studio

HTML

C#5.0

, +

Hi Guys

Im trying to create an image gallery in mvc5 using fancybox with my current code (yes its a mess but im trying to get fancybox to work) its not allowing me to open fancybox upon clicking on image. Thanks in advance

@model IEnumerable<template.model.projectimagesview>
@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>
<link href="~/Content/jquery.fancybox-buttons.css" rel="stylesheet" />
<link href="~/Content/jquery.fancybox-thumbs.css" rel="stylesheet" />
<link href="~/Content/jquery.fancybox.css" rel="stylesheet" />
<script src="~/Scripts/jquery.fancybox-buttons.js"></script>
<script src="~/Scripts/jquery.fancybox-media.js"></script>
<script src="~/Scripts/jquery.fancybox-thumbs.js"></script>
<script src="~/Scripts/jquery.fancybox.js"></script>
<script src="~/Scripts/jquery.fancybox.pack.js"></script>
<script src="~/Scripts/jquery-ui-1.11.4.min.js"></script>
<script src="~/Scripts/jquery-1.9.0.min.js"></script>



<script type="text/javascript">
    $(document).ready(function () {
        $(".fancybox").fancybox({
            maxWidth: 800,
            maxHeight: 600,
            fitToView: false,
            width: '70%',
            height: '70%',
            autoSize: false,
            closeClick: false,
            openEffect: 'none',
            closeEffect: 'none'
        });
    });
</script>



<p>
    @Html.ActionLink("Create New Page Content", "Create", null, new { @class = "btn btn-primary" })
</p>

<br />
<table class="table" style="width: 1200px;">
    <tr>
        <th>
            Title
        </th>
        <th>
            Content
        </th>
        <th>
            Image
        </th>
        <th>
            Description
        </th>
    </tr>

    @foreach (var item in Model)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.Title)
            </td>
            <td style="width: 500px;">
                @Html.Raw(item.Contents)
            </td>
            <td>
                <div class="row-fluid">
                    <div class="span2">
                        <div class="item">
                            <div style=" margin:10px; float:left; height:200px; overflow:hidden; width:200px;">
                                <a id="ShowImage" class="fancybox-button" data-rel="fancybox-button">
                                   title=@Html.DisplayFor(modelitem=>item.Title) href="/ProjectImages/RetrieveImage/@item.ID">
                                    <div class=" zoom">
                                        <img src="/ProjectImages/RetrieveImage/@item.ID" class="imgBox" />
                                        <div class="zoom-icon"></div>
                                    </div>
                                </a>
                            </div>
                            </div>
                        </div>
                    </div>
           
</td>
            <td>
                @Html.DisplayFor(modelItem => item.Description)
            </td>
        </tr>
    }
</table>
@foreach (var item in Model)
{
    <a>
        <img src="/ProjectImages/RetrieveImage/@item.ID" class="fancybox" />
    </a>

}