RIAトピックス
リッチクライアント/RIAを主テーマに取り扱います。Flex、Ajax、AIR、Silverlight、JavaFX、etc。
スポンサーサイト
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Shadowbox.jsをFC2ブログで使ってみる
こんなコメントを頂いたのでトライして見ました。

実はあのエントリーを書いた時点では
Shadowbox.jsを使ったことが無く、
何を隠そう、今回が初体験だったのですが、
せっかくヒマだったしご指名をいただいたことだし、と
ちょっとやってみた次第です。

で、その結果が以下です。


サムネイルをクリックしてみて下さい。





ポイントを以下で簡単に説明していきます。

まず、こちらのサイトからShadowbox.jsをDLして下さい。
サンプル付のものをDLすると
実際にローカルで動かせるので動作を確認し易いです。


Shadowbox.jsを使うと、Flashムービーなどでも
同じようなことが行うことが出来るんですが、
今回はとりあえず画像の拡大表示のみを行いました。

必要最低限のモジュール群は以下。
 ・shadowbox.css
 ・yui-utilities.js
 ・shadowbox-yui.js
 ・shadowbox.js


これらの読込の他、Shadowbox.jsの機能を
起動させる為に、以下のJavaScriptを記述する必要があります。

window.onload = function() {
    Shadowbox.init();
};


次が肝心の画像の指定です。
<a rel="shadowbox"
  href="拡大表示時の画像名" title="画像タイトル">
  <img src="サムネイル画像名" alt=""></a>


上記では画面幅の都合上、改行させていますが、
本当は改行させないで、一行で書くのが望ましいです。

<img>タグには拡大表示したい画像ファイルを、
<a>タグのhref属性にはサムネイル画像ファイルを
それぞれ指定します。

ポイントは<a>タグのrel属性に
"shadowbox" を指定することです。

ただ、"shadowbox"のみを指定すると
拡大表示した画像が
ウィンドウサイズに合わせてリサイズされてしまうので
"shadowbox;options={handleLgImages:'none'}"
を指定することでサイズを固定できます。

また、
"shadowbox;options={handleLgImages:'drag'}"
を指定すると、画像を覗き窓から覗くような
エフェクトをつけることができます。
この場合はマウスドラッグで覗く位置を変えることも可能。



私はこういうことを試す場合、普段なら
FC2ブログの制約を受けるのが嫌いなので
大抵実装済みのHTMLごとアップロードして
window.open()とかで別ページに開くようにしちゃうのですが、
今回はあえてFC2ブログ上で実装することにこだわってみました。


FC2ブログ上でこれらを実施する為のコツは

 絶対に改行しない!!

です。

本当はFC2でJavaScriptを使う為の
ルールが存在するのでしょうが
マニュアル読むのがメンドイので早く結果を見てみたかったので、
今回は直接書く方法を色々と試した結果、
この結論にたどり着きました。

CSSファイル読込タグやJSファイル読込タグを記述する際、
途中を改行すると、勝手に改行コードを入れられてしまい
うまく動作しなくなってしまいました。
今回は全部で4ファイルを読み込んでますが、
それを避ける為に、全てを一行に収めています。


こんな感じ。

<link rel="stylesheet" type="text/css" href="shadowbox.css"><script type="text/javascript" src="yui-utilities.js"></script><script type="text/javascript" src="shadowbox-yui.js"></script><script type="text/javascript" src="shadowbox.js"></script><script type="text/javascript">window.onload = function() { Shadowbox.init(); };</script>

まぁカッコワルイですが、しゃーないですね。
今度ちゃんとマニュアルを読んでみます。
(その前に運営サイドに怒られたらどうしよう…)


Shadowbox.jsを使うと、YouTubeプレイヤーに対しても
同じようなエフェクトが使えるようになります。
私はまだ試せていませんが、近々トライしてみたいです。



ヨウイチ
スポンサーサイト

テーマ:プログラミング - ジャンル:コンピュータ

コメント
この記事へのコメント
なんか一回目はきちんと動いてないですね。
ページをリロードしても、直後の一回目は失敗します。
二回目以降はきちんと動きますが。

firefoxです。
2008/04/19 (土) 18:58:19 | URL |   #-[ 編集]
はじめまして。
Shadowbox.jsですが
6/30に2.0 RC1にバージョンアップしてますね。
スキンとプレイヤーがフォルダ形式になっているので
FC2だと無理なんでしょうか。

2008/07/06 (日) 00:48:44 | URL | ねむぞう #z8Ev11P6[ 編集]
コメントを投稿する
URL:
Comment:
Pass:
秘密: 管理者にだけ表示を許可する
 
トラックバック
この記事のトラックバックURL
この記事へのトラックバック
copyright © 2005 RIAトピックス all rights reserved.
Powered by FC2ブログ.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。