2

最新のファンシーボックスのセットアップに苦労しています。メインページで開くためにiframeからfancyboxを呼び出すことができましたが、コンテンツが見つからないようです。

だから、私は次の設定をしています：

main-page: iframe を開き、fancybox に画像を表示するための JavaScript 関数が含まれています。テスト目的で、まだ引数を指定して関数を呼び出さず、機能するまでハードコードされたイメージを使用します。したがって、JavaScript 関数は次のようになります。

$jj = jQuery.noConflict();
function triggerFancybox(){
$jj(".triggerid").trigger("click");
alert("Fancybox triggered!");}
function callMe(){
$jj(".triggerid").fancybox('images/showroom/playground/displaced/dispm_6.jpg' , {'type' : 'image'});
triggerFancybox();}
function callMe1(){
$jj(".triggerid").fancybox('http://demo.artonbit.com/images/showroom/playground/displaced/dispm_6.jpg' , {'type' : 'image'});
triggerFancybox();}
function callMe2(){
$jj(".triggerid").fancybox('http://demo.artonbit.com/images/showroom/playground/displaced/dispm_6.jpg');
triggerFancybox();}

メインページには、fancybox コンテンツを開くために使用するダミー要素も含まれています。

<a href="#" class="triggerid"></a>      <!-- This id can be called by an iframe for the fancybox>

iframe: 現在、iframe には onclick トリガーのみが含まれています。最新の試みは次のとおりです。

<p><a class="fancyframe" rel="group" href="images/showroom/playground/displaced/dispm_6.jpg" onclick="parent.callMe();return false;"><img style="float: left;" alt="PXM Commercial Shot1" src="images/showroom/playground/displaced/dispm_6.jpg" height="135" width="240" /> </a>
</p>
<p><a class="fancyframe" rel="group" href="images/showroom/playground/displaced/Disp_7b1.jpg" onclick="parent.callMe1();return false;"><img style="float: left;" alt="PXM Commercial Shot1" src="images/showroom/playground/displaced/dispm_6.jpg" height="135" width="240" /> </a>
</p>
<p><a class="fancyframe" rel="group" href="images/showroom/playground/displaced/dispm_9.jpg" onclick="parent.callMe2();return false;"><img style="float: left;" alt="PXM Commercial Shot1" src="images/showroom/playground/displaced/dispm_6.jpg" height="135" width="240" /> </a>
</p>
<p><a href="#" onclick="parent.callMe();return false;">Another Test</a>

そのため、fancybox がトリガーされますが、コンテンツが見つかりません。fancybox を呼び出すさまざまな方法を試しましたが、常にタイトルのエラー メッセージが表示されます。

画像参照は正しいです。必要なすべてのライブラリを含める必要があります。ID をターゲットとしてこれをテストしましたが、現在はクラスを使用しています (Fancybox FAQ で提案されているように)。

何が恋しいですか？

私は最初に古い fancybox 1.3.4 でこれを実装しましたが、うまくいきました。

問題の実行中のデモは、次のアドレスにあります: http://demo.artonbit.com

トップページに移動したら、一番左上のタイル (Displaced!) をクリックするだけで、テキストと 3 つのサムネイルを含む iframe が開きます。これらは、fancybox のトリガーです。「callMe」メソッドの呼び出しに成功しましたが、fancybox はコンテンツを見つけることができませんでした。

4

1 に答える 1

0

私が最初にチェックしたのは、サイトとロードしたスクリプトでした。したがって、2つの異なるバージョンと名前空間で複雑になるのではなく、jQueryのインスタンスが1つだけ必要だと思います。

今あなたのコードは、あなたがどちらかのために適切なフォーマットを持っていません：

1）fancyboxを次のようなセレクター（たとえばクラス）にバインドします。 

$(".selector").fancybox({
  // API options
});

2）fancyboxを手動で呼び出す 

$.fancybox([
  href: 'images/showroom/playground/displaced/dispm_6.jpg'
],{
  // API options
  type: "image"
});

... だがしかし ： 

$(".triggerid").fancybox('images/showroom/playground/displaced/dispm_6.jpg', { 
   // API options
   'type' : 'image'
});

...これは上記の2つの組み合わせです。

特定のケースでは、関数内でfancyboxスクリプトを次のような適切な形式に変更する必要があります。 

function callMe(){
  $(".triggerid").fancybox({
      href: 'http://demo.artonbit.com/images/showroom/playground/displaced/dispm_6.jpg'
  });
  triggerFancybox();
}

...または名前空間を使用する$jj

注：にhrefは画像拡張子があるため、実際に指定する必要はありませんtype: "image"

見ることは信じている... JSFIDDLE

于 2012-12-12T02:11:09.770 に答える