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

问题描述

按照此处的说明进行操作:http://lokeshdhakar.com/projects/lightbox2/在Murach 的 JavaScript 和 jQuery"一书中(第 320 和 321 页)，我正在尝试将灯箱功能添加到我的网站.

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.

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

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.

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

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

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

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

@{
    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"选项卡中，但单击它只会导致屏幕大部分变暗 - 它会变灰"到几乎不透明的程度.

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

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

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

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

I'm referencing newer versions in _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?

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

顺便说一句，我试图在灯箱的内部论坛上发布此内容，但无法登录，无论是使用 Fakebook 还是谷歌(尽管我(在前者的情况下不情愿地)拥有这两个账户；我也尝试过 OpenID jazz, 但它似乎需要一个 URL...???)

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...???)

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

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.

我已切换到 fancyBox，但点击缩略图"时，大 (href) 图像仍然紧贴页面左侧，而不是中心.这是所有 Razor、HTML 和 jQuery(为简洁起见，省略了一些图像代码):

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

选自_SiteLayout.cshtml:

selected from _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:

from 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 角没有看到关闭"按钮 - 可能是因为占据了所有顶部"空间的大图像没有留出空间让它可见.

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.

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

Now I see that the .css and .js files I was referencing in _SiteLayout.cshtml are supposed to be in /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>

...应该起作用的是:

<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 really have to be that particular (and, it seems to me, rather peculiar) way you mentioned?

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

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

推荐答案

您尝试实现的灯箱仅适用于 jQuery jquery-1.7.2 或以下版本，您也不需要jquery-ui-1.9.2.min.js 以便灯箱工作.

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

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

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

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

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 )

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

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

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

更新 #1

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

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 source folder into your web app directory and rename it to fancybox. Then you can call the css file, js files from your html page. eg:

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

这篇关于为什么灯箱 jQuery 插件对我不起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！