web-dev-qa-db-ja.com

「要求されたコンテンツをロードできません。しばらくしてからもう一度お試しください」を返すFancyBoxリンク付き

Fancyboxを使用して、インラインコンテンツ（新しいページにリンクされた画像を持つdiv）を表示しています。 divと画像はモーダルで正常に表示されますが、画像をクリックして新しいページに移動すると、「要求されたコンテンツを読み込めません。後でもう一度試してください」と表示されます。エラー。

FancyBox javascriptは次のとおりです。

<script type="text/javascript">
    $(document).ready(function() {
        $(".fancybox").fancybox().hover(function() {
            $(this).click();
        });
        $("#fancybox-outer").fancybox().mouseleave( function() {
               $("#fancybox-overlay").click();
         });
    });
</script>

また、次のHTMLクリップに適用されます。

<li class="fancybox-outer">
    <a id="inline" href="#hover-image_0" class="fancybox">
        <img src="http://website.com/file/id:63" style="margin-top: 32px" />
    </a>
    <p><a href="http://website.com/template/view/18">1G2A</a></p>
    <div style="display: none;"><div id="hover-image_0"><a href="http://website.com/template/view/18"><img src="http://website.com/file/id:64/ext:.png" class="img" /></a></div></div>
</li>

<li class="fancybox-outer">
    <a id="inline" href="#hover-image_1" class="fancybox">
        <img src="http://website.com/file/id:60" style="margin-top: 32px" />
    </a>
    <p><a href="http://website.com/template/view/17">17</a></p>
    <div style="display: none;"><div id="hover-image_1"><a href="http://website.com/template/view/17"><img src="http://website.com/file/id:61/ext:.png" class="img" /></a></div></div>
</li>

誰が問題の原因であるか、または私が修正する必要があるものを見ていますか？

ありがとう！

Update：1/19/2012-最初の回答と同じテストをサーバーで実行しました（ http://estorkdelivery.com /example/example.html ）そして、同じ応答が返されることがわかりました。それは私のサーバーに何かがあるようです。

私はまだこの問題について助けが必要です。誰にもアイデアはありますか？

ありがとう！

Update：1/28/2012-私はこの問題の解決策を見つけるために取り組んできましたが、時間を使い果たしてしまいました完全に異なるソリューションを使用します。他の誰かが同じエラーに出くわしたり、最終的に解決策を見つけた場合に備えて、この問題を未解決のままにしています。ありがとう！

javascriptjqueryfancybox
27
Yazmin

あなたのアプローチには多くの問題があります：

Firstは、fancyboxがバインドされたセレクタのhref属性からコンテンツを取得するため、リンクが

<a class="fancybox" href="{target}" ...

動作するには、次のスクリプトを介してfancyboxにバインドする必要があります

$('.fancybox').fancybox();

かなり明らかですが、あなたのアプローチでは、開かれたファンシーボックス内のリンク（たとえばyahooをターゲットとする）はファンシーボックス自体にバインドされていません。 Fancyboxを再度起動しようとしますが、今回はコンテンツの内容が示されていないため、エラー「要求されたコンテンツをロードできません。後で再試行してください」。言い換えると、リンク（インラインコンテンツ内）<a href="http://yahoo.com" ...はfancyboxにバインドされていません。

Fancybox内のリンクが（fancyboxにバインドされずに）コンテンツを動的に動作およびロードできる唯一の方法は、現在のコンテンツが外部htmlドキュメントであり、fancybox typeがiframeに設定されている場合ですあなたの場合ではありません）

Second、画像を開いたので、fancyboxはデフォルトでtypeをimageに設定しましたが、同じボックスに異なるタイプのコンテンツ（たとえばyahoo）。typeをiframeに設定し、widthやheightなどの他のオプションを設定する必要があります。

Third、インラインコンテンツを使用しているため、v1.3.xの既存のバグと、それ以上の問題を回避するための回避策に注意してください- ここで詳細を確認できます

最後の、私はここで講義しているだけではなく、あなたの問題で何が起こっているのかの説明に似ています...しかし、良いニュースは必要な方法で機能させるために、さらに数行のコードを追加する必要があります。

1：2度目に（既存のコンテンツに加えて）開くコンテンツの種類ごとにfancyboxスクリプトを作成する必要があるため、この例では、fancybox内の画像をクリックして、yahooを開く必要があります...このスクリプトを作成する

$('.fancyframe').fancybox({
 'type':'iframe',
 'width': 600, //or whatever you want
 'height': 300
});

2：非表示のインラインコンテンツ内で、そのクラスをリンクに設定するため、次のコードは：

<div style="display: none;">
 <div id="hover-image_0">
  <a href="http://www.yahoo.com"><img src="1_b.jpg" class="img" /></a>
 </div>
</div>

今のように見えるはずです

<div style="display: none;">
 <div id="hover-image_0">
  <a class="fancyframe" href="http://www.yahoo.com"><img src="1_b.jpg" class="img" /></a>
 </div>
</div>

非表示のインラインコンテンツごとに同じ操作を行います。 fancyboxで別のタイプのコンテンツを開きたい場合は、それに応じてスクリプトを作成してください。あなたのコードの残りは大丈夫です（ホバーでfancyboxを起動する気になりません）

サイドノート：google、yahoo、jqueryなどのサイトはfancyboxで開きません。また、fancyboxが適切に動作するための適切なDOCTYPEがあることを確認してください（サンプルページには何もありません）。 fancyboxのiframeでGoogleをロードできません を参照してください。

27
JFK

少なくとも私にとっては、この問題の原因を突き止めたと思います。

この問題は、ポップアップクラスと同じ要素の1つにクラスがある場合に発生するようです。

例えば：

_<a class="popup" href="#">Open the popup</a>
_

そして、例えば、同じクラス名でポップアップに何かがあります：

_<div class="popup">some text</div>
_

エラーが表示されます。 divクラスを_popup-window_のようなものに変更してみてください-エラーを修正するはずです

あなたの例のページでは、クリックしなくても機能します。クリックすると、どのページに移動することになりますか？次の画像に移動するだけですか？

私の個人的な好みでは、ホバーでのアクティベーションは気にしません。特に、ほとんどの人が本能的に画像をクリックする場合、非常に混乱します。しかし、あなたの場合、それはホバーで開き、その後彼らは本能的にクリックし、その後エラーが発生します。

通常適用される機能を使用しているだけで、同じエラーが発生しますか？

必要に応じて、各画像に次のようなギャラリー名のインスタンスを付けてみてください：_rel="gallery"_と何が起こるかを確認します。次/前の矢印が表示され、期待どおりに動作するはずです。

しかし、正直なところ、ホバー機能を完全に取り除きます。または、少なくともmouseout（）を取り除きます。これはおそらく最も面倒な部分です。

これを使用して、fancyboxアクションを呼び出します。

$("a[rel=gallery]").fancybox();

そうすれば、おそらく問題を引き起こしているすべてのクラスを取り除くことができます。

それがお役に立てば幸いです。

2
Jeremy Miller

私の解決策は：

    <script type="text/javascript">
    jQuery(document).ready(function() {

        $(".fancybox").click(function() {
            $.fancybox({
                'padding'       : 0,
                'autoScale'     : false,
                'transitionIn'  : 'none',
                'titleShow'     : false,
                'showCloseButton': true,
                'titlePosition' : 'inside',
                'transitionOut' : 'none',
                'title'         : '',
                'width'         : 640,
                'height'        : 385,
                'href'          : this.href,
                'type'          : 'iframe',
                'helpers'     : { 
                                'overlay' : {'closeClick': false}
                                }

            });

            return false;
        });
    });
    </script>
1
T.Todua

私もこの問題に出くわしました。

結局のところ、href URLでは大文字と小文字が区別されます。 （可能な場合）

いずれにせよ、href URLをダブル、トリプルでチェックして、正確に大文字と小文字を区別してください。

1
Brett Bumeter

マークアップが同一であっても、一部の画像が表示され、他の画像が表示されない場合は、これを確認してください。

  1. ファイル名とhtmlのすべての文字を小文字にしてみてください。 Fancyboxは大文字と小文字を区別するようです。
  2. イメージに許可されているすべての権限があるかどうかを確認します。私のコンピューターでは、全員の許可が「許可なし」に設定されていたため、モバイルでは写真が適切に機能しないことに気付きました。これを「読み取り専用」に変更しましたが、これは魅力的でした。
1
Lodott1

FancyboxクラスをLI要素に適用しないで、A要素に適用してください。

0
Garrett

上記のアドバイスを受けた後、hrefの「.png」を「.PNG」に変更しました。ファイル名は小文字の拡張子ですが、hrefの大文字の拡張子でのみ機能することに注意してください（ファイル名の残りは同じです）

お役に立てれば。

0
Drew Paul

ローカルマシンでテストを再作成しただけで、問題なく機能します（FancyBoxインストールのデモフォルダーから実行しました）。

<html>
<head>
<title>jQuery Fancybox Test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js" type="text/javascript"></script>
<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="../source/jquery.fancybox.js"></script>
<link rel="stylesheet" type="text/css" href="../source/jquery.fancybox.css" media="screen" />
</head>
<body>
<script type="text/javascript">
    $(document).ready(function () {
        $(".fancybox").fancybox().hover(function () {
            $(this).click();
        });
        $("#fancybox-outer").fancybox().mouseleave(function () {
            $("#fancybox-overlay").click();
        }); 
    }); 
</script>
    <li class="fancybox-outer"><a id="inline" href="#hover-image_0" class="fancybox">
        <img src="1_s.jpg" style="margin-top: 32px" />
    </a>
        <p>
            <a href="http://www.yahoo.com">Go to Yahoo</a></p>
        <div style="display: none;">
            <div id="hover-image_0">
                <a href="http://www.yahoo.com">
                    <img src="1_b.jpg" class="img" />
                </a>
            </div>
        </div>
    </li>
    <li class="fancybox-outer"><a id="inline" href="#hover-image_1" class="fancybox">
        <img src="2_s.jpg" style="margin-top: 32px" />
    </a>
        <p>
            <a href="http://www.google.com">Go to Google</a></p>
        <div style="display: none;">
            <div id="hover-image_1">
                <a href="http://www.google.com">
                    <img src="2_b.jpg" class="img" /></a></div>
        </div>
    </li>
</body>
</html>
0
Orin

私の問題は画像への不適切なパス、例えば

<a data-fancybox="gallery" href="../dist/imgs/nature/n1.png">
<img src="../dist/imgs/nature/n1.png"></a>

画像はローカルで適切にロードされましたが、オンラインではできませんでした。パスを修正することで問題は解決しました。

<a data-fancybox="gallery" href="imgs/nature/n1.png">
<img src="imgs/nature/n1.png"></a>
0
7guyo

私はすべての可能性をチェックしていましたが、@ BrettBumeterが述べたように、EXTRAの大文字と小文字の区別の問題に遭遇しました。実際、これは「大文字と小文字を区別する」ため、画像へのURL（href）パスを* .jpgから* .JPG（またはファイルタイプの拡張子）に変更する必要がありました。これを変更することで問題が解決しました。

0
baron