どうも、Rrです。
今回はプロジェクトZENDはお休みし、少し脱線してlightwindowを使ってみました。
前々から使ってみたかったんですよね。これ
だって、見栄えがかなり良いじゃないですかっ！！
使いこなせれば、ユーザビリティの高いページを作ることが出来ます♪
ただ、逆にうまく使いこなせなかったときには逆効果になっちゃいますけどね。。。
今回はプロジェクトZENDはお休みし、少し脱線してlightwindowを使ってみました。
前々から使ってみたかったんですよね。これ
だって、見栄えがかなり良いじゃないですかっ！！
使いこなせれば、ユーザビリティの高いページを作ることが出来ます♪
ただ、逆にうまく使いこなせなかったときには逆効果になっちゃいますけどね。。。
参考はゼロからはじめるLightWindow 2.0 - Flashムービーも表示できるAjaxライブラリです。
まずは、画像を表示してみよう。
JPEG画像を表示
画像を表示
もう一枚JPEG画像を表示
どうやら、movavle typeでは問題なく使えるようだ。
最初に行き詰ったところはローディングの画像が表示されないこと。
これに関しては「lightwindow.js」を「images/」で検索して、現在使用している画像フォルダを指定してあげれば解決した。
さて、どんどん薦めていきます。
次は画像の複数表示
おぉ出来たっ
これに関しても、PREVとかNEXTの画像が最初現れなかった。
jsのほうは変更したし、残るはCSSかなと思い検索してみるとやはり画像の指定があった。
そこを変更することで、PREVやNEXT及びGALLERYスペースのの背景のも表示される用になった。
うん、快適♪
次にフラッシュを試して見ます。
FLASHを表示
ここでも少し詰まりました。
aタグのclassに「lightwindw page-options」を指定し、paramオプションでheightとwidthを指定してやらないと、FLASHがうまく動きませんでした。ふーむ、なぜだろう・・・
最後に動画を載せてみよう。
FLVの動画を再生するFLASH「JW Player」を使って動画を再生してみる。
動画を再生
まずは、画像を表示してみよう。
JPEG画像を表示
画像を表示
もう一枚JPEG画像を表示
どうやら、movavle typeでは問題なく使えるようだ。
最初に行き詰ったところはローディングの画像が表示されないこと。
これに関しては「lightwindow.js」を「images/」で検索して、現在使用している画像フォルダを指定してあげれば解決した。
さて、どんどん薦めていきます。
次は画像の複数表示
おぉ出来たっ
これに関しても、PREVとかNEXTの画像が最初現れなかった。
jsのほうは変更したし、残るはCSSかなと思い検索してみるとやはり画像の指定があった。
そこを変更することで、PREVやNEXT及びGALLERYスペースのの背景のも表示される用になった。
うん、快適♪
次にフラッシュを試して見ます。
FLASHを表示
ここでも少し詰まりました。
aタグのclassに「lightwindw page-options」を指定し、paramオプションでheightとwidthを指定してやらないと、FLASHがうまく動きませんでした。ふーむ、なぜだろう・・・
最後に動画を載せてみよう。
FLVの動画を再生するFLASH「JW Player」を使って動画を再生してみる。
動画を再生
コメントする