plugin

忘れそうなので、jQuery Easing Pluginの使い方を書いておく。

• jQuery: The Write Less, Do More, JavaScript Library
• jQuery Easing Plugin

読み込み

jQuery本体を読み込んでから、Easing Pluginを読み込む。

<script type="text/javascript" src="jquery-1.2.3.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>

イージングの指定

slideUpやfadeOutなどのエフェクトで、プラグインで定義されたイージングを使いたい場合、以下の書き方をする。

$(element).slideUp({
                    duration: 1000,
                    easing: method,
                    complete: callback
});

この書き方についての説明も、なんでこれでOKなのかも、jQueryのサイトのドキュメントに書いてない気がする。いい機会なのでソースを読んでみたけど、これでOKっぽい。

animateと一緒に使う場合は、ドキュメントにある通りにeasingに”easeInCubic”とか指定する。

animate( params, [duration], [easing], [callback] )

{duration: 1000, ... complete: callback}の部分で指定できるオプションについては、ドキュメントのanimate( params, options )のページのoptionの部分で説明されている。

デフォルトのイージング

Easing Pluginを読み込むと、デフォルトのイージングが、swingからeaseOutQuadに変更される。jQueryで定義されていた、swingはjswingという名前に変更され、イージングにswingを指定しても、jQuery.easing.defで指定したイージングが呼ばれるように変更されている。
デフォルトで使われるイージングを変更したい場合は、以下のようにして指定する。

jQuery.easing.def = "easeInElastic";

独自のイージング

プラグインと同じ方法でjQueryのオブジェクトを拡張して、かくかく動くイージングを作ってみた。書き方これでいいんだろうか。

<script src="http://www.regulus8.com/blog/wp-content/uploads/2008/02/js/jquery-1.2.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
  jQuery.extend(jQuery.easing,{
    step: function (x, t, b, c, d) {
      return c*((t=Math.round((t+0.5)/200)*200)/d) + b;
    }
  });
  $("#start").click(function(){
    $("#box").slideToggle({duration: 1000, easing: "step"});
  });
});
</script>
<input id="start" value="start" type="button">
<div id="box" style="width:200px;height:200px;color:white;background:red;">#box</div>

jQueryのパスを間違えていたので直しました。

使ってるプラグインの動作を追いつつ、jQueryのソースを読むと楽しいと思う。

投稿の本文にJavaScriptを埋め込もうとしたら、自動整形されてひどいことになったので、本文の一部分を自動整形しないプラグインを入れてみた。

• WordPress › Raw HTML « WordPress Plugins

コードエディタ中で、<!--start_raw--> <!--end_raw-->か[RAW] [/RAW]で囲んだ部分が自動整形されなくなる。ビジュアルエディタは使っていないので、どうなるのか試してない。

<!--start_raw--> <!--end_raw-->のテスト

<!--start_raw-->
<script type="text/javascript">
  document.writeln(new Date());
</script>
<!--end_raw-->

上のコードをこの下に挿入してみる。

[RAW] [/RAW]のテスト

[RAW]
<script type="text/javascript">
  document.writeln(new Date());
</script>
[/RAW]

上のコードをこの下に挿入してみる。

jQuery Easing Pluginを使って、easingの動きが見られるサンプルを作ってみた。

easingtest.html

これを書くだけで、えらい苦労した… やっぱり書いて動かさないと覚えられないな。

追記：プラグイン化したのものがありました。わーどぷれすっ！ » サムネイルのサイズの変更

画像を投稿したときにWordPressが生成するサムネイルのサイズは、phpファイルを直接変更することで変更可能ということらしい。

WordPress 2.3では/wp-admin/includes/image.phpの以下の部分の128がサムネイルのデフォルトの長辺の長さ。128を書き換えるとサムネイルの最大サイズが変わる。

$max_side = apply_filters( 'wp_thumbnail_max_side_length', 128, $attachment_id, $file );

image.phpを見ていたら、以下の部分で縦横の長辺から、サムネイルのサイズを計算していたので、

// figure out the longest side

if ( $image_attr[0] > $image_attr[1] ) {
	$image_width = $image_attr[0];
	$image_height = $image_attr[1];
	$image_new_width = $max_side;

	$image_ratio = $image_width / $image_new_width;
	$image_new_height = $image_height / $image_ratio;
	//width is > height
} else {
	$image_width = $image_attr[0];
	$image_height = $image_attr[1];
	$image_new_height = $max_side;

	$image_ratio = $image_height / $image_new_height;
	$image_new_width = $image_width / $image_ratio;
	//height > width
}

ここをifブロックのどちらかの内容だけに書き換えることで、サムネイルを横幅サイズ固定もしくは縦幅サイズ固定で生成できる。
上のコードを以下の様に書き換えると、横幅固定でサムネイルを生成する。

// figure out the longest side

// 横幅固定のサムネイル作成に変更
// if ( $image_attr[0] > $image_attr[1] ) {
	$image_width = $image_attr[0];
	$image_height = $image_attr[1];
	$image_new_width = $max_side;

	$image_ratio = $image_width / $image_new_width;
	$image_new_height = $image_height / $image_ratio;
	//width is > height
// } else {
// 	$image_width = $image_attr[0];
// 	$image_height = $image_attr[1];
// 	$image_new_height = $max_side;
//
// 	$image_ratio = $image_height / $image_new_height;
// 	$image_new_width = $image_width / $image_ratio;
// 	//height > width
// }