※現在（2022/4時点）はluminousに変更していますので、旧ブログの仕様となっています。
どうもこんにちは、うちのサイトではサムネイル表示の画像リンクにHighSlideを使用してポップアップ表示させています。
こんな奴ですね。
ただこれの使用方法がちょっと面倒でして、サムネイルのaタグにいくらか記述が必要です。
なので今回はその記述を自動化する方法を紹介します。
通常
まずはHighSlideの適用方法ですが、下記のように記述します。
<a class="highslide" href="hoge.png" onclick="return hs.expand(this)" onkeypress="return hs.expand(this)"><img></a>
class="highslide"
onclick="return hs.expand(this)"
onkeypress="return hs.expand(this)"
これをサムネイル画像のaに毎回入れていくのは正直面倒です。
ブログなんかで自動生成してるならtemplateに入れればいいんじゃないかって話が出ると思いますが、適用させるのはimgタグが子要素にあるaタグなので、普通にaタグにぶち込むと普通のテキストリンクにも入ります。
なにか支障があるのかは知りませんけど、いらないものに付いてるのは気持ち悪いので却下。
自動化
ではどうするか。
要は上記にも書いたようにimgタグを子要素に持つaタグに3つ記載すればいいんです。
ならjavascriptで動的に追加してやればいいじゃないですか。
$(function() {
$('#content a').has('img').addClass('highslide');
$('#content a').has('img').attr('onclick', 'return hs.expand(this)');
$('#content a').has('img').attr('onkeypress','return hs.expand(this)');
});
ちなみにjQueryが必要ですが、Highslide自体にも必要なので問題はないですね。
$("a").has('img')
.hasで子要素にimgタグがあるaタグを対象にしています。
その前の#contentは単に記事内のもののみに適用させたかったので入れてます。これ抜くと記事外……例えばロゴマークとかにも追加されますからね（リンク先が画像じゃないので動作的には問題ないのでしょうけど）
.addClass('highslide');
class属性にhighslideを"追加"します。
下にある.attrでやると"上書き"になるので、既に他のclassがあった場合それが消えるのでaddClassを使用。
.attr('onclick', 'return hs.expand(this)'); と .attr('onkeypress','return hs.expand(this)');
onclick属性にreturn hs.expand(this)を入れて、onkeypress属性にreturn hs.expand(this)を入れる。
上記にも書いたように上書きなので、もしなにか既にあった場合は他の方法を取らないといけないですが、まぁほぼないでしょうから調べてすらいません。
読み込み後に実行
ちなみに例のごとく書き換え系なのでページの読み込みが終わってからでないと動作しません。
$(window).on('load',function(){});であとで読ませるか、
