为什么lightbox jQuery插件不适合我？
按照这里的说明进行操作：http://lokeshdhakar.com/projects/lightbox2/和“Murach的JavaScript和jQuery”一书（第320页和第321页），我正在尝试为我的网站添加灯箱功能。
我在我的Content文件夹中添加了lightbox.css（和screen.css，可能还需要它），以及lightbox.js和jquery.smooth-scroll.min.js（因为它包含在灯箱下载中） ，我认为灯箱需要它）到我的Scripts文件夹。
我还在我的Images文件夹中添加了以下图片：light.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>
...但它不起作用：虽然在“弹簧”选项卡中显示一个缩略图图像，但单击它只会导致屏幕大部分变暗 - 它变得“灰显”到几乎不透明的程度。
灯箱下载还包括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>
这可能是问题吗？如果我想使用lightbox，我是否会“使用旧版本的jQuery和jQueryUI”？
顺便说一下，我试图在灯箱的内部论坛发帖，但无法登录，无论是Fakebook还是谷歌（虽然我（不情愿地在前者的情况下）两个帐户;还有我试过的OpenID爵士乐，但似乎期待一个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>
：
@{
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角落看到“关闭”按钮 - 也许是因为占据所有“顶部”空间的大图像没有留下空间让它可见。
更新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根本就找不到，所以我很惊讶它甚至可以正常工作......
2 个答案:
答案 0 :(得分：11)
您尝试实施的灯箱仅适用于jQuery jquery-1.7.2 或更低版本，您也不需要jquery-ui-1.9.2.min.js才能使灯箱正常工作。< / p>
要使此版本的灯箱正常工作，您需要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" 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（帮助程序文件夹是可选的）。您需要将fancybox css，js和图像保存在一个位置。您可以做的是将source文件夹复制到您的网络应用程序目录中，并将其重命名为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>
答案 1 :(得分：1)
有时它在灯箱之前包含其他.js库时也不起作用。把它放在jquery之后。
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？