--年--月--日 --:--

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

Shadowbox js に変更しました。

2010年03月14日 17:17

先日、videobox を実装したと記事にしたと思うのですが、その経験を元に今度は shadow box を実装しました。

そこで忘れない為にも実装方法を記事にしたいと思います。
FC2ブログでの実装のやり方です。

video box は 動画しか対応していないのに対し shadow box はさまざまな事が出来ます。

shadow box の特徴として

JavaScriptのライブラリは、下記の中から好きなものを選べます。

jQuery
Prototype + Scriptaculous
YUI
Ext(standalone)

拡大表示できるメディアは以下の通りです。

画像(PNG, JPEG, GIFなど)
動画(FLV, QuickTime, Window Media Player)
ウェブページ

また拡大する際のコードは

画像の場合は
<a rel="shadowbox" title="画像のタイトル" href="画像のURL"> リンク名 </a>

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

赤色の部分を変更してください。

※ユーチューブのURLを入力するとユーチューブのページが表示されてしまいますので貼り付けコードの中にあるURLを貼り付けるようにしてください。
cats_20100314134940.jpg
<object width="853" height="505"><param name="movie" value="http://www.youtube.com/v/oUdQT4bfPP0&hl=ja_JP&fs=1&color1=0x5d1719&color2=0xcd311b&hd=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></paramembed src="http://www.youtube.com/v/oUdQT4bfPP0&hl=ja_JP&fs=1&color1=0x5d1719&color2=0xcd311b&hd=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="853" height="505">
青色の部分をコピーしてください。

ここでワンポイントとして

動画をHDで再生したい場合はURLの最後に &hd=1 と記述してください。
http://www.youtube.com/v/oUdQT4bfPP0&hd=1

動画を自動再生したい場合はURLの最後に &autoplay=1 と記述してください。
http://www.youtube.com/v/oUdQT4bfPP0&autoplay=1

同時にしたい場合はこのように記述してください。
http://www.youtube.com/v/oUdQT4bfPP0&hd=1&autoplay=1

いろいろと書きましたが意外と簡単です!
僕はコードをメモ帳に保存してそこからコピペしています。そうすればURLを変更するだけでいいですもんね(笑)

続いて導入方法です。
1、jQueryに行きJavaScriptのライブラリをダウンロードします。
cats_20100314141557.jpg

2、Shadowbox jsに行きダウンロードする。 2010/03/14現在 ver3.03
このときに adapter を jQuery にし全ての項目にチェックを入れ language を English にして ZIP からダウンロードする。
Shadowbox.js #187; Download
 
3、ダウンロードしたshadowbox js を解凍する。
こんな感じになるはずです。
cats_20100314144610.jpg

4、LICENSE、README、shadowbox css 以外を FC2のアップロードする。
FC2はファイルを1個づつしかアップロード出来ません。

5、shadowbox cssを開きコードを書き換えます。
cats_20100314164752.jpg
赤色の所を先にアップロードしたURLに置き換えてください。

6、shadowbox cssをアップロードします。

これで下準備完了です!

ここからはテンプレートをいじります。

7、テンプレートの編集のHTML編集の中にある 〈/body〉 の上に以下のコードを挿入します。
  (テンプレートは使っているやつを複製してバックアップを取っておいて下さい)

<script type="text/javascript" src="jqueryjsのURL"></script>
<link rel="stylesheet" type="text/css" href="shadowbox cssのURL">
<script type="text/javascript" src="shadowbox jsのURL">
<script type="text/javascript">Shadowbox.init({language: 'ja',players: ['img', 'html', 'iframe', 'qt', 'wmp', 'swf', 'flv']});
</script>

赤色の部分を先にアップロードした各URLに書き換えてください。
こんな感じになります。
cats_20100314170219.jpg

8、更新ボタンを押してテンプレートを更新してください。

9、新しく記事を書くで何でもいいので試してみてください。

僕はこれで実装できました。もし、出来なかったらごめんなさい。
これ以上教えれるPCスキルは僕には無いので各自が調べてください^^;
また、導入にあたりテンプレートがおかしくなった等があっても自己責任でお願いします!

難しいとは思いますがPCの勉強がてらにはもってこいだと思います。
皆さんも一度試してみてください。
テンプレートがおかしくなれば複製したテンプレートに戻せばOKです(笑)
スポンサーサイト


コメント

  1. がく | URL | -

    No title

    おっぉぉぉぉ
    だいぶがんばったね(*´ω`*)
    おいらもなんか導入しようかなぁ
    どうしましょう(*ノ∀ノ)

  2. paaakun | URL | -

    No title

    がくさん
    (o・ェ・o)ノコンバンワ

    shadowboxいいですよ~^^
    これ一つで画像だけでなく動画、リンク先も表示できます^^

    ブログをかっこよくするためのオススメ品があれば教えてくださ~い!!

  3. キュウゾウ | URL | -

    No title

    おぉ
    お疲れ様です^^

    自分も検討しようかしら・・・・
    なんか記事みるだけでお腹いっぱいの感もw

  4. nori1002 | URL | -

    No title

    うにょーん、僕も導入しようかな。
    導入する時は教えてくださいね!
    でも、大変そうなので今は見送りです......

  5. paaakun | URL | -

    No title

    みなさん
    (o・ェ・o)ノコンバンワ
    2人とも導入しちゃってください!
    わからなければ教えますよ^^
    楽しみに待ってますヾ(・∀・o)ノ

  6. motu | URL | pamUQ3n2

    こどもが入院してて最近顔だせてません(T_T)

    復活したらまた遊んでね

  7. paaakun | URL | -

    No title

    motuさん
    (o・ェ・o)ノコンバンワ
    お子さん大丈夫ですか?
    よくなるまでついていてあげてくださいね^^
    また、復活したらやりましょう♪

  8. AE | URL | UzUN//t6

    すげーッス

    ="shadowbox jsのURL"></script>

    これが抜けていましたね。
    それ入れたら自分もできました。すごいです、このわからない人視点での説明。
    ありがとうございました。

コメントの投稿

(コメント編集・削除に必要)
(管理者にだけ表示を許可する)

トラックバック

この記事のトラックバックURL
http://pakun13.blog44.fc2.com/tb.php/365-e71c9e30
この記事へのトラックバック



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