5

我正在尝试使用fancyBox，我想知道为什么当我关闭fancyBox 窗口时，我的元素会显示为“display:none;” 风格。有什么办法可以避免这种情况吗？

我的 html 文件包括：

<script type="text/javascript" src="../js/jquery.fancybox.pack.js"></script>
<link rel="stylesheet" href="../css/jquery.fancybox.css" type="text/css" media="screen" />

目标元素是这样的：

<div id="cadre" class="planche"><a id="inline" href="#photo"><img src="../img/new/img/1_ADELE_HAENEL_Actress-H.jpg" alt="ADELE HAENEL" id="photo"></a></div>

我的 Fancybox js 是：

$(document).ready(function() {

    /* This is basic - uses default settings */

    $("a#single_image").fancybox();

    /* Using custom settings */

    $("a#inline").fancybox({
        'hideOnContentClick': false
    });

    /* Apply fancybox to multiple items */

    $("a.group").fancybox({
        'transitionIn'  :   'elastic',
        'transitionOut' :   'elastic',
        'speedIn'       :   600, 
        'speedOut'      :   200, 
        'overlayShow'   :   false
    });

});
4

4 回答 4

14

我遇到了同样的问题，解决方案是用有效的 href 填充 a 元素的 href 属性

于 2013-10-23T06:04:53.523 回答
6

将有效的href标记添加到a元素。下面是一个简单的例子。我遇到了同样的问题并解决了这个问题。

<a class="fancybox" href="http://fancyapps.com/fancybox/demo/1_b.jpg"><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt=""/></a>

然后调用fancybox。

$(".fancybox").fancybox({});

JsFiddle 演示示例

http://jsfiddle.net/FM82s/

于 2015-07-15T07:31:50.477 回答
2

首先要检查几件事。您应该针对<A>标签而不是图像调用 .fancybox() ：

您的 HTML 格式应为：

<a href="image-url" class="fancybox" ...>
   <img src="image-url" />
</a>

你的jQ：

$('.fancybox').fancybox()

其次，如果您的 URL 不包含已知的图像扩展名或data:image字符串，那么“isImage”调用将失败并且不会打开花式框（很可能只是退回到标准行为）。

isImage 函数，供您参考（2.1.5）：

isImage: function (str) {
    return isString(str) && str.match(/(^data:image\/.*,)|(\.(jp(e|g|eg)|gif|png|bmp|webp|svg)((\?|#).*)?$)/i);
},
于 2016-02-23T14:05:21.123 回答
0

有同样的问题。

解决方案是为标签使用另一个类名，然后是标签。搜索了数周...：/

于 2015-04-04T19:07:09.910 回答