どうもこんにちは、うちのサイトではサムネイル表示の画像リンクにHighSlideを使用してポップアップ表示させています。
こんな奴ですね。
ただこれの使用方法がちょっと面倒でして、サムネイルのaタグにいくらか記述が必要です。
なので今回はその記述を自動化する方法を紹介します。
通常
まずはHighSlideの適用方法ですが、下記のように記述します。
<a class="highslide" href="hoge.png" onclick="return hs.expand(this)" onkeypress="return hs.expand(this)"><img></a>
要はaタグに下記の3つを追加ですね。
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(){});であとで読ませるか、</body>直前にでも記述してください。
あ、$(window).loadはjQuery3では非推奨になってますからね（削除されたんだっけ）
余談
実はHighSlide自体は結構前から実装していたんですけど、上記の自動化がいまいちわからずずっと手作業で入れてました。
というのも.hasや:hasの存在を知らなかったのでimgタグを持つaタグをどうやって取得しよう……forでaタグをすべて見回って子要素にimgあるか確認するか？ やってみたけど、なんかうまくいかないな……とかずっとやって自動化できてませんでした。
そんな中.hasを知ってまさかこんな簡単に自動化できるとはって愕然としましたね。
まぁseo的にこの方法が正解なのかはわからないですが、他のものでも応用が効きますし、なにより手軽なのがいいです。
まぁjavascript自体あまり自作しない人なので今後活かされるか不明ですけど……
関連エントリー
コメント
- コメントはまだありません。
