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

Question

提问by B. Clay Shannon

Going by the instructions both here: http://lokeshdhakar.com/projects/lightbox2/and in the book "Murach's JavaScript and jQuery" (on pages 320 and 321), I'm trying to add lightbox functionality to my site.

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

I added lightbox.css (and screen.css, thtinking that might also be required) to my Content folder, and both lightbox.js and jquery.smooth-scroll.min.js (because it was included in the lightbox download, and I figured lightbox needed it) to my Scripts folder.

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

I also added to my Images folder the following images included in the lightbox download: close.png, loading.gif, next.png, and prev.png.

我还在我的图片文件夹中添加了灯箱下载中包含的以下图片：close.png、loading.gif、next.png 和 prev.png。

I've got this html and jQuery code (this is the entire Default.cshtml at this point):

我有这个 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>

...but it doesn't work: although that one thumbnail image displays in the "Spring" tab, clicking it simply causes the screen to go mostly dark - it becomes "grayed out" to the point of almost opaqueness.

...但它不起作用：尽管在“Spring”选项卡中显示了一个缩略图，单击它只会导致屏幕大部分变暗 - 它变得“变灰”到几乎不透明的程度。

The lightbox download also includes jquery-1.7.2.min.js and jquery-ui-1.8.18.custom.min.js

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

I'm referencing newer versions in _SiteLayout.cshtml:

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

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

Could this be the problem? Am I "stuck" using older versions of jQuery and jQueryUI if I want to use lightbox?

这可能是问题吗？如果我想使用灯箱，我是否“卡住”了使用旧版本的 jQuery 和 jQueryUI？

BTW, I tried to post this at lightbox's internal forum, but was unable to log in, neither with Fakebook or Google (although I have (reluctantly in the case of the former) accounts with both; also the OpenID jazz I tried, but it seems to expect an URL...???)

顺便说一句，我试图在 lightbox 的内部论坛上发布这个，但无法登录，无论是 Fakebook 还是谷歌（尽管我有（在前者的情况下不情愿）帐户；还有我尝试过的 OpenID 爵士乐，但它似乎期待一个网址......？）

UPDATE

更新

Note: I am going to bountify this question for 100 points ASAP. If I get an answer prior to that, I will award the bounty post-answer.

注意：我将尽快为这个问题加分 100 分。如果我在此之前得到答案，我将在回答后奖励赏金。

UPDATE 2

更新 2

I've switched to fancyBox, but the large (href) image still hugs the left side of the page when clicking on the "thumbnail", not the center. Here's all the Razor, HTML, and jQuery (some of the image code elided for brevity):

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

selected from _SiteLayout.cshtml:

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

from Default.cshtml:

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

Also, I don't see the "Close" button in the NE corner - perhaps because the large image, taking up all the "top" space, has not left room for it to be visible.

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

UPDATE 3

更新 3

Now I see that the .css and .js files I was referencing in _SiteLayout.cshtml are supposed to be in /fancybox/source

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

It seems like instead of what I have now, namely:

似乎不是我现在拥有的，即：

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

...what shouldwork would be:

...应该是：

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

...as I have copied those files into those locations.

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

Does it reallyhave to be that particular (and, it seems to me, rather peculiar) way you mentioned?

它真的必须是你提到的那种特别的（而且，在我看来，相当奇特）的方式吗？

Since it would seem based on what I've got that the css and js would not be found at all, I'm surprised it even works as well as it does...

因为它似乎基于我所知道的根本找不到 css 和 js，所以我很惊讶它甚至可以像它一样工作......

Answer 1

回答by Chamara Keragala

The lightbox you're trying to implement only works with jQuery jquery-1.7.2or below and also you don't need jquery-ui-1.9.2.min.jsin order for the Lightbox to work.

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

For this version of lightbox to work, you need lightbox.css, jquery-1.7.2.jsand lightbox.js.

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

Shown below is a sample code similar to your one where the Lightbox is working. ( Paste this code on a Text editor, save it as a HTML page and open it using your Web Browser )

下面显示的是一个示例代码，类似于您使用 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" width="300" height="200">
        </a>
    </div>
</div>
</body>
</html>

You can use fancybox instead of lightbox, which works with the latest jQuery versions. The latest version of Fancybox is Fancybox 2, You can download it from this Site - http://fancyapps.com/fancybox/

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

Code for implementing Fancybox 2

实现 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" width="300" height="200">
        </a>
    </div>
</div>
</body>
</html>

UPDATE #1

更新 #1

You need all the files in the source folder to implement fancybox (helpers folder is optional). You need to keep the fancybox css, js and images in one location. What you can do is copy the sourcefolder into your web app directory and rename it to fancybox. Then you can call the css file, js files from your html page. eg:

您需要源文件夹中的所有文件来实现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>

enter image description here

在此处输入图片说明

Answer 2

回答by Novasol

Sometimes It is not also working, when you have other .js libraries included before lightbox. Put it just after jquery.

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

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

提问by B. Clay Shannon

UPDATE

更新

UPDATE 2

更新 2

UPDATE 3

更新 3

回答by Chamara Keragala

回答by Novasol

相关推荐

最近更新

标签

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

提问by B. Clay Shannon

UPDATE

更新

UPDATE 2

更新 2

UPDATE 3

更新 3

回答by Chamara Keragala

回答by Novasol

相关推荐

jQuery 我如何知道我的 input type="file" 是否选择了内容

jQuery Magnific Popup：如何在弹出窗体中添加自定义关闭按钮？

jQuery Uploadify - 如何使用 onComplete？

jQuery 如何在页面加载时自动弹出 CSS3 模态窗口？

相关推荐

最近更新

标签