最近の記事
(02/02)ブログ更新の終了について
(01/22)Picasaでテンプレートを使う 〜 操作方法を動画で解説
(01/13)ShoutMix と Skypeボタンを組み合わせた足跡帳 & チャットボックスの設置
(01/07)画像を使ったクールなスライド・メニュー 〜 imageMenu
(01/03)iPhone/iPodのカバーフロー表示をサイトやブログでも 続きその2
(01/03)イメージスライドスクリプト”noobSlide” 〜サンプル切り出しとボタン画像の利用
(12/31)iPhone/iPodのカバーフロー表示をサイトやブログでも 続き
(12/30)iPhone/iPodのカバーフロー表示をブログでも 〜 ImageFlowをブログで使うには
(07/03)たった1行のスクリプトでできること 〜 IEのJavascript高速化 / IE判定
(07/02)Seesaaブログカスタマイズ 記事ページング機能 / ソーシャルブックマーク機能
(07/02)ブログ記事でHTML/CSS/Javascriptなどのソースコードを綺麗に表示したい 〜 dpSyntaxHighlighter
(06/25)Javascript onloadが複数ある場合の対処法 〜FancyZoomとCubeブログシールを共存させる
(06/25)クールなズームアップを手軽に実現 〜 FancyZoom 1.1
(06/21)Webサイト/ブログのCSSを直感的に理解できるFireFoxアドオン 〜 EditCSS
(06/15)記事の中でHTMLタグを表示したい
(06/15)パンくずリストをつける
(06/12)Slimbox / Lightbox のキャプションにリンクを貼るには
(06/10)slimbox1.52 reflection1.3 バージョンアップへ対応
(05/31)mooSlideBox3.2 が動かない 〜 mooSlide2.jsの修正で解決
(05/28)Mootoolsパノラマ・スクリプト "Pamoorama" VS "Mediabox"+村上スクリプト
2008年05月31日

mooSlideBox3.2 が動かない 〜 mooSlide2.jsの修正で解決 この記事をはてなブックマークする |

Evernoteにクリップする

mooslide_logo.jpg リンクをクリックすると、ボックスがスライドしてきて内容をを表示できる”mooSlideBox

 LightBoxの一種ながら、LightBox/Slimboxとはまた違ったエフェクトでとてもクールです。

 ”mooSlideBox 3”では画面下からのスライドアップだけだったようですが、この5月に”mooSlideBox 3.2”が登場して画面上部からのスライドダウンも加わりました。 それぞれ上記リンクにあるデモで確認してみてください。

 さっそく私も”mooSlideBox 3.2”を設置してみることに。ところが・・なかなかうまくいきません。

 サイトのからダウンロードした”mooSlide2.js”をアップし、HTMLでmooSlide2の呼び出しと、Top、Bottom表示用に2つのリンクを記述してから、指示通りの方法でボックスを起動してみるのですが・・・・

  •  現象1 ボックスを呼び出す前に、最初からボックスの内容(文字)が画面に重なって表示されてしまう。
  •  現象2 リンクをクリックすると、Bottomからのボックスは表示されるが、Topについてはうまく表示されない。※実際は画面を下にスクロールしてみるとボックスは表示されているのですが、画面上からのスライド表示にはならない。

といった症状が起きてしまいます。



posted by 飛梅 at 17:28 | Comment(0) | TrackBack(0) | 日記 | このブログの読者になる | 更新情報をチェックする
2008年05月28日

Mootoolsパノラマ・スクリプト "Pamoorama" VS "Mediabox"+村上スクリプト この記事をはてなブックマークする |

Evernoteにクリップする

 Mootoolsを導入したので、あれこれMootoolライブラリを使ったスクリプトを紹介してみます。こちらはパノラマ・スクリプト”Pamoorama”で3月に撮影したバリ島サヌールの海岸の写真を表示。 現行バージョンは0.3 

Demo1:初期設定:自動スクロール


Demo2:初期設定:手動スクロール (画像にマウスを重ねるとスクロールします)


 ※当方で確認済の現症:
  サムネイルが枠から少々はみ出してしまいます(FireFox2.0の場合。IE7はOK)。
  自動スクロール中にマウスのスクロールボタンでページスクロールするとスクロールが
  止まってしまいます。一旦Stop Autoscrollを押し、再度Start Autoscrollを押すと治ります。

 360度スクロールも今後正式対応の予定とのこと。

 さてこちらをクリックすると、従来から使わせていただいている”瀬戸の夜景”:村上さんの作成スクリプト(以下村上スクリプト)を利用したパノラマを”Mediabox”で表示します。

 以前はこのように別ページで全画面表示させていたのですが、”Mediabox”を使えばWebページもLightbox風にオーバレイ表示できます。”Pamoorama”はLightbox風に表示できないので、記事中でパノラマ表示させたい場合は”Pamoorama”で、オーバレイ表示で見せる場合は”村上スクリプト”と、状況によって使い分けるのが良いと思います。

瀬戸の夜景 日本全国の素晴らしい夜景の数々をパノラマで楽しめます。スクリプトも秀逸!

posted by 飛梅 at 07:16 | Comment(0) | TrackBack(0) | 日記 | このブログの読者になる | 更新情報をチェックする
2008年05月26日

ムービーにLightbox効果を 〜 Mediaboxを使ってみる この記事をはてなブックマークする |

Evernoteにクリップする

 ここ数日来動作確認を行っていた”Mediabox”を正式運用開始しました。

 ”Mediaboxは、YouTubeやGoogle Videoなどのオンラインムービーだけでなく、Flash、QuickTime、WMVなどのムービー形式、さらにはWebコンテンツもLightbox風のエフェクトで表示できるスクリプトです。 現行バージョンは0.72

 ”mootools”ライブラリ上で動作するので、先日紹介した”Slimbox”との共存が可能。静止画/写真はSlimboxで、ムービー/Webコンテンツの表示はMediaboxでと使い分けています。

 なお、Mediabox同様、ムービーにLightbox効果を付けることができる”Videobox”を先週紹介したばかりですが、”Mediabox”の方がたくさんのムービーや、Webコンテンツにも対応していることから新たに設置しました。Videoboxは削除しても構わないのですが、関連記事をアップした経緯もあり、そのまま残しておきます。(従って、現在Slimbox,Videobox,Mediaboxが共存しています。)

 Firefox2.0 と IE7、IE6 (いずれもOSはWindowsXP)で動作確認済。IE5.5は非対応となります。

 私のブログのカラーに合わせて、ボタン用の画像を作り直し(オリジナルは背景色が黒または白のため)、CSSの中のオーバレイフレーム色の変更を行いました。CSSはSlimboxとMediaboxで共用しています。

  play Google video  play MetaCafe  play MySpace  play Revver  play YouTube

  play Veoh  play Viddler  play Vimeo  play DailyMotion  play Flickr video

  play flash animation  play flash video  play quicktime movie  play wmv file

  open inline content

  open Yahoo Movies  open Google.com

 ※ムービーが再生されない場合は、プラグインがインストールされていない場合があります。
   Flash Player :   Windows   MacOSX 10.4  Linux x86

posted by 飛梅 at 22:56 | Comment(10) | TrackBack(1) | 日記 | このブログの読者になる | 更新情報をチェックする
2008年05月24日

再構築が自動化!〜 Seesaaブログカスタマイズがさらに簡単に この記事をはてなブックマークする |

Evernoteにクリップする

 Seesaaブログで再構築が不要に! 

 カスタマイズの自由度がとても高いとして選んだSeesaaブログですが、これまでデザインやコンテンツ、HTMLの変更なブログ上の設定内容を変更した場合、実際のブログに反映させるためは必ず「再構築」を手動で行う必要があり、全ページに適用しようとすると、記事数が増えれば増えるほど時間がかかるのが難点でした。

 このため、もともと再構築の概念がない、WordPressなどへ切り替えも検討していたところだったのですが、5/22にSeesaaブログの機能強化が行われて、再構築が自動化されたのです。

posted by 飛梅 at 14:06 | Comment(0) | TrackBack(0) | 日記 | このブログの読者になる | 更新情報をチェックする
2008年05月17日

Lightbox風スクリプトの数々 この記事をはてなブックマークする |

Evernoteにクリップする

※おことわり:本記事アップ後にFancyZoomの導入により原則としてSlimboxと共存できなくなりましたが、一部コード改変によりSlimboxで起動できるようにしてあります。但しイメージセットでのNEXT,BACKボタンは表示できなくなりました。

Design Walkerさん のサイトでLightboxスクリプトの数々が紹介されています。

それだけLightboxが使われているということなのでしょう。

どれにしようか目移りしそうですね。

このブログでは、Slimbox + Videobox の組み合わせですが、今後別のブログではまた違ったものを試してみようかしら。

でもSlimboxのように仕様がLightboxと同じ rel=”lightbox” ならいいのですが、それぞれに記述が異なると、過去記事を全部書き換えなくてはいけないので面倒です。

またmootoolsやprototypeなどのライブラリを使っている場合は、複数を組み合わせて使うとバッティングして動かないなどの不具合が生じるのでダウンロード前に確認が必要です。

posted by 飛梅 at 07:07 | Comment(0) | TrackBack(0) | 日記 | このブログの読者になる | 更新情報をチェックする
2008年05月16日

Lightbox / Slimbox とVideoboxの共存 IE6でのエラー対策 この記事をはてなブックマークする |

Evernoteにクリップする

※おことわり:本記事アップ後にVideoboxに追加してMediaboxも設置しています。なおFancyZoomの導入により現在オリジナルではSlimboxと共存できませんがなくなりましたが、一部コード改変によりSlimboxと共存できるようにしました。但しSlimboxではイメージセットでのNEXT,BACKボタンは表示できません。

  写真などの画像のサムネイルをクリックすると、背景が暗くなって画面中央にオリジナル画像がハイライト表示される”Lightbox”、最近はあちこちのサイトで見かけるようになりました。今回は”Lightbox”に、さらにYouTubeなどのFlashムービーをLightbox風に表示してくれるという”Videobox”をブログに追加で設置してみました。 

videobox.jpg紆余曲折ありましたがやっと表示されるようになりました。サンプルがこちら。または左の画像をクリックするとYouTubeがLightbox風に表示されます。

  実は静止画、動画を問わずまとめてLightbox風に表示してくれる”Lightwindow”を1ケ月ほど前に試してみたのですが、現在IE6ではうまく表示できないようで、せっかく設置したのに仕方なく断念。

そんな折、Gigazineさんの記事で”Videobox”を知りました。

posted by 飛梅 at 07:36 | Comment(1) | TrackBack(0) | 日記 | このブログの読者になる | 更新情報をチェックする
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。