我添加了lightBox.css(和screen.css,可能也需要它),我的Content文件夹,以及lightBox.js和jquery.smooth-scroll.min.js(因为它包含在灯箱下载中,我想象灯箱需要它)到我的Scripts文件夹.

我还在我的Images文件夹中添加了以下图片：light.png,loading.gif,next.png和prev.png.

我有这个html和jQuery代码(这是整个Default.cshtml)：

@{
    Layout = "~/_SiteLayout.cshtml";
    Page.Title = "el Garrapata - Spoon!!!";
}

<div id="tabs">
    <ul>
    <li><a href="#tabs-1">Spring</a></li>
    <li><a href="#tabs-2">Summer</a></li>
    <li><a href="#tabs-3">Fall</a></li>
    <li><a href="#tabs-4">Winter</a></li>
    </ul>
    <div id="tabs-1">
        <a href="Images/Fullsize/Landscapes/Spring_2013 04 06_2293.jpg" rel="lightBox" ><img src="Images/Thumbnails/Landscapes/Spring_2013 04 06_2293_th.jpg" width="300" height="200"></a>
    </div>

    <div id="tabs-2">
    </div>

    <div id="tabs-3">
    </div>

    <div id="tabs-4">
    </div>

</div>

    <script type="text/javascript">
        $(document).ready(function () {
            $("#tabs").tabs();
        });
    </script>

…但它不起作用：虽然在“弹簧”选项卡中显示一个缩略图图像,但单击它只会导致屏幕大部分变暗 – 它变得“灰显”到几乎不透明的程度.

灯箱下载还包括jquery-1.7.2.min.js和jquery-ui-1.8.18.custom.min.js

我在_SiteLayout.cshtml中引用了较新的版本：

<script src="~/Scripts/jquery-2.0.0.min.js"></script>
<script src="~/Scripts/jquery-ui-1.9.2.min.js"></script>

这可能是问题吗？如果我想使用lightBox,我是否“使用旧版本的jQuery和jQueryUI”？

顺便说一下,我试图在灯箱的内部论坛上发布这个帖子,但无法登录,无论是Fakebook还是Google(虽然我(不情愿的是前者)帐户同时使用;还有我试过的OpenID爵士乐,但它似乎期待一个URL …… ???)

UPDATE

注意：我准备尽快给这个问题100分.如果我在此之前得到答案,我将奖励赏金后答案.

更新2

我已经切换到fancybox,但是当点击“缩略图”而不是中心时,大(href)图像仍然会拥抱页面的左侧.这里是所有Razor,HTML和jQuery(为简洁起见,一些图像代码被省略)：

从_SiteLayout.cshtml中选择：

<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.4" type="text/css" media="screen" />
<script src="~/Scripts/jquery-2.0.0.min.js"></script>
<!-- May want to replace the above before deploying with use of a CDN:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
OR: <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
..and similar for jquery-ui -->
<script src="~/Scripts/jquery-ui-1.9.2.min.js"></script>
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.4"></script>

来自Default.cshtml：

@{
    Layout = "~/_SiteLayout.cshtml";
    Page.Title = "Garrapata";
}

<div id="tabs">
    <ul>
    <li><a href="#tabs-1">Spring</a></li>
    <li><a href="#tabs-2">Summer</a></li>
    <li><a href="#tabs-3">Fall</a></li>
    <li><a href="#tabs-4">Winter</a></li>
    </ul>
    <div id="tabs-1">
        <a class="fancybox" rel="group" href="Images/Fullsize/Landscapes/Spring_2013 04 06_2293.jpg"><img src="Images/Thumbnails/Landscapes/Spring_2013 04 06_2293_th.jpg" width="294" height="196" alt="" /></a>
        <a class="fancybox" rel="group" href="Images/Fullsize/Landscapes/Spring_2013 04 06_2295.jpg"><img src="Images/Thumbnails/Landscapes/Spring_2013 04 06_2295_th.jpg" width="294" height="196" alt="" /></a>
    </div>

    <div id="tabs-2">
    </div>

    <div id="tabs-3">
    </div>

    <div id="tabs-4">
    </div>

</div>

    <script type="text/javascript">
        $(document).ready(function () {
            $("#tabs").tabs();
            $(".fancybox").fancybox({
                openEffect  : 'elastic',closeEffect : 'elastic'
            });
        });
    </script>

此外,我没有在NE角落看到“关闭”按钮 – 可能是因为占据所有“顶部”空间的大图像没有留下空间让它可见.

更新3

现在我看到我在_SiteLayout.cshtml中引用的.css和.js文件应该在/ fancybox / source中

这似乎不是我现在所拥有的,即：

<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.4" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.4"></script>

……应该做些什么：

<link rel="stylesheet" href="~/Content/jquery.fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="~/Scripts/jquery.fancybox.js"></script>

…因为我已将这些文件复制到这些位置.

你提到的方式真的必须是那种特殊的(而且,在我看来,相当特殊)吗？

因为它看起来基于我所拥有的css和js根本就找不到,所以我很惊讶它甚至可以正常工作……