問題描述
按照此處的說明進行操作: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="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>
來自 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" 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/
實現 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
您需要源文件夾中的所有文件來實現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模板網！