为什么lightbox jQuery插件不适合我？

按照这里的说明：在《Murach的JavaScript和jQuery》（第320页和第321页）一书中，我试图将lightbox功能添加到我的站点

我将lightbox.css（和screen.css，这可能也是必需的）添加到我的内容文件夹中，并将lightbox.js和jquery.smooth-scroll.min.js（因为它包含在lightbox下载中，我认为lightbox需要它）添加到我的脚本文件夹中

我还向我的图像文件夹添加了lightbox下载中包含的以下图像：close.png、loading.gif、next.png和prev.png

我已经得到了这个html和jQuery代码（这是整个Default.cshtml）：

@{
Layout=“~/\u siteloayout.cshtml”；
Page.Title=“el Garrapata-Spoon！！！”；
}






$（文档）.ready（函数（）{
$（“#制表符”）.tabs（）；
});

…但它不起作用：虽然一个缩略图显示在“Spring”选项卡中，但单击它只会导致屏幕大部分变暗-它变为“灰色”，几乎不透明

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

我正在引用_siteloayout.cshtml中的较新版本：

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

<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>

这可能是问题所在吗？如果我想使用lightbox，我是否会使用jQuery和jQueryUI的旧版本

顺便说一句，我试图在lightbox的内部论坛上发布这篇文章，但无法登录，无论是Fakebook还是Google（尽管我（不情愿地是前者）都有这两个帐户；还有我尝试过的OpenID jazz，但它似乎期待一个URL…？）

更新 注：我打算尽快给这个问题100分。如果我在那之前得到了答案，我会奖励赏金邮报的答案

更新2 我已经切换到fancyBox，但是当点击“缩略图”时，大的（href）图像仍然在页面的左侧，而不是中间。以下是所有Razor、HTML和jQuery（为了简洁起见省略了一些图像代码）：

从_siteloayout.cshtml中选择：

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

<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>

@{
Layout=“~/\u siteloayout.cshtml”；
Page.Title=“Garrapata”；
}






$（文档）.ready（函数（）{
$（“#制表符”）.tabs（）；
$（“.fancybox”）.fancybox({
openEffect:'弹性'，
闭合效应：“弹性”
});
});

此外，我在东北角看不到“关闭”按钮——可能是因为占据了所有“顶部”空间的大图像没有留下可见的空间

更新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根本找不到，所以我很惊讶它甚至可以像它那样工作…

您试图实现的lightbox只在jQueryjQuery-1.7.2或更低版本下工作，而且您不需要

jQuery-ui-1.9.2.min.js

来使lightbox工作

要使此版本的lightbox正常工作，您需要

lightbox.css

、

jquery-1.7.2.js

和

lightbox.js

下面显示的示例代码与Lightbox工作的示例代码类似。（将此代码粘贴到文本编辑器上，将其另存为HTML页面并使用Web浏览器打开）

---

当lightbox之前包含其他.js库时，有时它也不起作用。把它放在jquery之后。

为什么不试试Fancybox而不是Lightbox呢。它是灯箱的替代品，非常容易使用。Fancybox似乎在2.5年内没有更新过（）；这让我很紧张。我有两个问题。您是否创建了文件夹结构

/fancybox/source/

？2.你从网站下载了fancybox2吗？答案：1）否2）是。相对于其他一切，“/fancybox/source”究竟应该在哪里？我的“内容”文件夹中有jquery.fancybox.css，脚本文件夹中有jquery.fancybox.js，还有图像（fancybox*.gif和fancybox*.gif，以及“close.png”等等，在我的图片文件夹中。这样做。只需在下载的

Fancybox文件夹中获取
source
文件夹。将
source
文件夹重命名为
Fancybox
。然后将
Fancybox
文件夹中的css文件和js文件正确链接。酷；该代码在IE中运行正常，在Chrome和Fire中运行良好不过，其中一个让我的浏览器发生了各种奇怪的事情：其他选项卡被随意打开，堆栈溢出页面从这个页面切换到了我以前从未访问过的页面，等等。奇怪！无论如何，听起来FancyBox2可能在我的（附近）中未来。当版本2.0.0刚刚发布时，我不喜欢回到版本1.7.2的想法-这是什么，加拿大北部的偏远荒野？！？还有，那只小猫让我想再养一只猫。正如“jQuery 2.0与jQuery 1.9有相同的API，但不支持Internet Explorer 6、7或8”中提到的因此，如果你能使用jQuery 1.9就更好了。我在web开发方面有一些经验，我们总是使用fancybox而不是lightbox，因为它支持几乎所有的浏览器和jQuery的最新版本。这就是为什么我告诉你要使用fancybox的原因，只要你需要，你可以决定：）fancybox可以工作，所以我给你100分的奖励
<html>
<head>
    <!-- Add jquery library -->
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 

    <!-- Add fancyBox main JS and CSS files -->
    <script type="text/javascript" src="http://fancyapps.com/fancybox/source/jquery.fancybox.pack.js"></script>
    <link rel="stylesheet" type="text/css" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css" media="screen" />

    <script>
        $(document).ready(function(){
            $(".fancybox").fancybox({
                openEffect  : 'elastic',
                closeEffect : 'elastic'
            });
        });
    </script>
</head>
<body>
<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" href="http://pages.swcp.com/~jamii/OtherCats/coco.jpg" rel="lightbox" > <!--Add class "fancybox"-->
            <img src="http://pages.swcp.com/~jamii/OtherCats/coco.jpg" width="300" height="200">
        </a>
    </div>
</div>
</body>
</html>

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