Home

TRASH

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Shadowbox実装手順@質問回答

最近Shadowbox実装に関するご質問をいただいたので、回答も兼ねて私の使用しているファイルを掲載しようかと思います。というか、的確な回答ができない(yui-utilitiesが私も見つけられず)ことから使用しているファイルを掲載するのでダウンロードしてくれ的な強引な対応になってしまいました・・・。
ブログ内で紹介しているShadowboxが、バージョンアップなどの理由でディレクトリ構成が変わっているため、Shadowbox.css/.jsファイルの正確な場所・ファイルがどれかわからない。
YUI(Yahoo! User Interface)へアクセスし、yui-utilitiesというJavaScriptファイルを探してはいるのだが、どこにも見当たらないため、ダウンロードすることができない。

よって、必要な4つのファイルを以下に掲載したいと思います。もちろん、私の環境下で動作しているので、cssなどはご自身の環境・レイアウトに合わせてカスタマイズください。css編集については別途cssリファレンスなどをご利用ください。
shadowbox.css
shadowbox.js
shadowbox-yui.js
yui-utilities.js
当然ですが、各ファイルを開き「名前を付けて保存」をし、ローカルに保存後、ご自身のブログでアップロードを行ってくださいね。もちろん、保存時のテキストは「EUC」で保存ください。

ファイルをローカル保存後、ブログのファイルアップロードが完了しましたら、以下の実装手順をご参照の上、HTMLに必要な記述を行い、Shadowboxの対象にしたい画像に都度記述をしてください。詳細な実装手順については以下参照ください。
Shadowbox実装手順

Shadowbox応用:動画に実装させる

Shadowboxはサムネイル画像のオーバーレイ表示だけではなく、動画(YouTube/Flashなど)やWebページも実現可能なのです。そこで、今回はYoutubeを使って動画に適用させる手法を紹介したいと思います。

サンプルは以下の通りです。
※音声もでるので、ご注意ください。
世田谷花火大会

記述方法は、Youtubeに掲載されている動画の「埋め込み」部分に記載されているタグに着目します。
<object width="425" height="355">
<param name="movie" value="http://www.youtube.com/v/e0VKw1rhb_M&hl=ja"></param>
<param name="wmode" value="transparent"></param>
<embed src="http://www.youtube.com/v/e0VKw1rhb_M&hl=ja" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed>
</object>
※本来のタグは、改行されていません

上記、赤文字部分を以下のように入れることで、Shadowboxに適用させることができます。
<a href="http://www.youtube.com/v/e0VKw1rhb_M" rel="shadowbox;width=425;height=355" title="世田谷花火大会" >世田谷花火大会</a>
まとめてみると、あまり画像と変わりありませんでした。アンカータグ内にrel属性を加えて動画URLを貼り付けておくだけで基本は実装できそうです。

Shadowbox応用:複数のWebページをグループ化してまとめる

以下の記事で実装方法やサンプルを掲載しました。
●Shadowbox実装手順

今回は、このShadowboxを使った応用として、複数のWebページをグループ化してまとめる手法を紹介したいと思います。ページをグループ化することで、拡大した画像の下に「Close」だけではなく、「Previous」と「Next」リンクを付けてページ遷移を容易にし、ユーザビリティを向上させることもできます。

サンプル(テキストリンク)とコードは以下の通りです。
Google
Yahoo! JAPAN
MSN Japan
<a href="http://www.google.co.jp/" rel="shadowbox[hogehoge]" title="Google">Google</a>
<a href="http://www.yahoo.co.jp/" rel="shadowbox[hogehoge]" title="Yahoo! JAPAN">Yahoo! JAPAN</a>
<a href="http://jp.msn.com/" rel="shadowbox[hogehoge]" title="MSN Japan">MSN Japan</a>
※[]内のhogehogeは任意ですが、グループ化するには同じ文字を入力ください

次にサンプル(画像リンク)とコードはテキスト同様、以下の通りです。
Google
20080516_1.png
Yahoo! JAPAN
20080516_2.png
MSN Japan
20080516_3.png
Google
<a href="http://www.google.co.jp/" rel="shadowbox[hogehoge]"><img src="http://blog-imgs-29.fc2.com/b/l/a/blackcat13numbers/20080516_1s.png" alt="20080516_1.png" border="0" align="left"/></a><br clear="all" />Yahoo! JAPAN
<a href="http://www.yahoo.co.jp/" rel="shadowbox[hogehoge]"><img src="http://blog-imgs-29.fc2.com/b/l/a/blackcat13numbers/20080516_2s.png" alt="20080516_2.png" border="0" align="left"/></a><br clear="all" />MSN Japan
<a href="http://jp.msn.com/" rel="shadowbox[hogehoge]"><img src="http://blog-imgs-29.fc2.com/b/l/a/blackcat13numbers/20080516_3s.png" alt="20080516_3.png" border="0" align="left"/></a><br clear="all" />
今回はWebページに絞りましたが、次回はFlashやYouTubeなどの動画をオーバーレイさせる方法を紹介したいと思います。

Home

Recent Comments
Recent Trackback
Feeds

↑Page Top

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。