按照此处的说明进行操作：http: //lokeshdhakar.com/projects/lightbox2/和“Murach 的 JavaScript 和 jQuery”一书中（第 320 和 321 页），我正在尝试将灯箱功能添加到我的网站。
我将 lightbox.css（和 screen.css，可能还需要思考）添加到我的 Content 文件夹，以及 lightbox.js 和 jquery.smooth-scroll.min.js（因为它包含在 lightbox 下载中，并且我想像灯箱需要它）到我的脚本文件夹。
我还在我的图像文件夹中添加了灯箱下载中包含的以下图像：close.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>
...但它不起作用：虽然该缩略图显示在“Spring”选项卡中，但单击它只会导致屏幕大部分变暗 - 它变得“变灰”到几乎不透明的程度。
灯箱下载还包括 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>
这可能是问题吗？如果我想使用灯箱，我是否会“卡住”使用旧版本的 jQuery 和 jQueryUI？
顺便说一句，我试图在灯箱的内部论坛上发布这个，但无法登录，无论是使用 Fakebook 还是谷歌（尽管我（在前者的情况下不情愿地）都有两个账户；我也尝试过 OpenID jazz，但它似乎期待一个网址......？？？）
更新
注意：我将尽快将这个问题奖励 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，我很惊讶它甚至可以像它一样工作......
