Highslideの機能を有効にするためにはアンカー<a>にclass属性とonclick属性を付加する必要がありますが、JavaScriptを使ってonclick属性を自動的に追加することができました。
前回と同じく「小粋空間」さんのところのこちらの記事「HighSlide JS の onclick 属性を JavaScript で登録する」に詳しく書かれています。
紹介されているスクリプトを利用するとclass="highslide"が指定されているアンカーについてonclick属性とonkeypress属性が追加されます。
当ブログではExif情報の一部をキャプションとして掲載したいので、少し修正してみました。
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')) {
var img_name = getFileName(anchors[i].href);
var ev = "return hs.expand(this,{captionId:'caption-" + img_name + "'})";
isIE ? anchors[i].setAttribute('onclick', new Function(ev)) :
anchors[i].setAttribute('onclick',ev);
isIE ? anchors[i].setAttribute('onkeypress', new Function(ev)) :
anchors[i].setAttribute('onkeypress',ev);
}
}
}
}
function getFileName(href) {
var fe = href.substring(href.lastIndexOf('/',href.length)+1,href.length);
var f = fe.substring(0,fe.lastIndexOf('.'));
return f;
}例えば、画像ファイルのアンカーが href="http://〜/image001.jpg" だった場合、"caption-image001" がキャプションのIDとして指定されます。
これで随分作業が軽減されました。
驚き(^_^;
ちなみに画像を左寄せなどにするために、
margin: 0px 5px 5px 0px;を外部ファイルのCSSに記述してclass="〜"で指定しようとしたんですが、Highslideの動きがおかしくなりました。インラインで指定した場合は問題なし。
float: left;
残念…。
RDF Site Summary
こういう便利なJavaScriptがあるんですね。
ただ、私はプログラムがよくわからないものでして･･･。
実験してみましたが、上手くいきません。
ココログの場合どこに入れたらいいのかさえ分かりませんでした。
残念ながら断念です。(;><)
すでに読み込みを完了したアンカーに対して属性を付与していくので</body>の直前で関数を呼び出す必要があるかと思います。
ココログだとエントリーと</body>の間にスクリプトを挿入するのが難しそうなので、<body>のonloadイベントで処理するように工夫が必要かもしれません。
週末にでも実験してみますね(^_^;