記事一覧

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)

≫以下、設置方法

ページ移動