Home > 20080420


20080420

Shadowbox実装手順

Shadowbox実装方法(FC2blog向け)が、以下ブログで掲載しておりましたので、早速実装に向けてやってみた結果、実装成功しました。感謝です^^
FYI:以下が実現方法をご教授くださったブログ様です
RIAトピックス|Shadowbox.jsをFC2ブログで使ってみる

○実装手順

1.Shadowbox公式サイトへ移動
2.Shadowboxをダウンロード(ページ後半にあります)
3.解凍し、Shadowbox/buildフォルダ内にある以下3つをそのままアップロード

・css/shadowbox.css
・js/shadowbox.js
・js/adapter/shadowbox-yui.js
4.Yahoo! User Interface(YUI)から以下を取得し、アップロード
・yui-utilities.js
5.以下を <head>〜</head> 間に記述
※赤文字部分は自分の環境に合わせて記述してください
<link rel="stylesheet" type="text/css" href="http://○○○/file/shadowbox.css">
<script type="text/javascript" src="http://○○○/file/yui-utilities.js"></script>
<script type="text/javascript" src="http://○○○/file/shadowbox-yui.js"></script>
<script type="text/javascript" src="http://○○○/file/shadowbox.js"></script>
<script type="text/javascript">window.onload = function() { Shadowbox.init(); };</script>
上記手順が完了したら、次は画像とWebページに付加する <a> タグの属性です。「target="_blank"」を消して、赤文字部分を追記。
<a href="http://blog-imgs-29.fc2.com/b/l/a/blackcat13numbers/re5.jpg" rel="shadowbox"><img src="http://blog-imgs-29.fc2.com/b/l/a/blackcat13numbers/re5s.jpg" alt="re5.jpg" border="0" align="left"/></a><br clear="all" />

と記述すると
re5.jpg

これで完了です。実際にサムネイル画像をクリックしてみれば、どのような動作をするのかわかります。また、Shadowboxは画像のオーバーレイ表示だけではなく、動画(YouTube/Flashなど)やWebページも実現可能なので、追々説明したいと思います。

Home > 20080420

Recent Comments
Recent Trackback
Feeds

↑Page Top