jquery lightbox 0.5给出隐藏链接的错误。怎么解决?

时间:2011-05-02 06:27:34

标签: jquery lightbox

我正在使用jquery-lightbox-0.5 http://leandrovieira.com/projects/jquery/lightbox/ 像这样打电话

$('.zoomLightbox a').lightBox();

HTML

<p class="zoomLightbox">
<a rel="lightbox" class="zoomPhoto" title="abc" href="images/products/lightbox-zoom-placeholder.gif">View larger photo</a>
<a style="display: none;" rel="lightbox" class="zoomPhoto hide" title="abc" href="images/products/lightbox-zoom-placeholder.gif">View larger photo</a>
...
</p>

除了隐藏第一个链接休息。现在的问题是,当移动到第二个img然后回到第一个prev链接仍处于活动状态并点击prev链接时会发出此错误。

settings.imageArray[settings.activeImage] is undefined
[Break On This Error] objImagePreloader.src = settings.imageArray[settings.activeImage][0];

我被困在这里任何帮助赞赏。

只有在fixedNavigation:true

时才会出现这种情况

3 个答案:

答案 0 :(得分:1)

我认为你应该修改插件

转到第194行

objImagePreloader.src = settings.imageArray[settings.activeImage][0] 

更改为

if (settings.imageArray[settings.activeImage]) {
                objImagePreloader.src = settings.imageArray[settings.activeImage][0];
            }
            else {
                _finish();
                return false;
            }

希望这有帮助!

答案 1 :(得分:0)

请参阅此post,并阅读末尾部分添加的评论。

:: UPDATE :: 老兄,我已经根据你给出的示例代码实现了这个例子,并且我的工作正常......

Html代码:

<%@page contentType="text/html" pageEncoding="UTF-8"%>

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">

    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <title>JSP Page</title>
            <script type="text/javascript" src="jquery-1.5.2.js"></script>
            <script type="text/javascript" src="jquery.lightbox-0.5.js"></script>
            <link rel="stylesheet" type="text/css" href="jquery.lightbox-0.5.css" media="screen" />
            <script type="text/javascript">
                $(document).ready(function() {
                    $('.zoomLightbox a').lightBox();
                });
            </script>
        </head>
        <body>
            <p class="zoomLightbox">
                <a rel="lightbox" class="zoomPhoto" title="abc" href="img_1.png">View larger photo</a>
                <a style="display: none;" rel="lightbox" class="zoomPhoto hide" title="abc" href="img_2.png">View larger photo</a>
            </p>
        </body>
    </html>

以下是项目结构:

enter image description here

只需用上面的代码交叉检查你的代码,并确保你有正确的js和css文件包含......

答案 2 :(得分:0)

我认为你遗漏了<img />个标签。根据插件文档,您的标记应如下所示:

<p class="zoomLightbox">
<a rel="lightbox" class="zoomPhoto">
  <img title="abc" src="images/products/lightbox-zoom-placeholder.gif" />
  View larger photo
</a>
<a style="display: none;" rel="lightbox" class="zoomPhoto hide" >
  <img title="abc" src="images/products/lightbox-zoom-placeholder.gif" />
  View larger photo
</a>
...
</p>

编辑:我意识到<img>对插件不是强制性的。请稍等,因为我更新了这个答案。