Home > スポンサー広告 > Shadowbox実装手順


スポンサーサイト

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

 Comments:-

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も先程見たら私も見つけられず。。
なので、私が使っているファイルをご自身でダウンロードいただきご利用ください。
今回のご質問の回答を最新記事にて掲載しておきましたので、ご確認ください。
手順にご不明な点ありましたらお気軽にコメント・質問くださいね。

Comment Form

 Trackback+Pingback:-

TrackBack URL for this entry
http://blackcat13numbers.blog31.fc2.com/tb.php/189-ba862690
Listed below are links to weblogs that reference
スポンサーサイト from TRASH
Trackback from 彷徨う黒の言霊 2008-06-02 (月) 00:34

ブログのリニューアル

ここ2~3日は、ここのブログのカスタマイズに没頭中。 以前のテンプレートでも良かったのだけれど、と言うかテンプレートってプラグイン... (more…)

Home > スポンサー広告 > Shadowbox実装手順

Home > IT Tips > Shadowbox実装手順


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ページも実現可能なので、追々説明したいと思います。

 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も先程見たら私も見つけられず。。
なので、私が使っているファイルをご自身でダウンロードいただきご利用ください。
今回のご質問の回答を最新記事にて掲載しておきましたので、ご確認ください。
手順にご不明な点ありましたらお気軽にコメント・質問くださいね。

Comment Form

 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
Trackback from 彷徨う黒の言霊 2008-06-02 (月) 00:34

ブログのリニューアル

ここ2~3日は、ここのブログのカスタマイズに没頭中。 以前のテンプレートでも良かったのだけれど、と言うかテンプレートってプラグイン... (more…)

Home > IT Tips > Shadowbox実装手順

Recent Comments
Recent Trackback
Feeds

↑Page Top

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