問(wèn)題描述
按照此處的說(shuō)明進(jìn)行操作:http://lokeshdhakar.com/projects/lightbox2/在Murach 的 JavaScript 和 jQuery"一書(shū)中(第 320 和 321 頁(yè))，我正在嘗試將燈箱功能添加到我的網(wǎng)站.
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(因?yàn)樗?lightbox 下載中，我認(rèn)為燈箱需要它)到我的 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.
我有這個(gè) html 和 jQuery 代碼(此時(shí)這是整個(gè) 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"選項(xiàng)卡中，但單擊它只會(huì)導(dǎo)致屏幕大部分變暗 - 它會(huì)變灰"到幾乎不透明的程度.
...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>
這可能是問(wèn)題嗎?如果我想使用燈箱，我是否會(huì)卡住"使用舊版本的 jQuery 和 jQueryUI?
Could this be the problem? Am I "stuck" using older versions of jQuery and jQueryUI if I want to use lightbox?
順便說(shuō)一句，我試圖在燈箱的內(nèi)部論壇上發(fā)布此內(nèi)容，但無(wú)法登錄，無(wú)論是使用 Fakebook 還是谷歌(盡管我(在前者的情況下不情愿地)擁有這兩個(gè)賬戶；我也嘗試過(guò) OpenID jazz, 但它似乎需要一個(gè) 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...???)
注意:我將盡快將這個(gè)問(wèn)題獎(jiǎng)勵(lì) 100 分.如果我在此之前得到答案，我將在回答后獎(jiǎng)勵(lì)賞金.
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，但點(diǎn)擊縮略圖"時(shí)，大 (href) 圖像仍然緊貼頁(yè)面左側(cè)，而不是中心.這是所有 Razor、HTML 和 jQuery(為簡(jiǎn)潔起見(jiàn)，省略了一些圖像代碼):
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="http://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>
來(lái)自 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 角沒(méi)有看到關(guān)閉"按鈕 - 可能是因?yàn)檎紦?jù)了所有頂部"空間的大圖像沒(méi)有留出空間讓它可見(jiàn).
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.
現(xiàn)在我看到我在 _SiteLayout.cshtml 中引用的 .css 和 .js 文件應(yīng)該在/fancybox/source 中
Now I see that the .css and .js files I was referencing in _SiteLayout.cshtml are supposed to be in /fancybox/source
似乎不是我現(xiàn)在所擁有的，即:
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>
...應(yīng)該起作用的是:
<link rel="stylesheet" href="~/Content/jquery.fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="~/Scripts/jquery.fancybox.js"></script>
...因?yàn)槲乙褜⑦@些文件復(fù)制到這些位置.
...as I have copied those files into those locations.
它真的必須是你提到的那種特殊(而且，在我看來(lái)，相當(dāng)奇特)的方式嗎?
Does it really have to be that particular (and, it seems to me, rather peculiar) way you mentioned?
因?yàn)楦鶕?jù)我所得到的似乎根本找不到 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...
推薦答案
您嘗試實(shí)現(xiàn)的燈箱僅適用于 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 的示例代碼類(lèi)似.(將此代碼粘貼到文本編輯器中，將其保存為 HTML 頁(yè)面并使用 Web 瀏覽器打開(kāi))
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" 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 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/
實(shí)現(xiàn) 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" 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" 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
您需要源文件夾中的所有文件來(lái)實(shí)現(xiàn)fancybox(helpers 文件夾是可選的).您需要將fancybox css、js 和圖像保存在一個(gè)位置.您可以將 source 文件夾復(fù)制到您的 Web 應(yīng)用程序目錄中，并將其重命名為 fancybox.然后你可以從你的html頁(yè)面調(diào)用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>
這篇關(guān)于為什么燈箱 jQuery 插件對(duì)我不起作用?的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！