Highslide JSでclass="highslide" onclick="return hs.expand(this)"を無しで
2012/02/10(金) 16:47 はてブ情報 はてブに登録 はてブ数

元ねたは

http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1119218396

山行写真ブログ
http://blog.livedoor.jp/ina_yamanakama/
でHighslide JS使ってまして、ブログの写真のaタグにclass="highslide" onclick="return hs.expand(this)"をいちいち置換してたんですが、めどくさいと常々思ってまして、調べたところ上記に行き着きました。

やっぱ悩みはみな同じ。解決法があるんですね。

上記の内容ではIEはsetAttributeが昔(IE6とか?)使えなかったみたいですが今は(IE7以降?)よさそうですので以下のスクリプトをLivedoorブログのデザインより個々の記事のHeadの中に入れました。
<script type="text/javascript">
window.onload = function() {
  var tgts = 
 document.getElementById('highslide-container').getElementsByTagName('a');
  for (var i = 0; i < tgts.length; i++) {
      tgts[i].setAttribute('class', 'highslide');
      tgts[i].setAttribute('onclick', 'return hs.expand(this)');
  }
}
</script>
id="highslide-container"をブログ本文に設定しなければなので以下のようにdivタグを追加。
....
<$CommonTheme$>
<div id="highslide-container">
		<$ArticleBody$>
</div>
	<IfArticleBodyMore>
         <a name="more"></a>
         <div class="article-body-more">
          <$ArticleBodyMore$>
         </div>
        </IfArticleBodyMore>
しかしながら、本文中の通常リンク"a”のアンカータグがhighslideになってしまう。
なのでリンクの前に /div でエスケープして、画像の前で再度div id="highslide-container タグを入れねばならない。
面倒なので「続きを読む」にはhighslideしなくし、通常のリンクできるようにしました。
また、アンカータグを大文字Aにしてもいけるかもと思いましたが、これは自動で小文字に修正されてしまうためだめでした。

すごく楽になりました。
とおもったら、GoogleChromeブラウザでハだめだよといわれた。
調べたら
window.onload = function() {
でブログを見たときに呼び出されて実行されてないみたい。
で、http://pcrice.blog129.fc2.com/blog-entry-10.htmlよりjQueryで追加したら直りました。
jQueryを入れて、上記を以下のように修正。
$(function(){
jQueryを使用しない方法というのを最初試したがなぜかだめでした。

名前:  非公開コメント   

E-Mail(任意/非公開):
URL(任意):
  • TB-URL  http://www.cirlution.com/blog/adiary.cgi/028/tb/