fc2blogでshadowboxを使用したいと思い

解決済

質問者：windowsweb
質問日時：2010/07/01 01:14
回答数：4件

fc2blogでshadowboxを使用したいと思い
http://pakun13.blog44.fc2.com/blog-entry-365.html
のブログの記事を参考にして、自分のブログに導入しようと考え、記事に書いてあるように、CSSを書き換えて、必要な画像、JSなどをアップロードをし、テンプレートの編集でHTML編集を書き換えて、使用しようとしたのですが、動画がポップアップ表示されませんでした。

参考サイトを順に追っていきますと

最初に参考サイト 1～3に書いてあるように jQueryとShadowbox jsをダウンロードして解凍しました。

次に、参考サイト 4～5 に書いてあるように、LICENSE、README、shadowbox css　以外ををfc2にアップロードして、shadowbox cssをメモ帳で開きに下記の6点を書き換えました。
○○○○にはアップロード先のURLが入ります。

{background:url(http://○○○○/loading.gif) no-repeat;padding-left:34px;display:inline-block;}
{background-image:url(http://○○○○/close.png);}
{background-image:url(http://○○○○/next.png);}
{background-image:url(http://○○○○/previous.png);}
{background-image:url(http://○○○○/play.png);}
{background-image:url(http://○○○○/pause.png);}

書き換えたshadowbox cssをfc2にアップロードして、テンプレートの編集で〈/body〉の上に

<script type="text/javascript" src="http://○○○○/jquery-1-4-2-min.js"></script>
<link rel="stylesheet" type="text/css" href="http://○○○○/shadowbox.css">
<script type="text/javascript" src="http://○○○○/shadowbox.js">
<script type="text/javascript">Shadowbox.init({language: 'ja',players: ['img', 'html', 'iframe', 'qt', 'wmp', 'swf', 'flv']});
</script>

を貼り付けて更新ボタンを押して、新しく記事を書くで

<a rel="shadowbox;width=動画の幅;height=動画の高さ" title="動画のタイトル" href="動画のＵＲＬ"><img src="サムネイル画像のＵＲＬ" width=サムネイルの大きさ border=0 </a>

を使用してみましたが、ポップアップされずに、youtubeに飛ばされるだけでした。

知識がないので、参考ブログを参考にして自分なりにやってみましたが、shadowboxを使用する事が出来ませんでした。説明が分かり難いかもしれませんが、時間がありましたら、アドバイスして頂けると有り難いです。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： yyr446
回答日時：2010/07/01 17:40

なぜ、ポップアップしないのか解った気がします。

あなたのページにはshadowbox.js本体だけしかないからです。
ユーチューブ再生には、他に
players/shadowbox-flv.js
players/shadowbox-swf.js
．．．．
とか個別にプレーヤーのJSファイルが必要です。とりあえず
最新のshadowboxに直リンクを張って、ADOBEのswfプレーヤーを使いましょう。

<script type="text/javascript" src="http://www.shadowbox-js.com/build/shadowbox.js" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">

</script>

記事本体
<div>
<a href="http://www.youtube.com/v/92KD9W0K_4c&fs=1&source … rel="shadowbox;width=320;height=240;title='浅田真央';player=swf">浅田真央</a></div>

- 0
- 件

通報する

この回答へのお礼

yyr446さん回答有難う御座います。

<script type="http://○○○○/player.swf" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">

</script>

を入れる事によって、ポップアップで表示するようになりました。
出来たときは、飛び上がって喜んでしまいました。
yyr446さんには本当に感謝しています。最後まで質問に回答をして頂き有難う御座いました。

通報する

お礼日時：2010/07/01 20:46

No.4

回答者： yyr446
回答日時：2010/07/01 20:27

わかりにくい回答で申し訳ない。

どうもおかしいと思い、ShdowBoxの本家サイトをよく見ると
ここ↓
http://www.shadowbox-js.com/index.html

つい最近、バージョンアップされて、本体JSとCSSが書き換わってた。
新しいバージョン(V3.03)は、ダウンロードしたZIPセットの中身を
そのまま同じディレクトリーに配置しておくだけで、何もいじらなくても
mimeタイプ毎に自動的にプレーヤーが切り替わるみたいだ。

（以前は、もっと細かくライブラリーが分かれていて、本体JSが動的に<script>
タグを生成して動的に読み込んでいた。）

　※でも、player=FLVを指定するとJWPLAYERが使われて、エラーが発生するみたいだ。
　　何か原因があるのかも．．．．

結論としては、下↓
http://www.shadowbox-js.com/download.html
のページで、全部のチェックボックスにチェックを入れて、ZIPをダウンロードして解凍したファイルで、
・Readme
・Licence
を除く10個のファイルをそのまま、FC2ブログにアップロードする。－－－(1)

テンプレート編集で、</head>の直前に

<link rel="stylesheet" type="text/css" href="http://blog-imgs-34.fc2.com/y/o/n/※※※※/shadowbox.css" />

を書く----(2)
　　（※※※※はあなたのアカウント）

その後に

<script type="text/javascript" src="http://blog-imgs-34.fc2.com/y/o/n/※※※※/jquery-142min.js" charset="utf-8"></script>
//jQueryは必須じゃないはずですが．．．
<script type="text/javascript" src="http://blog-imgs-34.fc2.com/y/o/n/※※※※/shadowbox.js" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">

</script>

を書く－－－－(3)
（※SCRIPTは<head>の中でなく、記事の中に書いてもよい）

本文記事に動画URLへのリンクを張る(player=swfとしていしておく）
<div style="text-align: center;"><br />
<a href="http://www.youtube.com/v/92KD9W0K_4c&fs=1&source … rel="shadowbox;width=320;height=240;title='浅田真央';player=swf">
浅田真央</a>
</div>

別に浅田真央の動画を進める訳じゃないですが．．．．　－－－－(4)

上記のやり方で、少なくとも私はできました。

- 0
- 件

通報する

この回答へのお礼

yyr446さん回答有難う御座います。

<link rel="stylesheet" type="text/css" href="http://blog-imgs-34.fc2.com/y/o/n/※※※※/shadowbox.css" />

<script type="text/javascript" src="http://blog-imgs-34.fc2.com/y/o/n/※※※※/jquery-142min.js" charset="utf-8"></script>

<script type="text/javascript" src="http://blog-imgs-34.fc2.com/y/o/n/※※※※/shadowbox.js" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">

</script>

でもポップアップ表示することが出来ましたので、こちらに変更しておきました。
何度も回答して頂き、有難う御座いました。

通報する

お礼日時：2010/07/01 22:28

No.2

回答者： yyr446
回答日時：2010/07/01 09:09

<a rel="shadowbox;width=動画の幅;height=動画の高さ" title="動画のタイトル;player=flv" href="YouTubeの再生用URL" ><img src="サムネイル画像のＵＲＬ" width=サムネイルの大きさ border=0 </a>

YouTubeの再生用URLとは、

:http://www.youtube.com/v/GrjgtS1t6aY&fs=1&source …
みたいなやつで、'GrjgtS1t6aY'がYouTubeVideoのIDです。

- 0
- 件

通報する

この回答へのお礼

yyr446さん何度も回答有難うございます。

http://www.youtube.com/v/GrjgtS1t6aY&fs=1&source …のようなURLを使用して見ましたが、ポップアップ表示されませんでした。

<a rel="shadowbox" title="画像のタイトル" href="画像のＵＲＬ"> リンク名 </a>の画像の方も試して見ましたが、やはりポップアップ表示されなかったので、他に問題があるのかも知れません。

本当になんども回答して頂き申し訳ないです。

通報する

お礼日時：2010/07/01 15:01

No.1

回答者： noname#119957
回答日時：2010/07/01 06:54

内容はわかりませんが。

。とにかく。。

書き換えたshadowbox cssをfc2にアップロードして、テンプレートの編集で
〈/body〉の上に　

>>この部分ですが。。head内に移動させてください。

<head>

<script type="text/javascript" src="http://○○○○/jquery-1-4-2-min.js"></script>
<link rel="stylesheet" type="text/css" href="http://○○○○/shadowbox.css">
<script type="text/javascript" src="http://○○○○/shadowbox.js">
<script type="text/javascript">Shadowbox.init({language: 'ja',players: ['img', 'html', 'iframe', 'qt', 'wmp', 'swf', 'flv']});
</script>

</head>