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

标签 jquery html jquery-ui jquery-plugins lightbox

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

我将 lightbox.css(和 screen.css，认为可能还需要)添加到我的内容文件夹，以及 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 吗？

顺便说一句，我试图在 lightbox 的内部论坛上发布这个，但是无法登录，无论是 Fakebook 还是 Google(尽管我有(在前者的情况下不情愿地)两个帐户；还有我尝试过的 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" 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>

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

更新 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，我很惊讶它竟然能像现在这样工作......

最佳答案

您尝试实现的灯箱仅适用于 jQuery jquery-1.7.2 或更低版本，而且您不需要 jquery-ui-1.9.2.min.js 以便 Lightbox 正常工作。

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

下面显示的示例代码与您使用灯箱的示例代码类似。 (将此代码粘贴到文本编辑器中，将其保存为 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>

您可以使用 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" width="300" height="200">
        </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>

enter image description here

关于jquery - 为什么灯箱 jQuery 插件对我不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16138766/

上一篇：javascript - 取消转义 html 字符实体

下一篇：javascript - jquery 在 <ul> 中显示项目列表

相关文章：

javascript - 如何开始使用 jQuery Mobile？ (程序员背景)

jquery - 将内联 jquery 移动到 .js 文件

python - pandas 上的表级格式设置为 html 样式

wordpress - 在 WordPress 中使用 jQuery UI 对话框

Javascript 和 JQuery 问题 - 抓取 YouTube 数据并将其写入页面

javascript - 在 jQuery 切换方法中保存先前的值

jquery - 在 jquery 模型中运行脚本

html - go - 调用 "html/template"时没有足够的参数。必须

php - 用户输入后更改服务器端的 div 类

jQuery UI 工具提示加载并延迟显示

©2024 IT工具网  联系我们