＞ ＞ HighSlide JS の onclick 属性を JavaScript で登録する

HighSlide JS の onclick 属性を JavaScript で登録する

Posted at March 30,2007 12:38 AM
Tag：[HighSlide, 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 を併用すると便利です。

highslide_eh.zip / highslide_eh.lzh

４．参考・関連サイト

Posted by yujiro   このページの先頭に戻る
関連記事
関連記事をもっと読む
トラックバックURL


トラックバック

≫ HighSlide JS での手間を省く from unbland.net blog
小粋空間さんで紹介されている 「HighSlide JS の onclick 属... [続きを読む]

Tracked on April 7, 2007 1:54 PM

≫ HighSlide JS での手間を省く from unbland.net blog
小粋空間さんで紹介されている 「HighSlide JS の onclick 属... [続きを読む]

Tracked on April 10, 2007 2:10 AM

≫ Highslideの属性を自動設定する from おさるの旅ログ2
Highslideの機能を有効にするためにはアンカー&lt;a&gt;にclass属性とonclick属性を付加する必要がありますが、Ja... [続きを読む]

Tracked on June 6, 2007 3:06 AM

≫ 拡大成功 from 瑞了奇譚
かくだいせいこう [続きを読む]

Tracked on June 10, 2008 5:38 PM
コメント

初歩的な質問ですが、Hislide　ＪＳで画像をＭＴから掲載することが問題なくできますが、flashをＭＴから掲載する方法はどうしたらいいのでしょうか？

HighSlideのサンプルのflashを表示するサンプルをＭＴに入力してもうまくいきません。

[1] Posted by 川崎　剛史 : August 25, 2007 12:46 AM

＞川崎　剛史さん
こんにちは。
ご連絡遅くなり申し訳ありません。

ご質問の件ですが、メインページでの表示であれば、公式サイトのサンプルを表示する設定内容に違いはないと思います。
まずは簡単なHTMLファイルを作り、そこにFlashを表示する設定を行ってサンプルが表示されることを確認してみてください。
お分かりにならないようでしたら再度ご連絡頂けますでしょうか。
それではよろしくお願い致します。

[2] Posted by yujiro : September 6, 2007 11:18 AM

yujiroさん

こちらですが、WordPress 日本語版　2.5ですとタグが追加されません。
WordPress用プラグインは2.5には非対応でしょうか。

お時間がございますときにご確認頂けますでしょうか。
（現在、lightboxに戻してます＾＾；）

[3] Posted by ken : April 14, 2008 8:56 PM

yujiroさん

こちらですが、WordPress 日本語版　2.5ですとタグが追加されません。
WordPress用プラグインは2.5には非対応でしょうか。

お時間がございますときにご確認頂けますでしょうか。
（現在、lightboxに戻してます＾＾；）

[4] Posted by ken : April 14, 2008 8:58 PM

＞kenさん
こんにちは。
ご質問の件ですが、WordPress2.5 + WPJ-Highslide + 本プラグインで正常に動作することを確認しました（class="highslide" のみ設定しています）。
テーマもいくつか切り替えましたが大丈夫のようです。

設定している状態でご連絡頂ければ幸いです。
それではよろしくお願い致します。

[5] Posted by yujiro logo : April 16, 2008 1:21 PM

yujiroさん

お世話になります。
テストサイトで再度試しましたがclass="highslide"が入らないですね＾＾；

テストで遊んでるので色々と遊んでるので再度、新規インストールして本番環境とあわせたのですが・・・

Apacheなどのログには特にエラーは出てませんでした。

[6] Posted by ken : April 17, 2008 8:13 PM

＞kenさん
こんばんは。
このカスタマイズは onclick 属性と onkeypress 属性の自動付与ですので、予めご容赦願います（一応、本文にそのように記載しています）。
ということで、テスト画像の a 要素に

class="highslide"

だけは設定してください。
それではよろしくお願い致します。

[7] Posted by yujiro logo : April 17, 2008 9:13 PM

yujiroさん

お世話になります。

使い方が違ってましたね。。。お恥ずかしい限りです　OTL
お手数をおかけしました・・・。

このプラグインですがLightbox2 Plugin for Wordpress（http://www.m3nt0r.de/blog/lightbox-wordpress-plugin/）みたにclass="highslide"を追加するのは難しいでしょうか＾＾；

Lightbox2 Plugin for Wordpressから乗換えを考えてまして、UPするだけで使えるってのが理想だったります＾＾；

[8] Posted by ken : April 18, 2008 12:59 AM

＞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)');
      }
    }
  }
}

それではよろしくお願い致します。

[9] Posted by yujiro logo : April 21, 2008 10:12 AM

yujiroさん

お世話になります。

highslide_eh.js の入れ替え内容ですが・・・
途中で切れてませんでしょうか＾＾；

表示頂いているのは・・・デフォルトの上から5行目途中までと同じですよね？

お手数ですが、再度入れ替えの内容をお教え頂けますでしょうか。

[10] Posted by ken : April 21, 2008 8:08 PM

＞kenさん
すいません。
直しました。

[11] Posted by yujiro logo : April 21, 2008 8:30 PM

yujiroさん

お世話になります。

UPするだけで使えるようになりました＾＾
ありがとうございます。

WPJ-Highslide に少し問題がある（虫眼鏡（zoomin.cur）がIEかFirefoxの一方でしか有効にならない）のですが、なんとか使えそうです＾＾；

いつも色々とありがとうございます(。 ^。^)( 。-.-)( _ _)ペコ

[12] Posted by ken : April 21, 2008 9:49 PM

＞kenさん
こんばんは。
ご連絡ありがとうございました。
とりあえず動作したようでよかったです。
ではでは！

[13] Posted by yujiro logo : April 24, 2008 1:00 AM
コメントする
greeting

*必須

*必須（非表示）


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り（プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り）、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります（全て半角文字）