我添加了lightBox.css(和screen.css,可能也需要它),我的Content文件夹,以及lightBox.js和jquery.smooth-scroll.min.js(因为它包含在灯箱下载中,/uploads/20230423/8cdbcc30414c1d91ef937d0df1e445f7.png,/uploads/20230423/f68b6b6e9dbc3fed9828888665d0af32.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还是Google(虽然我(不情愿的是前者)帐户同时使用;还有我试过的OpenID爵士乐,但它似乎期待一个URL …… ???)
UPDATE
注意：我准备尽快给这个问题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>
此外,我没有在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根本就找不到,所以我很惊讶它甚至可以正常工作……
解决方法
要使此版本的灯箱工作,您需要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(helpers文件夹是可选的).您需要将fancybox css,js和图像保存在一个位置.您可以做的是将源文件夹复制到您的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>