为什么灯箱jQuery插件不适合我？ [英] Why is the lightbox jQuery plugin not working for me?

查看：82
本文介绍了为什么灯箱jQuery插件不适合我？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

按照以下说明操作： http://lokeshdhakar.com/projects/lightbox2/ 并在Murach的JavaScript和jQuery一书（第320和321页）中，我试图给我的网站添加lightbox功能。



我添加了lightbox.css （和screen.css，可能还需要进行缩减）到我的Content文件夹，以及lightbox.js和jquery.smooth-scroll.min.js（因为它包含在Lightbox下载中，我认为它需要它）到我的脚本文件夹。



我还将以下图片添加到我的图片文件夹中，包含在Lightbox下载中：close.png，loading.gif，next.png和prev



我有这个html和jQuery代码（这里是整个Default.cshtml）：

  @ {
 Layout =〜/ _SiteLayout.cshtml; 
 Page.Title =el Garrapata  - 勺子!!!; 
} 
 
< div id =tabs> 
< ul> 
< li>< a href =＃tabs-1> Spring< / a>< / li> 
< li>< a href =＃tabs-2>夏季< / a>< / li> 
< li>< a href =＃tab-3> Fall< / a>< / li> 
< li>< a href =＃tabs-4>冬季< / a>< / li> 
< / ul> 
< div id =tabs-1> 
 < / 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点击它只是简单地导致屏幕大部分变黑 - 它变成了灰色，几乎不透明。



灯箱下载还包括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>

这可能是问题吗？如果我想使用灯箱，我是否卡住了jQuery和jQueryUI的旧版本？



顺便说一句，我试图在灯箱的内部论坛上发布，但无法登录，既没有Fakebook也没有谷歌（虽然我有两个帐户（不情愿在前者的情况下），还有我试过的OpenID爵士，但它似乎期待一个URL ... ???）



UPDATE



注意：我将尽快为这个问题提供100个点。如果我在此之前得到答案，我会奖赏回答后的赏金。

更新2



我已经切换到fancyBox，但大型（href）图像仍然拥抱页面左侧点击缩略图，而不是中心。这里有所有的Razor，HTML和jQuery（为简洁起见，一些图片代码被省略了）：



选自_SiteLayout.cshtml：

 < link rel =stylesheethref =/ fancybox / source / jquery.fancybox.css？v = 2.1.4type =text / css media =screen/> 
< script src =〜/ Scripts / jquery-2.0.0.min.js>< / script> 
 <！ - 可能希望在使用CDN进行部署之前替换上述内容：
< script src =// ajax.googleapis.com/ajax/libs/jquery/2.0.0 /jquery.min.js\"></script> 
 OR：< script type =text / javascriptsrc =http://code.jquery.com/jquery-latest.min.js>< / script> 
 ..以及类似的jquery-ui  - > 
< script src =〜/ Scripts / jquery-ui-1.9.2.min.js>< / script> 
< script type =text / javascriptsrc =/ 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>夏季< / a>< / li> 
< li>< a href =＃tab-3> Fall< / a>< / li> 
< li>< a href =＃tabs-4>冬季< / a>< / li> 
< / ul> 
< div id =tabs-1> 
  < / 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>

另外，我在东北角没有看到关闭按钮 - 也许是因为大形象，占据了所有顶级空间，没有留下空间可见。

更新3



现在我发现我在_SiteLayout.cshtml中引用的.css和.js文件应该位于/ fancybox / source中。

现在我有，即：

 < link rel =stylesheethref =/ fancybox / source / jquery.fancybox .css？v = 2.1.4type =text / cssmedia =screen/> 
< script type =text / javascriptsrc =/ fancybox / source / jquery.fancybox.pack.js？v = 2.1.4>< / script>

... 应该是：

 < link rel =stylesheethref =〜/ Content / jquery.fancybox.csstype =text / cssmedia =屏幕/> 
< script type =text / javascriptsrc =〜/ Scripts / jquery.fancybox.js>< / script>

...因为我已将这些文件复制到这些位置。



真的必须是你提及的那种特别的（而且，在我看来，这很奇特）吗？



<因为它似乎基于我得到的CSS和js根本找不到，我很惊讶它甚至可以和它一样工作...

jquery-1.7.2 或更低版本，并且您也不需要<$> c $ c> jquery-ui-1.9.2.min.js 以使灯箱工作。



对于此版本的灯箱要工作，您需要 lightbox.css ， jquery-1.7.2.js 和灯箱.js 。



下面显示的是一个类似于Lightbox工作的示例代码。 （将此代码粘贴到文本编辑器中，将其保存为HTML页面并使用Web浏览器打开它）

 < html> ; 
< head> 
 <！ -  
 ****你需要做的事情**** 
 1.指定LIGHTBOX CSS文件
 2.指定JQUERY JS（jquery-1.7。 2）文件
 3.指定LIGHTBOX JS文件
  - > 
 
< link rel =stylesheethref =http://lokeshdhakar.com/projects/lightbox2/css/lightbox.csstype =text / cssmedia =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>夏季< / a>< / li> 
< li>< a href =＃tab-3> Fall< / a>< / li> 
< li>< a href =＃tabs-4>冬季< / a>< / li> 
< / ul> 
< div id =tabs-1> 
< a href =http://pages.swcp.com/~jamii/OtherCats/coco.jpg =lightbox> 
< img src =http://pages.swcp.com/~jamii/OtherCats/coco.jpgwidth =300height =200> 
< / a> 
< / div> 
< / div> 
< / body> 
< / html>

您可以使用fancybox而不是lightbox，它使用最新的jQuery版本。 Fancybox的最新版本为 ，您可以从本网站下载 - http://fancyapps.com/fancybox/



实现Fancybox 2的代码 

 < html> 
< head> 
 <！ - 添加jquery库 - > 
< script src =http://code.jquery.com/jquery-1.9.1.min.js>< / script> 
 
<！ - 添加fancyBox主JS和CSS文件 - > 
< script type =text / javascriptsrc =http://fancyapps.com/fancybox/source/jquery.fancybox.pack.js>< / script> 
< link rel =stylesheettype =text / csshref =http://fancyapps.com/fancybox/source/jquery.fancybox.cssmedia =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>夏季< / a>< / li> 
< li>< a href =＃tab-3> Fall< / a>< / li> 
< li>< a href =＃tabs-4>冬季< / a>< / li> 
< / ul> 
< div id =tabs-1> 
< a class =fancyboxhref =http://pages.swcp.com/~jamii/OtherCats/coco.jpg =lightbox> <！ - 添加班级fancybox - > 
< img src =http://pages.swcp.com/~jamii/OtherCats/coco.jpgwidth =300height =200> 
< / a> 
< / div> 
< / div> 
< / body> 
< / html>

更新＃1



您需要源文件夹中的所有文件来实现fancybox（助手文件夹是可选的）。你需要保持fancybox的CSS，JS和图像在一个位置。您可以将源文件夹复制到您的Web应用程序目录中，并将其重命名为 fancybox 。然后你可以从你的html页面调用css文件，js文件。
例如： 

 < link rel =stylesheethref =../ fancybox / jquery.fancybox。 csstype =text / cssmedia =screen/> 
< script type =text / javascriptsrc =../ fancybox / jquery.fancybox.pack.js>< / script>


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.

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.

I also added to my Images folder the following images included in the lightbox download: close.png, loading.gif, next.png, and prev.png.

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>

...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.

The lightbox download also includes jquery-1.7.2.min.js and jquery-ui-1.8.18.custom.min.js

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>

Could this be the problem? Am I "stuck" using older versions of jQuery and jQueryUI if I want to use lightbox?

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...???)

UPDATE

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.

UPDATE 2

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):

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="//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>

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>

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.

UPDATE 3

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>

...what should work would be:

<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?

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...

解决方案

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.

For this version of lightbox to work, you need lightbox.css, jquery-1.7.2.js and lightbox.js.

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" 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>

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/

Code for implementing 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>

UPDATE #1

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插件不适合我？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆