0

少し問題があります。通常の画像が表示される youtube-videos を埋め込むギャラリーを作成する必要があります。画像とビデオの間で矢印を機能させるには、iframe Modus を使用する必要があります。だから私はこれで終わった：

<a href="url_of_embed_yt_vid" class="fancygal" rel="group"><img src="preview_for_vid"></a>
<a class="fancygal" rel="group" href="link_to_image"><img src="myimage"></a>


$('.fancygal').fancybox({
        'type'  : 'iframe',
        'scrolling' : 'no',
        'fitToView': true,
        'iframe' : {
                    'scrolling' : 'no',
                    'preload'   : false
                }                  
});

それは完全に機能しますが、モバイルデバイスでは画像がファンシーボックスに収まるように縮小されません (ファンシーボックスは適切なサイズです)。ラップトップ/デスクトップ デバイスでブラウザを縮小すると、画像は正しく縮小されます。

誰にも考えがありますか、何が問題なのですか？

ありがとうソニック

4

1 に答える 1

1

画像はiframeモードを使用する必要はなく、YouTube ビデオのみを使用する必要があるため、このスクリプトは両方で機能するはずです。

$(".fancygal").fancybox({
    // 'type'  : 'iframe', //no needed
    scrolling: 'no',
    fitToView: true,
    iframe: {
        scrolling: 'no',
        preload: false
    }
});

次に、クラスfancygalをすべてのリンクに設定し、特別なクラスfancybox.iframeを次のような YouTube ビデオ リンクのみに設定します。

<a class="fancygal fancybox.iframe" rel="group" href="{link to youtube 1}">youtube one</a>
<a class="fancygal fancybox.iframe" rel="group" href="{link to youtube 2}">youtube two</a>
<a class="fancygal" rel="group" href="{link to image 1}">image one</a>
<a class="fancygal" rel="group" href="{link to image 3}">image two</a>
... etc.

JSFIDDLEを参照してください

于 2013-08-20T23:57:24.457 に答える