記事一覧

Slimbox + WDP

「迷える子羊」さんでLightbox設置が紹介されていましたので、
少し捻って(?)SlimboxをWDPに設置する方法を紹介。

※2007/10/27  IE6対策について追記

【SAMPLE】 ※Photo from BurningWell
ファイル 136-2.jpg

【参考サイト】
・Slimbox - mootoolsベースのLightboxライブラリ。(buena suerte!)
・slimboxを使ってみたい(m・fami)

≫以下、設置方法

Slimbox風にムービーを表示

ファイル 141-1.jpg

以前Slimboxの設置を解説しましたが、スクリプトを追加すると
動画もSlimboxと同じように表示することができます。

表示可能な動画はYoutubeMetacafeGoogle VideoiFilm
オリジナルのflash(.swf)も表示することができます。
JW FLV PLAYERと併用することで、flvファイルの再生も可能になっています。
(注:ニコニコ動画のようにログイン必須の動画サイトからは無理)

表示にはSlimboxのときと同じmootoolsを使います。
こちらのvideoboxは1つのパックの中に必要なもの(js、player)が
全て入っているため、設置がとても簡単なのも魅力です。

【参考元】 ※動作サンプルは最初のサイトにて
・Videobox: Lightbox for videos
・【ハウツー】ゼロからはじめるVideobox - Flashムービーにエフェクト効果

≫以下、設置方法

mootoolsで別窓表示

prototype.jsを利用した別窓表示はすでに解説されているのですが、
mootoolsを使った別窓表示は
英語で紹介されているものぐらいしか見当たらなかったので解説。
XHTML1.1 SE でなんとtarget復活?との話もありますが、まだ先の話になりそう。

【出来ること】
●target="_blank"の代わりにrel="popup"を使うことで
 リンクを別窓を開くことができる。XHTML1.0対策。
●開くウィンドウのサイズを決めることができる。
 (拍手やアンケートフォームなどに便利)

【参考サイト】
・moopop: “unobtrusive” popups with mootools | a pint of javascript (and general web stuff)

≫以下、設置方法

今後のメモ+α

やることメモ

今後のやるリスト。(=やる気を出して頑張る予定リスト)

●「MACARON」WGPスキン(30%完成)
●「BB II」WGPスキン(80%完成)
●「タグエディタ+ネタバレボタン改造」の配布パッケージ(これから)
●nicky版タグエディタ解説のリンク切れ修正
 (Internet Archiveにまだページが残っているので、その収集)

「mootools」を使うとWDPでも表現が広がりそう。
どうも自分の環境だとLightboxがモッサリめなので、
軽量(とのウワサ)のSlimboxを余力があれば追加実験してみたい。

拍手の別窓表示&target対策実験としてprototype.jsをすでに
導入してしまっているので、もし使うなら切り替えも含めて
やっていきませんと。

ブラウザを開きながらファイルを弄るなら、FireFox + FireBugいいよーと
薦められたので、こちらも今度試してみようと思います。
動作実験用だけじゃキツネさんがもったいない。

prototype.jsのあれこれ

そんなわけで、久しぶりにprototype.jpを1.4.0→1.5.1.1に
バージョンアップしようとしたところ、ファイルサイズが
約40KB→約90KB と、ほぼ倍の大きさになっていました滝汗
こんなの置けるか!と思っていたら、先人の偉大なる知恵がありました。

【prototype.jsを10KBにする方法】(亜細亜ノ蛾 - Weblog)

prototype.jsに限らず、色々な重いjsファイルを軽くできるとのこと。
実際、これで最新バージョンのprototype.jsが約90KB→約20KBと
ダイエットに成功。動作も問題なし。なるほど便利。
gzip圧縮はLhaplusの詳細設定>関連付け/シェルで
「gz」チェックを入れれば圧縮&解凍ができました。

ついでにprototype.jsでクロスブラウザなWYSIWIGエディタというのも
あったのでメモ。(本当に自分用メモもいいところ)

ページ移動