Script is OFF
HOME > IT Tips > Shadowbox:Lightboxの万能版・進化系JavaScript

Shadowbox:Lightboxの万能版・進化系JavaScript

Category : IT Tips | | CM [0] | TB [1] 
Tag : Tips * JavaScript * Shadowbox * ツール * 無料・フリー *
Prev:ちょびリッチ
Next:Glossy:画像をJavaScriptでiPhoneアイコン風に変換
Shadowbox

上記サイトをまずご覧ください。
自分のブログでは適用できなかったので(かなり残念)デモも使用方法も詳しく書けません。このShadowboxでは、画像のオーバーレイ表示だけではなく・・
●動画(YouTube/Google Video/拡張子「mov」「mpeg4」「wmv」など)
●Flash(Flash Video/拡張子「swf」など)
●Webサイト(これは驚き!)


こんなにも活用できる素晴らしいJavaScriptなのです。リンク先のWebサイトをオーバーレイ表示させても、その中のリンクなども勿論有効で、また更にオーバーレイ・・・というユニークなこともできる。

また、Lightboxと違う点としてフレームワークが、prototypeだけではなく複数あること。その他のフレームワークとして・・
●prototype
●jQuery
●mootools
●YUI(Yahoo! User Interface Library) ...etc

記事一番上の「Shadowbox」リンクからJavaScript・css・imagesなどを一式ダウンロードし、サーバにアップロード。フレームワークをどれか選び(自分はprototype)アップロード。アップしたJavaScriptやフレームワークを呼び出すScriptも記述。最後、対象画像のrel属性にshadowboxを入れて終了。

とりあえずやれることはやったが、実装できず。誰かFC2Blogで実装できた方、教えてください・・・。(自分は理解力乏しいのでわかりやす〜く教えてください;)

■2008年4月20日
実装できました。現在のお気に入りは「Shadowbox」と「Highslide」で固定しました。「Shadowbox」では、Webサイトのポップアップや画像のスライドショー的な表現を。「Highslide」では、純粋にサムネイル画像をコンパクトに、そして拡大表示をクールにしたいという要件を満たすようにしました。


関連エントリー

ランキング参加中☆クリック投票お願いします
ブログランキング・にほんブログ村へ
ブログランキングサイトに登録中です
人気ブログランキング  P-NETBanking  ブログの殿堂  ブログ王ランキング

コメントの投稿


管理者にだけ表示を許可する

トラックバック

http://blackcat13numbers.blog31.fc2.com/tb.php/91-b72233ed
この記事にトラックバックする(FC2ブログユーザー)

Lightbox実装手順

○実装手順 1.Lightbox公式サイトへ移動 2.Greybox最新版をダウンロード 3.解凍し、gifファイルをすべてアップロード 4.css/jsファイルをア...

FC2ブログ 紹介予定派遣

Design byLoco-net::blog