jquery.prettyPhotoのTwitterボタンの投稿内容を変える。

要は、下記のTwitterのtextパラメータを書き換えるスニペットをどこに置くか…という問題。

//Twitterボタンの書き換え
// iframe要素とURLを取得
var TwitterFrame = document.querySelector('.twitter iframe');
var url = TwitterFrame.src;
                         
// 任意の文章のボタンを表示するURLを生成
var newUrl = url.replace(/([#&]text=)([^&]+)/, function(s, m1, m2) {
    return m1 + encodeURIComponent("書き換えたい内容");
});
                         
// URLを書き換え
elTwFrame.src = 'about:blank';
    setTimeout(function() {                             
        TwitterFrame.src = newUrl;
    }, 1);

「$('セレクタ').prettyPhoto()」でprettyPhotoを呼び出すときに「changepicturecallback」オプション（起動時に実行されるfunction）で設定すればいい様なので、

$("a[data-popup^='prettyPhoto']").prettyPhoto({
    changepicturecallback: function(){

        //ここに書き換え処理を追加

    }
});

ってことになるはずです。

たしかに、呼び出す内容が「画像」のときは動くんだけど、iFrameの場合に動いてない…orz


結局prettyPhoto.jsの「$pp_pic_holder.fadeIn(function(){…」の中に直接埋め込むことにしました。
iFrameのコンテンツ呼び出しなので、「case 'iframe'」の中に処理を追加です。

case 'iframe':
    pp_dimensions = _fitToViewport(movie_width,movie_height); // Fit item to viewport
				
    frame_url = pp_images[set_position];
    frame_url = frame_url.substr(0,frame_url.indexOf('iframe')-1);

//======▼追加
//Twitterボタンの書き換え
// iframe要素とURLを取得
var TwitterFrame = document.querySelector('.twitter iframe');
var url = TwitterFrame.src;
                         
// 任意の文章のボタンを表示するURLを生成
var newUrl = url.replace(/([#&]text=)([^&]+)/, function(s, m1, m2) {
    return m1 + encodeURIComponent("書き換えたい内容");
});
                         
// URLを書き換え
elTwFrame.src = 'about:blank';
    setTimeout(function() {                             
        TwitterFrame.src = newUrl;
    }, 1);
//=====▲追加ここまで

	toInject = settings.iframe_markup.replace(/{width}/g,pp_dimensions['width']).replace(/{height}/g,pp_dimensions['height']).replace(/{path}/g,frame_url);
	break;

おまけ。
画像をクリックしたときにポップアップを閉じる処理は

$('div.pp_pic_holder').bind('click',function(){ close(); return false; });

上記の処理を「$('a.pp_close').bind('click',function(){ $.prettyPhoto.close(); return false; });」の下に追加です。


画像に外部へのリンクを貼りたい場合は画像のマークアップセッティングを以下のように変えて「$pp_pic_holder.fadeIn(function(){…」で書き換え処理をすればいいかと。

image_markup: '<a href="#"><img id="fullResImage" src="{path}" /></a>'

たとえば、こんな感じで。

$("a[data-popup^='prettyPhoto']").prettyPhoto({
changepicturecallback: function(){

	var linkData = $(".pp_description a").attr("href");
	//リンク置き換え
	if(linkData != ""){
	    $("#pp_full_res a").attr({
		    href : linkData,
		    target : "_blank"
	    });
	}
	//リンクデータが無い場合、リンクを生成しない
	//子要素のimgタグをクローンし、元データを削除する
        //アンカータグだけ消したいけど、子要素のimgタグも消えちゃうのでこんな処理に…orz
	else{
		$("#pp_full_res a img").clone().prependTo("#pp_full_res");
                $("#pp_full_res a").remove();
	}
}
});

よくよく考ええみたら、まともにJavaScriptというものを勉強してこなかったので、いつもソースとにらめっこしながらの試行錯誤（？）の連続です。