FancyBox不适用于我的MVC应用程序 [英] FancyBox Not Working On My MVC App

问题描述

大家好



我试图在mvc5中创建一个图像库，使用fancybox和我当前的代码（是的它很乱，但我试图让fancybox工作）它不允许我点击图像打开fancybox。提前致谢

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>

}

推荐答案

（ document ）。ready（ function （）{

(document).ready(function () {

（ .fancybox）。fancybox（{
maxWidth： 800 ，
maxHeight： 600 ，
fitToView： false ，
width： ' 70％'，
height：' 70％'，
autoSize： false ，
closeClick： false ，
openEffect：' none'，
closeEffect：' 无'
}）;
}）;
< / script >



< p >
@ Html.ActionLink（创建新页面内容，创建，null ，new {@class =btn btn-primary}）
< / p >

< br / >
< table < span class =code-attribute> class = table style = width： 1200px; >
< tr >
< th >
标题
< / th >
< th >
内容
< / th >
< th >
图片
< / th >
< th >
说明
< / th >
< / tr >

@foreach（模型中的var项）
{
< 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;向左飘浮;高度：200像素;溢出：隐藏;宽度：200px; >
< a id = ShowImage class = fancybox-button data-rel = fancybox-button < span class =code-keyword>>
title =@Html.DisplayFor（modelitem => item.Title）href =/ ProjectImages/RetrieveImage/@item.ID>
< div class = zoom >
< img src = /ProImages/RetrieveImage/@item.ID class = imgBox / >
< div class = 缩放-icon > < / div >
< / div >
< / a >
< / div >
< / div >
< < span class =code-leadattribute> / div >
< / div >

< / td >
< td >
@ Html.DisplayFor（modelItem => item.Description）
< / td >
< / tr >
}
< / table < span class =code-keyword>>
@foreach（模型中的var项目）
{
< a >
< img src = / ProjectImages/RetrieveImage/@item.ID class = fancybox / >
< / a >

}

(".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> }

这篇关于FancyBox不适用于我的MVC应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！