JAMADAM.COM

無駄にAjaxだらけにしてみた。Ajaxってパーマリンクっていう概念と相反する気がするので適用しどころが難しいなあ。このサイトは悪い例かも。

前まで使ってたthickbox jqueryプラグインをやめて、jQuery lightBox pluginに変えた。thickboxは設計が我流でjQueryの文化に馴染んでなくて使いづらい。

iGoogle風レイアウトにはEasyWidgetsプラグインをやめて、自作プラグインにした。

JSバリバリにするにあたり、apacheのdeflateモジュールってのをアクティベートし、gzip転送するようにもした。

コメント送信周りは全然いじってないのでページ遷移してしまう。本当はこの辺が一番Ajaxの使いどころなんだけど、来週末に持ち越し。

jQueryプラグインが増えてきたので、全自動で圧縮&連結するようにしてみた。PerlモジュールのJavaScript::Minifierってのを使ったらエラーもなくあっさりでした。thickboxプラグインてのは、ちょっと改造しないと連結できなそう。jQueryのコアはGoogle AJAX Libraries APIにおまかせし、jQuery UIはGoogleでのバージョンがrc版に追いつくまでは自サバで連結。キャッシュ機構も用意してサクサクだぜ。

jQueryプラグインのThickbox3.1を使って、このブログのエントリー中の画像を全部、クリッカブルにしてみた。例えば、左の画像もクリックすると、元画像がかっこよく表示される予定。

DBのエントリ中にタグを埋め込むのは大変なので、全自動。

<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
    
    // Setup for thickbox
    $('.sentences img').each(function () {
        
        var url = $(this).attr('src').replace(/¥?.+/, '');
        var alt = $(this).attr('alt');
        
        $(this).wrap(
            "<a href='%1' title='%2' class='thickbox'></a>"
            .replace('%1', url)
            .replace('%2', alt)
        );
    });
});
//]]>
</script>

<script type="text/javascript" src="/lib/js/jquery.thickbox.js"></script>
<link rel="stylesheet" href="/lib/js/thickbox/thickbox.css" type="text/css" media="screen" />

注意点としては、thickboxが内部で$(document).readyを使用してるので、読み込む手前でwrapする。

[2008/10/22追記]
おっと、IE6で正常動作してなかった。自分で書いたCSSにbody{position:relative}としてたせい。必要なかったので外したら直った。