1

私が構築している Web サイト http://www.nomadicdrift.com/test/kaniwa#eventsで、fancybox に対応する画像を表示するのに問題があります。これは、WordPress プラットフォームで設定したカスタム 1 ページ ポートフォリオ テーマです。

イベント セクションへのリンクをたどると、ギャラリーのような位置に 1 つのフィギュア アイテムが表示されます。この画像をfancyboxギャラリーとして機能するように設定しましたが、クリックするとfancyboxインターフェイスが開きますが、画像がフレームに配置されますが、フレームに配置されません. これが問題です...画像がfancyboxに表示されず、代わりにフレームだけが表示されます。

ここに私が表示しているhtmlがあります：

<figure>
<a class="fancybox" data-fancybox-type="Fashion Show de Paris, France" href="http://www.nomadicdrift.com/test/kaniwa/wp-content/uploads/2012/07/NM2.jpg">
<img class="attachment-evento wp-post-image" width="231" height="191" title="NM" alt="NM" src="http://www.nomadicdrift.com/test/kaniwa/wp-content/uploads/2012/07/NM2-231x191.jpg">
</a>
<figcaption>
<a class="fancybox" data-fancybox-type="Fashion Show de Paris, France" href="http://www.nomadicdrift.com/test/kaniwa/wp-content/uploads/2012/07/CEDESAN.jpg">   </a>
<h4>Fashion Show de Paris, France</h4>
</figcaption>
</figure>

問題は別の場所にあると思うので、その出力を取得するために使用した PHP について退屈させるつもりはありません。

***サイトにシンプルな標準的なファンシーボックス ギャラリーも設定しようとしましたが、同じ問題が発生し、問題は html マークアップよりも深いと思われます。この同じマークアップを、別のサイトの 1 つのサムネイル ファンシーボックス ギャラリーにも使用しました。

私が使用している .js ファイルの競合が原因ではないかと思いました。すべてのプラグイン/アドオン (それほど多くはありません) を 1 つずつアンインストールしようとしましたが、それでも同じ結果が得られました。私は個人用の JavaScript をすべて functions.js ファイルに入れています。ここで、標準の .js を使用して fancybox プラグインを呼び出します$("a.fancybox").fancybox();。

以前にこのプラグインを他のサイトにインストールし、回答を広範囲に検索したので、どんな助けも大歓迎です.

ありがとう、ショーン

4

3 に答える 3

0

やってみませんか

<figure>
   <a class="fancybox" data-fancybox-type="Fashion Show de Paris, France" href="http://www.nomadicdrift.com/test/kaniwa/wp-content/uploads/2012/07/NM2.jpg">
      <img class="attachment-evento wp-post-image" width="231" height="191" title="NM" alt="NM" src="http://www.nomadicdrift.com/test/kaniwa/wp-content/uploads/2012/07/NM2-231x191.jpg">
   </a>
   <figcaption>
      <h4>Fashion Show de Paris, France</h4>
   </figcaption>
</figure>

1つだけ残す必要があります<a class="fancybox"/>

于 2012-09-27T02:39:52.023 に答える
0

孤立したものを削除します。

<a class="fancybox" data-fancybox-type="Fashion Show de Paris, France" href="http://www.nomadicdrift.com/test/kaniwa/wp-content/uploads/2012/07/CEDESAN.jpg">   </a>
于 2012-09-27T02:43:35.127 に答える
0

さて、あなたのコードはファンシーボックスに対して意味的に正しいように見えるかもしれませんが、そうではありません。あなたが抱えている問題は、fancyboxがdata-fancybox-type属性を使用して、type開く必要があるコンテンツを決定することです（あなたの場合は画像ギャラリーです）しかし、「ファッションショー・ド・パリ、フランス」はfancyboxに何も言わないので、typeコンテンツは不明ですまたは未定義のため、空のボックスです。

その属性の有効なオプションは、、、、またはのいずれかimageです。iframeajaxhtmlinline

を使用するつもりだったのかもしれませんdata-fancybox-group="gallery_name_here"。詳細については、 https://stackoverflow.com/a/9037826/1055987を確認してください。

data-fancybox-type(fancybox 用に予約されている) 属性を削除してみてください。または、次のような名前に変更してください。

data-description="Fashion Show de Paris, France"

...自分で使用するため、fancyboxと競合しません。

ところで、もう 1 つの問題は、あなたz-indexのヘッダー ( ) がファンシーボックス(デフォルトでは約 8010 #header) よりも高い (9998)ことです。その後ろ。z-indexz-index#header

Saludos a la tierra del buen cafe.

于 2012-09-27T07:26:17.237 に答える