0

simpletube jquery プラグインによって生成されたサムネイルに、動的に生成されたリンクを次のように置き換えて添付しました。

for (var i=0; i<intResultsLength; i++) {
if (options['displaytype'] === 'user') {
_objThumbsHolder.append('<div><img src="' + entries[i].thumbnail.sqDefault + '" class="' + entries[i].id + '" /><br /><span class="thumbdescription">'+entries[i].title+'</span></div>');
if (options['defaultvideo'] === entries[i].id) {
intDefault = i;
}

と：

for (var i=0; i<intResultsLength; i++) {
if (options['displaytype'] === 'user') {
_objThumbsHolder.append('<div id="my_id_name"><a class="youtube" href="http://www.youtube.com/embed/' + entries[i].id + '?rel=0&autohide=1&showinfo=0&autoplay=0&iv_load_policy=3&wmode=transparent"><img src="' + entries[i].thumbnail.hqDefault + '" class="' + entries[i].id + '" /></a><br /><span class="thumbdescription">'+entries[i].title+'</span></div>');
if (options['defaultvideo'] === entries[i].id) {
intDefault = i;
}

jquery.simpletube.js の 64 行目。+ entries[i].id +クラスをサムネイルに適用するために使用された変数（およびビデオID）を取得して、リンクに再度使用することで これを達成しました。

私はまた、次の微調整を行いました

  • サムネイルをラップする div の名前 (スタイリング用)
  • サムネイルの周りに href リンクをラップします (リンクになります)
  • カラーボックスで開くサイト上の他のリンクと同じプロパティを持つように、href リンクにいくつかのコードを追加しました。（ポップアップで開くように）
  • 実際のビデオ プレーヤー インスタンスを削除しました (ビデオはポップアップ カラーボックスで再生されているため、必要ありません)。

リンクをクリックしたときにカラーボックスでこのエラーが発生することを除いて、すべてが機能しています：

「このコンテンツを読み込めませんでした。」

私はfirebugで要素をチェックしましたが、リンクのコードの唯一の違いは、サムネイルリンクには「youtube」のクラスがあるのに対し、他のリンクには自動的に「cboxElement」がクラスに追加され、クラスが「youtube」になることですcboxElement'. サムネイルリンククラスを手動で「youtube cboxElement」に変更すると、カラーボックスがポップアップしますが、「読み込みに失敗しました」というメッセージが表示されます。

リンクが正確であること、およびサムネイル リンクのリンク コードと他のサイト リンクが同じであることを 3 回確認しました。

だから私の唯一のアイデアは...実際には何も持っていないということです-おそらくsimpletubeがリンクのデフォルトアクションを削除していると思いましたが、カラーボックスがポップアップしているため、そうではありません。コンテンツを読み込みます。

firebug エラー コンソールには、エラーや警告は表示されません。

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

ps私が使用しているカラーボックス呼び出しは次のとおりです。

$(".youtube").colorbox({iframe:true, width:"800px"});

アップデート

まだこれに取り組んでいますが、動的に生成された要素にバインドされていないカラーボックスと関係があるかどうか疑問に思っています。

その意味で、私は出くわしました：

動的に作成された要素に jQuery カラーボックス プラグインを追加する

これをドキュメントの body 終了タグの前に追加しました (head 領域では機能しません):

<script>
$(document).ready(function(){
$( '.new_youtube' ).live('click',function(e){
e.preventDefault();
$.colorbox({open:true});
});
});
</script>

そのため、リンクは firebug では次のようになります。

<a class="new_youtube" href="http://www.youtube.com/embed/xx-xxxxxxxx?rel=0&autohide=1&showinfo=0&autoplay=0&iv_load_policy=3&wmode=transparent">

colorbox は起動しますが、アニメーション gif の読み込みでスタックします。

4

1 に答える 1

0

これをヘッドの既存のカラーボックス コード ブロックの下部に追加しました。

$( '.new_youtube' ).live('click',function(e){
e.preventDefault();
$(this).colorbox({open:true, iframe:true, width:"800px", height: "493px", onClosed:function(){
$(".new_youtube").removeClass('cboxElement');
}
});
});

注:イベントのバインドを解除する必要がありました。そうしないと、サムネイルをもう一度クリックすると、ビデオ プレーヤーの 2 つのインスタンスがカラーボックス ポップアップに表示されました。（その方法については、このスレッドに感謝します）。

そして、simpletube リンク コンストラクターは次のようになりました。

<div id="my_id_name"><a class="new_youtube" href="http://www.youtube.com/embed/' + entries[i].id + '?rel=0&autohide=1&showinfo=0&autoplay=0&iv_load_policy=3&wmode=transparent"><img src="' + entries[i].thumbnail.hqDefault + '" class="' + entries[i].id + '" /></a><br /><span class="thumbdescription">'+entries[i].title+'</span></div>
于 2012-11-01T13:31:30.163 に答える