jQuery :: Lunatic-Code

このブログに組み込んでたjavascriptも少しずつｊQueryベースへ書き換え中。
ファイルサイズも半分とまでは行かないけれど、40%ほどダイエットに成功。
まぁ、jQuery本体の分があるので、全体的には転送量上がってるわけだけれども。

さて、本題。
Thickboxを使って、画像をポップアップするのはいいんだが、
デフォルトではaタグについてるtitleしか表示できない。
aタグより、中のimgのaltを表示してもらいたいんだが。

ってことで改造。
tb_init()内の

var t = this.title || this.alt || this.name || null;

を

var t = this.childNodes[0].getAttribute(“title”) || this.childNodes[0].getAttribute(“alt”) || null;

に書き換える。

こんだけ(‘A｀)

(続きを読む…)

今までDOM操作は「基本を覚えるうちはベタ書きだ！」と、
jQueryやprototype等のライブラリを使わず、チマチマ書いてましたが、
まぁ、そろそろ次のステップに進もうかな、と。
まずはお手軽簡単jQueryから。

今までwordpressに記事を書くとき、画像を入れ込んだときは、別窓で開きたいなーと思って、
わざわざ投稿時にリンクタグに手入力でクラスを振ってました(‘A｀)
で、このクラスを振るwordpressのプラグインをつくろうかなと思って挫折ｗ
wp-admin\includes\media.phpを直接いじれば簡単なんですが、過去の記事とかは変更できないし。

なので、jQuery使っちゃうぞ。
まず本家からjQuery本体その他モロモロを拾ってきます。
thickbox.js
thickbox.css
loadingAnimation.gif
jquery-latest.js

ちなみにローディング用のgif画像はhttp://www.ajaxload.info/でお手軽簡単に好きなのが作れて(ι゜ω゜)ｨｨ・・

環境によってthickbox.jsの8行目あたりにあるloadingAnimation.gifへのパスを、
書き換えなきゃいけないと思います。
僕の場合、パーマリンクをちょいといじっているので、フルパスに書き換えました。

さて、テーマも変更します。
ヘッダ部分に以下の4行追加。

<link href="<?php bloginfo(’stylesheet_directory’); ?>/thickbox.css" rel="stylesheet" type="text/css" />
<script src="<?php bloginfo(’stylesheet_directory’); ?>/js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="<?php bloginfo(’stylesheet_directory’); ?>/js/common.js" type="text/javascript" charset="utf-8"></script>
<script src="<?php bloginfo(’stylesheet_directory’); ?>/js/thickbox.js" type="text/javascript" charset="utf-8"></script>

common.jsは記事内のリンクにthickbox呼び出し用のクラスを追加するスクリプトです。
スクリプトの呼び出し順は必ずjQuery本体→初期化スクリプト→thickBoxの順じゃないとダメです。

common.jsに記述する初期化の内容は以下。

$(function(){
$("div.post a[href$='.jpg']").addClass("thickbox");
$("div.post a[href$='.gif']").addClass("thickbox");
$("div.post a[href$='.png']").addClass("thickbox");
$("div.post a[href$='.jpeg']").addClass("thickbox");
});

記事はdiv.post内にあるので、その中のjpgやpngなど、リンク先が画像のものにthickboxと言うクラスを付加しています。
以上。
あとは、/wp-content/themes/の自分の使ってるテーマの中にアップロードするだけ。
簡単(´･ω･`)
こんな感じ。