- 2008-04-20 (Sun)
- IT Tips
- Tips
- JavaScript
- CSS
- Shadowbox
Category :
Tags :
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> 間に記述
※赤文字部分は自分の環境に合わせて記述してください
と記述すると
これで完了です。実際にサムネイル画像をクリックしてみれば、どのような動作をするのかわかります。また、Shadowboxは画像のオーバーレイ表示だけではなく、動画（YouTube/Flashなど）やWebページも実現可能なので、追々説明したいと思います。
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">上記手順が完了したら、次は画像とWebページに付加する <a> タグの属性です。「target="_blank"」を消して、赤文字部分を追記。
<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>
<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" />と記述すると
これで完了です。実際にサムネイル画像をクリックしてみれば、どのような動作をするのかわかります。また、Shadowboxは画像のオーバーレイ表示だけではなく、動画（YouTube/Flashなど）やWebページも実現可能なので、追々説明したいと思います。
- Next Entries : Highslide JS応用：画像にタイトルを付加する
- Prev Entries : Tabs Generator：ナビメニュータブのジェネレータサイト
Comments:2
- universe URL 2008-07-23 (水) 04:19
はじめまして、FC2フォーラムから拝見させて頂きましたm(__)m
shadowboxを実装したいのですが、Shadowbox公式サイトへ行っても、
安宅同じcssやjsファイルがなのです･･･。fullバージョンでDLしたのですが････。
少しファイル名が変わってstyle.cssなどああるのですが･･･。
又、yui-utilities.jsが見つかりません(>_<)
助けてぇ下さい。どこのULに行けば入手可能なのでしょうか？
大したblogではありませんが装飾していてきたいのでご教授お願い致します。m(__)m- TomomiX URL 2008-07-23 (水) 23:33
> universe さん
こんばんわ。
ご質問ありがとうございます。確かにShadowboxバージョンアップ？の原因か
ディレクトリ構成が変化していますね。YUIでのjsも先程見たら私も見つけられず。。
なので、私が使っているファイルをご自身でダウンロードいただきご利用ください。
今回のご質問の回答を最新記事にて掲載しておきましたので、ご確認ください。
手順にご不明な点ありましたらお気軽にコメント・質問くださいね。
Trackback+Pingback:1
- TrackBack URL for this entry
- http://blackcat13numbers.blog31.fc2.com/tb.php/189-ba862690
- Listed below are links to weblogs that reference
- Shadowbox実装手順 from TRASH