为什么lightbox jQuery插件不适合我？

按照这里的说明： http://lokeshdhakar.com/projects/lightbox2/和“Murach的JavaScript和jQuery”一书(第320和321页),我正在尝试为我的网站添加灯箱功能.

我添加了lightBox.css(和screen.css,可能也需要它),我的Content文件夹,以及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还是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根本就找不到,所以我很惊讶它甚至可以正常工作……

解决方法

您尝试实现的灯箱仅适用于jQuery jquery-1.7.2或更低版本,并且您不需要jquery-ui-1.9.2.min.js以使LightBox工作.

要使此版本的灯箱工作,您需要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>

原文地址：https://www.jb51.cc/jquery/179070.html

为什么lightbox jQuery插件不适合我？

解决方法

相关推荐