为啥灯箱 jQuery 插件对我不起作用？

Posted 2023-05-08

【中文标题】为啥灯箱 jQuery 插件对我不起作用？

【英文标题】：Why is the lightbox jQuery plugin not working for me?为什么灯箱 jQuery 插件对我不起作用？

【发布时间】：2013-04-14 20:41:54

【问题描述】：

按照此处的说明进行操作：http://lokeshdhakar.com/projects/lightbox2/ 和“Murach 的 javascript 和 jQuery”一书（第 320 和 321 页），我正在尝试将灯箱功能添加到我的网站。

我将 lightbox.css（和 screen.css，可能还需要思考）添加到我的 Content 文件夹，以及 lightbox.js 和 jquery.smooth-scroll.min.js（因为它包含在 lightbox 下载中，我认为灯箱需要它）到我的 Scripts 文件夹。

我还在我的图片文件夹中添加了灯箱下载中包含的以下图片：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"  ></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 , 但它似乎需要一个 URL...???)

更新

注意：我将尽快将这个问题奖励 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"    /></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"    /></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，我很惊讶它甚至可以正常工作......

【问题讨论】：

你为什么不试试 Fancybox 而不是 Lightbox。它是 Lightbox 的替代品，非常易于使用。 fancybox.net

Fancybox 好像 2.5 年没有更新了 (fancybox.net/changelog);这让我很紧张。

我有两个问题 1. 您是否创建了文件夹结构/fancybox/source/？ 2. 你从网站上下载了fancybox2吗？

答案：1) 否 2) 是。相对于其他所有内容，“/fancybox/source”到底应该在哪里？我的“Content”文件夹中有 jquery.fancybox.css，我的 Scripts 文件夹中有 jquery.fancybox.js，我的图像（fancybox*.gif 和 fancybox*.gif，以及“close.png”等）图片文件夹。

这样做。只需在您下载的Fancybox folder 中获取source 文件夹即可。将 source 文件夹重命名为 fancybox。然后正确链接fancybox文件夹下的css文件和js文件。

【参考方案1】：

您尝试实现的灯箱仅适用于 jQuery jquery-1.7.2 或更低版本，并且您不需要jquery-ui-1.9.2.min.js 即可使灯箱工作。

要使此版本的灯箱工作，您需要lightbox.css、jquery-1.7.2.js 和lightbox.js。

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

<html>
<head>
    <!-- 
         **** Things you need to do****
         1. SPECIFY LIGHTBOX CSS FILE
         2. SPECIFY JQUERY JS (jquery-1.7.2) FILE
         3. SPECIFY LIGHTBOX JS FILE 
    -->

    <link rel="stylesheet" href="http://lokeshdhakar.com/projects/lightbox2/css/lightbox.css" type="text/css" media="screen" /> 
    <script src="http://lokeshdhakar.com/projects/lightbox2/js/jquery-1.7.2.min.js"></script> 
    <script src="http://lokeshdhakar.com/projects/lightbox2/js/lightbox.js"></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 href="http://pages.swcp.com/~jamii/OtherCats/coco.jpg" rel="lightbox" >
            <img src="http://pages.swcp.com/~jamii/OtherCats/coco.jpg"  >
        </a>
    </div>
</div>
</body>
</html>

您可以使用 fancybox 代替 lightbox，它适用于最新的 jQuery 版本。 Fancybox的最新版本是Fancybox 2，您可以从这个站点下载它-http://fancyapps.com/fancybox/

实现 Fancybox 2 的代码

<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"  >
        </a>
    </div>
</div>
</body>
</html>

更新 #1

您需要源文件夹中的所有文件来实现fancybox（helpers 文件夹是可选的）。您需要将fancybox css、js 和图像保存在一个位置。您可以将source 文件夹复制到您的Web 应用程序目录中，并将其重命名为fancybox。然后你可以从你的html页面调用css文件，js文件。 例如：

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

【讨论】：

酷；该代码在 IE 中运行良好，在 Chrome 和 Firefox 中运行良好。但是，其中一个导致我的浏览器发生了各种奇怪的事情：其他选项卡被随意打开，Stack Overflow 页面从这个页面切换到我以前从未访问过的页面，等等。奇怪！无论如何，听起来 FancyBox2 可能在我（不远的）未来。我不喜欢在刚刚发布 2.0.0 版本时退回到 1.7.2 版本的想法——这是什么，加拿大北部的偏远荒野？！？另外，那只小猫让我想再养一只猫。

正如jQuery Site 中提到的“jQuery 2.0 具有与 jQuery 1.9 相同的 API，但不支持 Internet Explorer 6、7 或 8”，因此最好使用 jQuery 1.9。我有一些 web 开发经验，我们总是使用 fancybox 而不是 lightbox，因为它支持几乎所有的浏览器和最新版本的 jQuery。这就是为什么我告诉你使用任何你需要决定的fancybox :)

Fancybox 有效，所以我会尽快给你 100 点赏金奖金。大图像全部显示在屏幕的左侧，而不是像我希望的那样居中，但我确信这不会是一个巨大的障碍/障碍。

如果您能向我展示您的代码，那就太好了。您可以使用Pastebin上传代码并分享。

@ClayShannon 您需要先在 标记内调用jquery.fancybox.css，然后再调用jquery.fancybox.pack.js。这是给你的一个例子 - jsfiddle.net/UNjZE。图像居中，我看不出有任何问题。我也更新了我的答案。

【参考方案2】：

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

【讨论】：

没错。谢谢。