最近立ち上げたウェブサイトの fancybox 2 に問題があります。
ページのリンクを使用して、ガレリア (galleria.io) ギャラリーと PDF ファイルをファンシーボックス ライトボックスで開きます。写真ギャラリー (galleria) の場合、fancybox iframe に別の Web ページをロードし、明示的なサムネイル画像を定義しているため、すべてのフルサイズの写真をすぐにロードする必要はありません。PDF コンテンツの場合、PDF ファイルを iframe に直接ロードします。
ただし、多くの場合、リンクが最初にクリックされたときに iframe が表示されません (永続的な読み込みアニメーション)。ファンシーボックスを閉じて、リンクをもう一度クリックすると、コンテンツが正常に読み込まれます。これは、ガレリアと PDF コンテンツの両方で発生します。
主にFFでサイトを開発およびテストしましたが、IEでも問題が発生するようです。
答えを求めてインターウェブを精査した後、私が見つけた最も近い質問はstackoverflowで次のとおりです。
/questions/4710023/jquery-fancybox-working-but-only-when-you-click-this-image-twice
（ここに投稿されたソリューションのように用語を交換しようとしましたが、iframe内で404になります）
/questions/9779250/fancybox-2-requires-two-click
(情報不足)
/questions/14819642/fancybox-stuck-loading-iframe-in-ie
（IEについて言及していますが、プリロードを無効にすることは有望に思えます。私はそれを試してみようとしています）
私はホーム ビルダーであり、コード ビルダーではありません。そのため、サイトを構築する過程で何か間違ったことをしたと確信しています。提供された助けに感謝します！ありがとう！
例へのリンク:
(開発中) ギャラリーページ: http://www.sonahomes.com/gallery/
(ライブ) メイン ページ : http://www.sonahomes.com [メイン ページのフッターの上には、PDF とフォト ギャラリーへのリンクを含む「注目のリスト」があります。右端のリストには、19 のギャラリーが読み込まれます。写真]
コード：
PDF を iframe で開くためのリンク:
<a href="...pdf file..." class="various">
<p><img src="...icon..." class="icon" />PDF Flyer</p>
</a>
iframe でガレリア ギャラリーを開くためのリンク:
<a href="...link to page with galleria..." class="various">
<img src="...small image..." class="thumb1" />
<div>
<p><img src="...icon..." class="icon" />19 Photos</p>
</a>
</div>
(上記のガレリア リンクの追加の div が正確ではないことはわかっていますが、上記のリンク先のギャラリー ページでも同じ問題が発生するため、問題に関連しているとは思いません。テキスト リンクのみがあります)
ファンシーボックスを使用してページを初期化します。
<body>
<script type="text/javascript">
$(document).ready(function() {
$(".various").fancybox({
autodimensions : false,
autoSize : false,
fitToView : false,
type : 'iframe',
});
});
</script>