久々にWordpressをアップグレードして、プラグインやらテーマやらも更新しました。スッキリ。 でも派手なテーマを使ってもなんか味気ない色気ない。ポスト自体がほとんど装飾がないものばかりですからねぇ。その辺もやり過ぎない程度に気をつけて行きたいところです。 さて本題ですが、最近巡回してるあるブログでjQueryを使って、イメージのディゾルブチェンジをしたい（未達成）という記事を読みまして、未達成ならじゃあ僕がやったろうやないかーということで作ってみました。 しかし正直言って、さらっと読んだだけでは元記事に書いてある問題点がいまいち理解できなかったので、問題点の解決策の提示というよりは、自分なりの作り方の提示ってことになります。 ディソルブの処理の概要としては、frontとbackの2つのimgがあって、backに次の画像をセットしてfadeInし同時にfrontをfadeOutし、そしてfrontとbackの参照を切り替えるってな感じです。 ゲームとかでよく使うダブルバッファリング処理を想像してもらうと分かりやすいかと。 そのディゾルブ処理部分のソースは具体的にこうなってます。 $(class_flick).load(function(){ layout(back); back.fadeTo(‘slow’, 1); front.fadeTo(‘slow’, 0); var tmp = back; back = front; front = tmp; }); 概要の説明のままですね。 layoutっていう関数は画像の表示位置の調節を行うだけですのでここではさほど重要ではありません。 一番重要なのは1行目で、$(class_flick)はfrontとback両方のimgを指すのですが、そのloadイベントによってsrcを変更して画像を読み込み終わったタイミングが分かるので、その中でディゾルブ処理を行うようにしています。 あとはボタンをクリックしたタイミングなどで、backのsrcを変更してやるだけで次の画像を読み込みながらのディゾルブ処理ができると、そういうことになります。 今回作ったサンプルは、ディゾルブ処理を行うイメージギャラリーの”てい”でjQueryのプラグイン風に書いてますので、簡単にプラグイン化できると思います。 あとはちゃんとやるんだったら、画像の先読み機能を付けたり、ボタンを連打すると挙動がおかしかたりするのでその辺の制御するようにすると良いんではないかなんて思います。 また、今回作ったサンプルには例によって？flickrの画像を適当に使ってますので、何か問題あればコメント欄とかで教えて頂ければ幸いです。 しっかし、jQueryとhtmlを1年ぶりぐらいに触った気がする。えらい苦労するかと思ったけどそうでもなかったり。

タイトルで殆ど説明してしまってますが、たとえば特定のdiv要素の中に動的にobject要素を追加してFlashを読み込み、そのFlashの中で ExternalInterface.callを使って、JavaScriptの関数を呼び出しつつ戻り値を取得して、それをFlashの挙動に反映させるようなものを作ってたのですが、IE(6と7で確認)の場合のみJavaScriptの戻り値が取得できませんでした。 で、色々試してる中で、jQueryの関数を使わずにdocument.writeすればIEでも正常に動作することは突き止めましたが、document.writeはページロード完了後に呼び出すと、その出力内容でページを書き換えてしまうため、回避方法がそれしかないとするととても不便です。 さらに色々試してみると、どうもjQueryのhtml関数が悪さをしてるようで、例えば $(‘Flashのガワになるdiv’).html(‘Flashを読み込むobject要素のhtml’); みたいに書いてた部分を $(‘Flashのガワになるdiv’).get(0).innerHTML = (‘Flashを読み込むobject要素のhtml’); と書き換えたらうまくいきました。 jQueryとExternalInterfaceを同時に使うときは注意です。 しかし、html()で内部でinnerHTML使ってるだけだと思ってたんですけど、ちょっと違うようですね。innerHTMLの前に正規化処理でもあって、それが悪影響を及ぼしてるのかも知れません。 実は以前、IEだけでExternalInterface.addCallBackがうまく動作しない問題もあったのですが、今回の方法でそちらもうまく動作するかもしれません。

最近はJavaScriptも良い感じのフレームワークが色々と確立されてるとは言え、マニアックな処理をする場合（特にフォーム周り）はまだまだブラウザ間差異が発生してしまいます。だからまじめな用途でJavaScriptはやりたくねぇんだよなぁ。という愚痴は置いといて、 タイトルの件ですが、jQuery1.2.6+interface.jsのScrollToがSafariで動作しない問題が発生しました。 interface.jsは最近のjQueryに対応してないので、お決まりのdequeueを再定義する方法で使っていましたが、Safari3でチェックするとWin版Mac版両方とも滑らかにスクロールしません。 色々調べて真正面からの問題解決を試みましたが、ちょっと時間がなかったので別のプラグインを探すと、良い感じのがありました。 その名もScrollToというプラグインです。自分の用途には必要十分な代物です。 ScrollToプラグインを読み込んだあと、ページの読み込み完了のタイミングで以下を実行するようにすると、Safariでもうまく動きました。 $(‘a[href^=#]‘).click(function(){ $.scrollTo( $($(this).attr(‘href’)), {speed:1000,axis:’y’, queue:true} ); return false;}); このコードはこのページに載ってたのを少し改変したものです。