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

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({});

JsFiddle のデモ例

http://jsfiddle.net/FM82s/

于 2015-07-15T07:31:50.477 に答える
2

A few things to check first. You should be calling the .fancybox() against the <A> tag, not the image:

Your HTML should be formatted as:

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

Your jQ:

$('.fancybox').fancybox()

Secondly, if your URL does not contain a known image extension or data:image string, it will fail the "isImage" call and will not open a fancybox (most likely just fallback to standard behaviour).

isImage function, for your reference (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 に答える