14

ビデオ ポップアップのタイトル/キャプションを表示する必要があります。画像タイプにはこのオプションがありますが、ビデオ/iframe にはありません。

ドキュメント ( http://dimsemenov.com/plugins/magnific-popup/documentation.html#iframe_type ) でテンプレート マークアップの例を見つけましたが、タイトルを表示する方法がわかりません。

次のようなリンクからポップアップウィンドウにタイトルを表示するようにiframeマークアップをセットアップするのを手伝ってくれませんか

<a class="popup" title="This is caption" href="http://vimeo.com/41128754"></a>

JS コード

    $('a.popup').magnificPopup({
        disableOn: 700,
        type: 'iframe',
        mainClass: 'mfp-fade',
        removalDelay: 160,
        preloader: false,
        fixedContentPos: true,
        titleSrc: 'title'

    });

ありがとうございました。

4

2 に答える 2

20

少し遅れていますが、答えを探している他の人にとっては役立つかもしれません。

「titleSrc」属性は type: image にのみ適用され、iframe では機能しません。Magnific Popup の開発者は、ここで iframe ポップアップにタイトルを追加する方法の例を持っています: http://codepen.io/dimsemenov/pen/zjtbr

これはJSです：

$('.popup').magnificPopup({
  type: 'iframe',
  iframe: {
     markup: '<div class="mfp-iframe-scaler">'+
                '<div class="mfp-close"></div>'+
                '<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+
                '<div class="mfp-title">Some caption</div>'+
              '</div>'
  },
  callbacks: {
    markupParse: function(template, values, item) {
     values.title = item.el.attr('title');
    }
  },
  // your other settings
});

タイトルを表示するには、次の CSS を含める必要があります。

.mfp-title {
  position:absolute;
  /* other formatting */
}

これが何をしているのか：

  • markupクラスmfp-titleを持つ新しい div をフレーム ラッパーに追加しています。これは、キャプションの表示に使用されます。
  • コールバックは、リンクがある場合はリンクから title 属性を取得し、markupParseそれを新しい div に追加します。
  • これにより、.mfp-title div が含まれている場所に関係なく、ビデオの下部にタイトルが追加されます。これは、絶対配置を使用するためです。CSS を使用して上部に配置するtop: -20px; left:0;必要があります (iframe の上に移動するには、上部に負の値が必要です)。

.

開発者は、ドキュメントに記載されていないことを行う方法を探している人に役立つサンプルのコレクションをここに用意しています。 http://codepen.io/collection/nLcqo/

于 2014-02-25T18:48:11.340 に答える
0

iFrame では、vimeo 埋め込みコードを使用する必要があります。私のプロジェクトでは、次のものを使用しました。あなたに役立つかもしれません。これに関して質問がある場合は、私に知らせてください。

<iframe height="100" width="100" title="Vimeo Video" class="vimeo" src="http://player.vimeo.com/video/41128754" ></iframe>
于 2013-07-12T10:02:18.917 に答える