KATALog

MooTools JavaScript Framework を使ったAjaxを紹介。

SqueezeBox – Expandable Lightbox (v1.1)

おなじみAppleのサイトで使われていたポップアップウィンドウです。
利点は、通常のポップアップではないので、ポップアップブロックされる心配がないこと。

Lightbox2.0と違う点は、画像だけでないく、htmlやform、YouTube Flashを表示できます。
iFrameを使えば何でも表示できます。

使い方は簡単。

まず、上記SqueezeBox – Expandable Lightbox (v1.1)のページから下記ファイルをダウンロードします。

• MooTools JavaScript Framework
  ここで必要なコードは「Element.Dimensions」「Fx.Tween」「Fx.Morph」「Selectors」「JSON」「DomReady (facultative)」※うまく動かない場合はすべてチェックするとうまくいきます。Download Optionsでは「YUI Compressor」を選択しましょう。最高圧縮ファイルにしてくれます。
• SqueezeBox.rar (Package with source and assets)
  これは、「SqueezeBox.js」「SqueezeBox.css」と画像パーツが入ったパッケージ。rarはちょっと特殊な圧縮ファイルなので、rarが解凍できる解凍ファイルを探してみてください。

あとは、下記の方法を参考にしてやってみよう。

• Ajax Requests htmlを表示できるタイプ
• From Elements フォームを表示できるタイプ
• IFrame Content iFrameを使って表示するタイプ（おすすめ）
• Single Images Lightboxのように画像を表示するタイプ
• Youtube Flash You Tube やFlashを表示させるタイプ

MooToolsは色々できるね〜。
面白い。
サンプルを紹介しているサイト発見。こちら

–制作メモ

最近、katalogの表示速度が速くなったって思いませんか？
特に２回目以降の場合。

もともと、WordPressを使っているkatalogはphpで動いてるサイト。
そのため、毎回ゼロからデータを読み込んでいました。

今回それを改善するため、htmlをキャッシュさせて、データの読み込みを少なくしました。

キャッシュってなんだ？って方はこちらでお勉強してね。

さて、WordPressをキャッシュさせるアメコミに出てきそうなプラグインを紹介します。

「WP Super Cache」

かっこいい名前じゃん！語感がいいよね。

でも全部英語です。不安な方は、わーどぷれすっ！に日本語リソースがあります。
ダウンロードしたwp-super-cache-ja.moを以下のディレクトリにアップするだけです。

/wp-content/plugins/wp-super-cache/languages

.

これでkatalogも快適になったかな？
WordPressのみなさんもお試しあれ。

–制作メモ

katalogがiPhoneで見やすくなりました。
iPhoneの皆さん、これからもkatalogをよろしくお願いします！

行ってきました！

初！大阪！

夏から計画していた「サンチェス大阪ツアー」
今回旅をナビゲートしてくれたのは、大阪のことならなんでも知ってるノリさん！（下写真）
まず、ノリさんに感謝！ありがとう！

大阪に行く前に、大工のタケちゃんの強い要望であった奈良にある「唐招提寺」へ。
平成の大工さんも昔の大工さんには負けてません。すばらしい平成の大修理でした。
大棟の左右にそびえる鴟尾は見事なもので、職人が手間暇かけて作り上げたもの。

そんな、すばらしい建物を拝観した後は、京都で一杯。
いざ大阪！

大阪はキタからミナミへ！
活気ある町並みは、いつもお祭り！
周りからは「あかん」やら「行かれへん」やら普段聞き慣れない言葉が飛び交っていました。
生なんでやねん！には感動！

主張しまくったバカでかい看板看板看板

チカチカネオン

ブォンブォン暴走族

ピンクの女の子たち

さっぱり塩ラーメン　うまかった〜

森ちゃん

えべっさん

食って飲んで食って飲んで・・・

5時まで飲んで・・・

安藤 忠雄（偶然お会いしました）

井上雄彦　最後のマンガ展！

帰りはヘトヘト

充実した１泊２日の旅。

最後に行った井上雄彦　最後のマンガ展はツアーの〆としては最高のイベントでした。

タネ明かしはしません。

一つ言えることは、この展示会のことは一生忘れられない。ということ。

すばらしい展示会でした。

http://www.flow-er.co.jp/osaka/houmei.html

画像のマウスオーバーをきもちよ〜くする方法。

サンプルはBOOMBOOM-BASHのGllary

フワッとした感じがたまらない★

必要なものは、jQueryとちょっとしたJavascriptだけ。

まず、jQueryは、Google AJAX Libraries APIを使うと便利。

AJAX Libraries API についてはこちら

今回使うjQueryのURLは「http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js」

これをhead内に書く。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2/jquery.min.js"></script>

ちょっとしたJavascriptはこれ

$(document).ready(function() {
  $(".gallery a img")
  .hover(
    function() {
      $(this).fadeTo(200, 0.5);
    },
    function() {
      $(this).fadeTo(500, 1.0);
    }
  );
});

↑の表記だと改行、余白がうまくとれないので、サンプルを用意しました。

.hover(
function() {
    $(this).fadeTo(200, 0.5);

これは、オンマウス時200ミリ秒の速度で、透明度50%になるという意味

function() {
     $(this).fadeTo(500, 1.0);

これは、マウスアウト時500ミリ秒の速度で、透明度100%になるという意味
ちなみに、0にすると、透明になる。

– 制作メモ