エントリー本文
HighSlide JS の onclick 属性を JavaScript で登録する
サムネイルをポップアップ表示する HighSlide JS で onclick 属性および onkeypress 属性を JavaScript で自動的に登録する方法です。
ここでは Movable Type と WordPress プラグインを例に説明します。
１．概略
HighSlide JS を有効にするには、「Highslide JS でサムネイル画像を拡大表示する」の５項で説明した通り、a 要素に class="highslide" に加え onclick="return hs.expand(this)" を設定する必要があります。また配布サイトでは言及されていませんが onclick 属性を設定した場合は onkeypress 属性を同時に設定することがアクセシビリティ上好ましいとされています。
つまり、HighSlide JS に対応させるためには下記の青色部分を記述する必要があります。
<a href="[画像ファイルのURL]" class="highslide" onclick="return hs.expand(this)" onkeypress="return hs.expand(this)">
<img src="[サムネイル画像のURL]" alt="..." />
</a>が、a 要素に毎回 class 属性、onclick 属性、onkeypress 属性を設定するのは結構面倒ですし、他の画像表示ツールに移行した場合の修正稼動も懸念されます。ということで class 属性のみ設定すれば、イベントハンドラである残りの onclick 属性、onkeypress 属性は JavaScript で設定できるようにします。
当サイトでも、ひとつ前のエントリー「poEDIT の使い方」等、HighSlide JS にはこの方法を適用しています。
動作は Windows XP + IE6/IE7/Firefox2/Opera9 で確認しています。
２．Movable Type の場合
下記のスクリプトをテンプレートの </head> の前に設定するか、外部ファイルとして自身のサーバにアップロードしてください。
<script type="text/javascript">
function addHighSlideAttribute() {
var isIE = (document.documentElement.getAttribute('style') ==
document.documentElement.style);
var anchors = document.getElementById('content').getElementsByTagName('a');
for (var i = 0, len = anchors.length; i < len; i++) {
if (anchors[i].className == 'highslide') {
if (!anchors[i].getAttribute('onclick')) {
isIE ? anchors[i].setAttribute('onclick', new Function('return hs.expand(this)')) :
anchors[i].setAttribute('onclick','return hs.expand(this)');
isIE ? anchors[i].setAttribute('onkeypress', new Function('return hs.expand(this)')) :
anchors[i].setAttribute('onkeypress','return hs.expand(this)');
}
}
}
}
</script>外部ファイル（例えば highslide_eh.js）にする場合は先頭と末尾の script タグを除去して、</head> の前に
<script type="text/javascript" src="<$MTBlogURL$>highslide_eh.js"></script>というようなタグを設定してください。
そしてテンプレートの </body> の直前に下記のタグを追加します。
<script type="text/javascript">
addHighSlideAttribute();
</script>３．WordPress の場合
下記のプラグインをインストールして、有効化してください。このプラグインと WPJ-Highslide 0.2 を併用すると便利です。
４．参考・関連サイト
- Ogawa::Memoranda：Litebox/Lightboxの使い方
- Days on the Moon：IE の getAttribute / setAttribute
- ウェブコンテンツ・アクセシビリティ・ガイドライン 1.0
≫ HighSlide JS での手間を省く from unbland.net blog
小粋空間さんで紹介されている 「HighSlide JS の onclick 属... [続きを読む]
≫ HighSlide JS での手間を省く from unbland.net blog
小粋空間さんで紹介されている 「HighSlide JS の onclick 属... [続きを読む]
≫ Highslideの属性を自動設定する from おさるの旅ログ2
Highslideの機能を有効にするためにはアンカー<a>にclass属性とonclick属性を付加する必要がありますが、Ja... [続きを読む]
初歩的な質問ですが、Hislide ＪＳで画像をＭＴから掲載することが問題なくできますが、flashをＭＴから掲載する方法はどうしたらいいのでしょうか？
HighSlideのサンプルのflashを表示するサンプルをＭＴに入力してもうまくいきません。
＞川崎 剛史さん
こんにちは。
ご連絡遅くなり申し訳ありません。
ご質問の件ですが、メインページでの表示であれば、公式サイトのサンプルを表示する設定内容に違いはないと思います。
まずは簡単なHTMLファイルを作り、そこにFlashを表示する設定を行ってサンプルが表示されることを確認してみてください。
お分かりにならないようでしたら再度ご連絡頂けますでしょうか。
それではよろしくお願い致します。
yujiroさん
こちらですが、WordPress 日本語版 2.5ですとタグが追加されません。
WordPress用プラグインは2.5には非対応でしょうか。
お時間がございますときにご確認頂けますでしょうか。
（現在、lightboxに戻してます＾＾；）
yujiroさん
こちらですが、WordPress 日本語版 2.5ですとタグが追加されません。
WordPress用プラグインは2.5には非対応でしょうか。
お時間がございますときにご確認頂けますでしょうか。
（現在、lightboxに戻してます＾＾；）
＞kenさん
こんにちは。
ご質問の件ですが、WordPress2.5 + WPJ-Highslide + 本プラグインで正常に動作することを確認しました（class="highslide" のみ設定しています）。
テーマもいくつか切り替えましたが大丈夫のようです。
設定している状態でご連絡頂ければ幸いです。
それではよろしくお願い致します。
: April 16, 2008 1:21 PMyujiroさん
お世話になります。
テストサイトで再度試しましたがclass="highslide"が入らないですね＾＾；
テストで遊んでるので色々と遊んでるので再度、新規インストールして本番環境とあわせたのですが・・・
Apacheなどのログには特にエラーは出てませんでした。
＞kenさん
こんばんは。
このカスタマイズは onclick 属性と onkeypress 属性の自動付与ですので、予めご容赦願います（一応、本文にそのように記載しています）。
ということで、テスト画像の a 要素に
class="highslide"だけは設定してください。
それではよろしくお願い致します。
yujiroさん
お世話になります。
使い方が違ってましたね。。。お恥ずかしい限りです OTL
お手数をおかけしました・・・。
このプラグインですがLightbox2 Plugin for Wordpress（http://www.m3nt0r.de/blog/lightbox-wordpress-plugin/）みたにclass="highslide"を追加するのは難しいでしょうか＾＾；
Lightbox2 Plugin for Wordpressから乗換えを考えてまして、UPするだけで使えるってのが理想だったります＾＾；
＞kenさん
こんにちは。
意図が理解できました。
highslide_eh.js を下記の内容に入れ替えてください。
function addHighSlideAttribute() {
var isIE = (document.documentElement.getAttribute('style') ==
document.documentElement.style);
var anchors = document.getElementById('content').getElementsByTagName('a');
for (var i = 0, len = anchors.length; i < len; i++) {
var anchor = anchors[i];
if (anchor.getAttribute('href') && anchor.getAttribute('href').match(/jpg$|gif$|png$/)) {
anchor.className = 'highslide';
if (!anchors[i].getAttribute('onclick')) {
isIE ? anchors[i].setAttribute('onclick', new Function('return hs.expand(this)')) :
anchors[i].setAttribute('onclick','return hs.expand(this)');
isIE ? anchors[i].setAttribute('onkeypress', new Function('return hs.expand(this)')) :
anchors[i].setAttribute('onkeypress','return hs.expand(this)');
}
}
}
}それではよろしくお願い致します。
yujiroさん
お世話になります。
highslide_eh.js の入れ替え内容ですが・・・
途中で切れてませんでしょうか＾＾；
表示頂いているのは・・・デフォルトの上から5行目途中までと同じですよね？
お手数ですが、再度入れ替えの内容をお教え頂けますでしょうか。
yujiroさん
お世話になります。
UPするだけで使えるようになりました＾＾
ありがとうございます。
WPJ-Highslide に少し問題がある（虫眼鏡（zoomin.cur）がIEかFirefoxの一方でしか有効にならない）のですが、なんとか使えそうです＾＾；
いつも色々とありがとうございます(。 ^。^)( 。-.-)( _ _)ペコ
