0

ファンシーボックスを開こうとしていますが、ファンシーボックスが2回目に開かないという問題を除いて、すべてが整っています。

初めて完全に正常に開かれますが、2回目に開こうとすると開かれません。ここに私が持っているコードがあります

jQuery(document).ready(function() {

jQuery("#destination_Weather").fancybox({
    'titlePosition'     : 'inside',
    'autoScale'          :true,
    'autoDimensions'    : true,  
    'width'             : 600,
    'height'            : 'auto',
    'transitionIn'      : 'none',
    'transitionOut'     : 'none'
   });
});
<div style="display: none">
    <div id="destinationWeather">
        <?php  if(!empty($lat_long_cordinates))  {
             echo displayDestinationWeather('',$lat_long_cordinates);
          } ?>
     </div>
   // one more div used for another fancybox content
</div>

<a href="#destinationWeather" id="destination_Weather">link </a>

なぜこれが起こっているのかわかりませんが、リンクを2回クリックすると、ページ全体が新しいものからリロードされます。これは、ファンシーボックスの実装の問題か、PHP の間違った実装の問題かはわかりません。

もう 1 つ気付きました。初めてポップアップを閉じると、destinationWeatherdiv のすべてのデータが失われ、そこにこの情報しか表示されません。

<div class="fancybox-inline-tmp" style="display: none;"></div>

なぜこれが起こっているのか分かりませんか？

重要: fancybox v1.3.4 は jQuery v1.9+ では動作しないことに注意してください。

4

4 に答える 4

4

fancybox v1.3.4を使用しているため、これを行う必要があります

1)。ターゲットのインラインは、次のようなdivエクストラでラップする必要があります。div

<div style="display: none">
    <div id="destinationWeather">
        <?php  if(!empty($lat_long_cordinates))  {
            echo displayDestinationWeather('',$lat_long_cordinates);
        } ?>
    </div>
</div>

ターゲットdiv( #destinationWeather) にはdisplay:noneプロパティがなく、親ラッパーdiv(上記のコードに追加されています) があることに注意してください。

2)。inlinev1.3.4 にはコンテンツに関する既知のバグ(ここに記載) があるため、コードに回避策を適用する必要があります。

jQuery(document).ready(function () {
    jQuery("#destination_Weather").fancybox({
        'titlePosition': 'inside',
        'autoScale': true,
        'autoDimensions': true,
        'width': 600,
        'height': 'auto',
        'transitionIn': 'none',
        'transitionOut': 'none',
        // fix inline bug
        'onCleanup': function () {
            var myContent = this.href;
            $(myContent).unwrap();
        }
    });
});

JSFIDDLEを参照してください

重要: fancybox v1.3.4 は jQuery v1.9+ では動作しないことにも注意してください。詳細な参照と回避策については、この投稿を参照してください。

于 2013-09-07T09:16:14.277 に答える
0

fancybox-1.3.4 に関連するこの問題を修正する方法が 1 つあります。fancybox 'onClosed' イベントを使用して、元の div コンテンツ HTML を同じ fancybox div 要素に再割り当てします。そのため、fancybox が閉じられると、div (html) の元のコンテンツがそれ自体に再割り当てされます。

$(document).ready(function () {

        fancyMain = $("#fancyMain").html(); //here fancyMain is the div element which is set with display:none

        $("#fancyLinkId").fancybox({
            'hideOnContentClick': false,
            'autoScale': false,
            'autoSize': true,

            'onClosed': function () {
                $('#fancyMain').html(fancyMain);

        }
});

FancyMain は、スタイルが display:none のメイン div です。これは、実際のファンシー ボックス コンテンツが id fancydata で格納される内部 div です。 // ファンシー ボックス内のコンテンツがここに配置されます。

//その後、アンカー リンクは内部 div a fancyLinkId href #fancydata に関連付けられます

これは機能します

于 2014-04-08T17:29:32.873 に答える
0

これがこの質問の将来の見解に役立つ場合、プラグインがv1.3.4 FancyboxをロードしているWordpressでこれを機能させるために何年も費やしました。

回避策であまり運がなかった後 (少なくともプラグインの設定が機能しているという意味ではありません)、v1.3.6 Fancybox には上記のバグが含まれておらず、最も迅速で便利なソリューションであることがわかりました。自分。

于 2014-01-07T15:57:50.790 に答える