Tumblrのオリジナルスキンを制作しております。

AutoPagerizeを使用しているのですが、2ページ目以降にJavaScriptが適用されません。
2ページ目以降もJavaScriptを動かすためにはどのようにすればいいでしょうか?
ご教授宜しくお願いします。
なお、使用しているJavaScriptはTumblrのビデオの横幅を500px以上に設定するためのものです。以下参照。
--------------------------------------
<script type="text/javascript">
$(document).ready(function() {
var embedTag;
$('div.video').each(function(index) {
$( this ).contents().each( function ( index ) {
if ($(this).is('object') || $(this).is('embed') || $(this).is('iframe')) {
var orgWidth = $(this).attr('width');
var orgHeight = $(this).attr('height');
var scale = orgHeight/orgWidth;
var targetWidth = 700;
var targetHeight = targetWidth * scale;
$(this).attr('width', targetWidth);
$(this).attr('height', targetHeight);
}
});
});
});
</script>
--------------------------------------

回答の条件
  • 1人10回まで
  • 13歳以上
  • 登録:2013/05/22 10:01:57
  • 終了:2013/05/25 16:57:12

ベストアンサー

id:a-kuma3 No.1

a-kuma3回答回数4537ベストアンサー獲得回数18882013/05/22 10:37:34

ポイント200pt

こちらが参考になると思います。
http://os0x.hatenablog.com/entry/20090829/1251556449

Tumblr 専用で良いのであれば、AutoPagerize の addFilter を使う方法かな?




追記です。

実際に動かしてませんから、自信があまり無いのですが、こんな感じになると思います。

$(document).ready(function() {
    // 質問にあったコードから、$(document)ready で実行する部分を切り出してます
    var change_video_size = function(ctx) {
        // jQuery 関数で、第2引数 (context) を追加してます
        $('div.video', ctx).each(function() {
            $(this).contents().each(function() {
                // 省略
                ...
            });
        });
    };

    // まず、ページ読込が完了したら、一回実行
    change_video_size(document);

    // AutoPagerize のフィルターにも、サイズ変更の関数を登録する
    if (window.AutoPagerize) {
        window.AutoPagerize.addFilter(function(docs) {
            for (var i = 0 ; i < docs.length ; ++i) {
                change_video_size(docs[i]);
            }
        });
    }
});




またまた、追記です。

Tumblr 専用の autopager だってことで、回答のコメントにあったスクリプトを読んでみました。
次ページの処理をした後に、任意の関数を呼ぶような仕組みが無いので、DOMNodeInserted イベントを監視することになると思います。
こんな感じになるのではないかと思います。

$(document).ready(function() {

    var change_video_size = ...

    change_video_size(document);
    // と、ここまでは、前と同じ

    // DOMNodeInserted のイベントを監視する
    if (tumblrAutoPager) {
        tumblrAutoPager.pp.addEventListener('DOMNodeInserted',function(evt){
                change_video_size(evt.target);
            }, false);
    }
});

どんな要素が追加されるのか、よく分からないのですけれど、本当は条件を付けて絞り込んだ方が良いのかも。
tumblrAutoPager.pp は、ページを挿入する先の要素が入っているはずです(ソースを読み違えていなければ)。




さらに追記です。

autopager の初期処理と前後するためにエラーになっているように思います。
イベントリスナーの登録をリトライするようにしてみました。

$(document).ready(function() {

    var change_video_size = ...

    change_video_size(document);
    // と、ここまでは、前と同じ

    // DOMNodeInserted のイベントを監視する
    if (tumblrAutoPager) {
        function add_ev() {
            if (tumblrAutoPager.pp) {
                tumblrAutoPager.pp.addEventListener('DOMNodeInserted',function(evt){
                        change_video_size(evt.target);
                    }, false);
                console.log("※ DOMNodeInserted listener added !");
            } else {
                setTimeout(add_ev, 0);
            }
        }
        setTimeout(add_ev, 0);
    }
});

addEventListener に成功すると、ログに一行出力するようにしてます。
ページの読み込みが完了して、ちょっと経つと、そのログが出てるはずです(出て欲しい)。
その後に、二ページ目を表示するとどうなるでしょうか?

# 何度もすみません (^^

他9件のコメントを見る
id:kaemhatti

お返事遅くなってしまい申し訳ございません。
できました!!ありがとうございます!
解決できず途方に暮れていたので本当に助かりました。
丁寧に回答して頂きありがとうございました。
本当に感謝しております。今後とも宜しくお願いします。

2013/05/25 16:56:53
id:a-kuma3

なんとか、解決に至ったようで、こちらもほっとしました。
もう少し、腕を磨いておきます (^^;

2013/05/25 18:04:48

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません