Home > 20080420


20080420

Shadowbox実装手順
Shadowbox実装方法（FC2blog向け）が、以下ブログで掲載しておりましたので、早速実装に向けてやってみた結果、実装成功しました。感謝です^^
FYI：以下が実現方法をご教授くださったブログ様です
RIAトピックス｜Shadowbox.jsをFC2ブログで使ってみる
○実装手順
１．Shadowbox公式サイトへ移動
２．Shadowboxをダウンロード（ページ後半にあります）
３．解凍し、Shadowbox/buildフォルダ内にある以下3つをそのままアップロード
・css/shadowbox.css
・js/shadowbox.js
・js/adapter/shadowbox-yui.js
４．Yahoo! User Interface（YUI）から以下を取得し、アップロード
・yui-utilities.js
５．以下を <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

Search
Adsense

Calendar
« 2008/04 »
S M T W T F S
- - 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 - - -
Categories
Tagcloud
Archives
Recent Comments
Recent Trackback
Feeds

↑Page Top