03/201801

【JS】HighSlideに必要なコードを自動挿入【jQuery】

どうもこんにちは、うちのサイトではサムネイル表示の画像リンクにHighSlideを使用してポップアップ表示させています。

こんな奴ですね。

workspace_csp_20130114.png

ただこれの使用方法がちょっと面倒でして、サムネイルの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自体あまり自作しない人なので今後活かされるか不明ですけど……

関連エントリー

【正規表現】英文以外の半角スペースを排除

とある事情により、日本語英語混在の文で半角スペースを排除する正規表現を探してい...

2017/12/08
SSL化予定

最近絵の記事が全くない御堂です。 てめぇ本当に絵描か? それはさておき...

2017/08/18
CSSの小技

今までの記事を統合しました。以後はこちらに追記していきます。 MENU ...

2014/05/10
【freo】ページ送りナビゲーション【テンプレート】

freoのページ送りナビゲーションって初期だと前のページと次のページのみなんで...

2014/01/04
【艦これ】ユーザースタイルシート

ちまたで人気の肝これ……なんか違う。そう艦これ。一発変換で肝がでるってどういう...

2013/10/22
【freo】TinyMCEでspanが挿入されるのを防ぐ【Tips】

追記 どうやらtinymceのバグらしいですが、今現在(2018年頭)も直...

2013/08/22

コメント

  • コメントはまだありません。

コメント登録

  • 閲覧制限 ※管理者のみにすると投稿者でも確認ができなくなります。

archive


×

ログイン