解決済
Lightbox JS v2.0をWikiに実装したのですが、今現在、MSIEでOK！Firefox,Operaで目下、未達。
Livedoor Wiki に、Lightbox JS v2.0 を実装したのですが、MSIE系では目的を達成しましたが、Firefox1.5.0.9, Opera9.10 では、何ら変化が無い状態です。ここは皆様の貴重なお時間と、お知恵を拝借して、少なくとも Opera と Firefox で実装を達成したく望んでいます。※ もちろん、
※ で、実装手順を公開する予定です。
以下のJavaScriptを登録しまして、後は、Lightbox JS v2.0作者のHPの指示の通りです。
Event.observe(window, "load", replaceTags, false);
function replaceTags(){
var wiki = document.getElementsByClassName("main",$("wikibody"))[0];
var aTags = wiki.getElementsByTagName("a");
var judgeOfImage = '';
for(i=0;i<aTags.length;i++){
judgeOfImage = aTags[i].href.substring(aTags[i].href.length - 3).toUpperCase();
if( judgeOfImage == 'JPG' || judgeOfImage == 'PNG' || judgeOfImage == 'GIF' ){
aTags[i].rel='lightbox[roadtrip]';
}
}
}
※ 具体的な Livedoor Wiki の、URL：
PS: ここのlivedoor ナレッジサイトでヒントを頂戴できました。具体的なURLなど思い出せないのですが、感謝しております！！
回答(1)
1.
Operaでは、JSでDOM要素にidやrelなど後から振ることができないようです。innerHTMLで文字列としての書き換えは効きますので、これを利用すると、idやrelなどの属性も追加はできます。親要素のinnerHTMLを取って、職人芸でreplaceしましょう。
Firefoxでも同様らしいです。（ちなみに、うちの古いMozillaだと振れます。）
正規表現中で、「<」と「>」は、「<」「>」でマッチするブラウザと、そのままの記号でマッチするもの（あるいは両方）があるようです。
＃OperaだとScriptAculousのOpacity関係がうまく動かないことがあるようです。lightboxで使っているかどうかは、未検証です。
今のところ、全てのブラウザー(MacなりLinux+Xを含む)での達成度は低いかもしれませんが、MS-Win上のIE系と最新FFで、固定フォーマットであるWikiで実装できたことに自己満足しております。ありがとうございました。
これからもよろしくお願い申し上げます。
- Ujiki.oO -
コメント(8)
ちょっと未確認で申し訳ないですが、たぶん、Operaだと、
aTags[i].rel='lightbox[roadtrip]';がうまくいってないのではないかと思います。setAttributeでもうまくいかないことがあるよーな・・・。
ちょっと強引ですが、タグの親要素のinnerHTMLを正規表現で置換すれば、目的が達成できる予感はします。
Gecko系の原因は別で、たぶんイベントリスナーの方じゃないかと思います。
>>1
innerHTMLを利用するには、IDが必要ではなかったでしょうか？ 仮に、
aTags[i].id = 'junk' + eval(i++);と、埋め込めたとしても、目的は、タグ間の編集ではなくて、タグ内のエレメントの追加なので、無理ではないのかなあ～と、考えてしまうのですが。これって早計でしょうか？
- Ujiki.oO -
>>#2
IDはなくても大丈夫です。
親要素のinnerHTMLを採ると、
・・・<a href="・・・jpg">・・・とか採れるので、
someelement.innerHTML.replace(/(jpg\")(>)/img,"$1 rel=\"lightbox\[roadtrip\]\"$2");
みたいなことをすれば置換できると思います。
>>#2
えっと、たぶん、aTags[i].idへの代入もOperaでは効かないのではないかと・・・。
どうでもいいですが、
'junk' + eval(i++)
は、
'junk' + i;
の方が目にいいです。1足すのが先か後かも迷いますし・・・。
>>#3
MSIE系はそのままにして、MSIE以外を以下の様にしましたが、改善されないですね。う～む、どこにミスがあるのやら。
var debugCha = '';
debugCha = '◆';
Event.observe(window, "load", replaceTags, false);
function replaceTags(){
var wiki = document.getElementsByClassName("main",$("wikibody"))[0];
with(wiki)innerHTML=innerHTML.replace(/(\<a href=\".*\.jpg\")(\>)/ig,debugCha+"$1 rel='lightbox[roadtrip]'$2"+debugCha).replace(/(\<a href=\".*\.gif\")(\>)/ig,debugCha+"$1 rel='lightbox[roadtrip]'$2"+debugCha).replace(/(\<a href=\".*\.png\")(\>)/ig,debugCha+"$1 rel='lightbox[roadtrip]'$2"+debugCha);
}
>>#3
someelement.innerHTML.replace の、第一フィールド内に、(>)/img とありましたが、FFで確認したところ、
「 > 」ではマッチングできませんでした。
「 ￥＞ 」(半角)でマッチングしました。
MSIE系は、標記のスクリプトで実行させますので、利用しない関係上、未確認ではあります。
- Ujiki.oO -
>>#5
自己レスで済みません。文法は正常でした。JavaScriptの各ファンクションの起動のタイミングの問題でした。
詳しくは、Livedoor Wikiで公開しました。
おかげさまで、MSIE系も、FFも正常動作するようになりました。ありがとうございました！
- Ujiki.oO -
