1

バックグラウンド：

ユーザーがリンクをクリックして FancyBox v2 でレストランのメニューを表示できるページを作成中です。当初はメニューの各ページを個別の画像として使用していましたが、ユーザー テストを通じて、各メニュー ページのサムネイルを削除し、それらを 1 つの縦長の画像 (最後のページの下の各ページ) に連結することにしました。ユーザーは、FancyBox iframe 内でメニュー全体を一度にスクロールできるようになりました。これは、ほとんどのブラウザーで正常に動作し、私がテストしたモバイル デバイスでも動作します。

問題：

Firefox は、iframe に収まるように画像を自動的に縮小します。ユーザーは、小さな拡大カーソルで画像をクリックして画像をフル サイズで表示し、次にメニューを読む必要があります。

JSFIDDLE: http://jsfiddle.net/2ZW9K/6/

調査結果:

ブラウザーのコード インスペクターで見つけたのは、FancyBox がiFrame の内部に、 、、、およびを作成し#document、のようなものを追加すると、Firefox が画像に対して行った縮小が削除されることです。しかし、作成したiFrameのhtmlにこの追加スタイルを挿入する方法について、私は完全に途方に暮れています。FancyBox のソース コード全体を調べ、FancyBox のオプションを使用して HTML/CSS を挿入しようとしましたが、作成された iFrame の内部にアクセスして何かを配置する方法がわかりません。<html><head><body><img><style type="text/css">img{height: auto !important; width: auto !important}</style>afterLoad

質問：

FancyBox ソース コードのどこにこれらのスタイルを挿入できるか、または作成された<head>タグ内に配置する jQuery の行を知っている人はいますか?

4

4 に答える 4

2

提供された jsfiddle では、同一オリジン ポリシーにより iframe コンテンツにアクセスできません。実際、fancybox は画像の src 属性を iframe に設定しました。したがって、同じドメイン (画像と同じ) でテストして、次のような iframe コンテンツにアクセスしてみてください。

afterLoad: function () {
               $('.fancybox-iframe').contents().find('head');
       },

しかし、コンテンツはすでに表示されているため、正しい方法ではないと思います。

画像を独自の html ページに埋め込むことをお勧めします。この方法で、任意のスタイルを適用できます。たとえば、これをテストして、期待される結果かどうかを確認します。

http://jsfiddle.net/5QSnK/show/

これは、例に使用される埋め込み画像ページへのリンクです。

http://jsfiddle.net/Stb6A

于 2013-06-13T15:57:45.347 に答える
1

実際、 を表示するimage場合、 はまったく必要ありませんiframe(そして、コンテンツにアクセスする手間とiframe、すべて同じオリジン ポリシーのもの、スタイル、何とか、何とかなどを保存します)。

このhtml

<a class="fancybox" href="http://muellerpages.com/menu.jpg">
    Click For FancyBox
</a>

このコードのみが必要です:

jQuery(document).ready(function ($) {
    $(".fancybox").fancybox({
        fitToView : false, // so the image will be full sized
        maxWidth : 612, // optional if the image is bigger than this size
        maxHeight: 1004,
        padding: 5,
        helpers: {
            overlay: {
                css: {
                    'background': 'rgba(0,0,0,.85)'
                }
            }
        }
    });
});

JSFIDDLEを参照してください

于 2013-06-13T18:15:46.413 に答える