琴線に触れる

表示されている画像は、YouTube の埋め込みで最初に表示されているものです。
Shadowbox の内部は、結局同様の埋め込みコード(Object)が使用されています。

以下は、YouTube の URL に含まれる 動画ID より Shadowbox の埋め込みコード
を作成するものです。( Shadowbox は自動的に組み込まれます)

関連する記事

設置用コードとソースコード

現在の最新は 3.0.3 ですが、この数日で殆ど整理してしまいました。
まだ続くのですが、こちらのほうも更新です。IE はやはり標準モード
でないと完全な動作はしないです。いちおう動くのですが、スクロール
するようなページの途中では使え無いようです。

Shadowbox.js 3.0.3 の正統な使い方

(1) ダウンロード、setup メソッドで事前にギャラリーを定義
(2) YouTube の動画を表示する
(3) 大きな画像を表示する
(4) Windows Media Player を正しく使えるようにする
(5) flv 動画を表示する
(6) Panoramio の画像ギャラリーを Google MAP API経由で表示する


通常のブログですと、DOCTYPE 入っているので問題は無いと思います

あちこちのブログ

JUGEM
ココログ
livedoor
エキサイトブログ

エキサイトブログはちょっといろいろあるので、興味のある人は以下を
参照してみて下さい。


この下にあるツールで、ブログに貼り付けてすぐ使えるコードを作る
事ができます。YouTube のページの URL の ID部分(文字列)を取って
来て貼り付けるだけです

テストはこちらの、「EUC標準モード」でテストできます。

詳細としてどこが変わったかは確認できていませんが、自分が投稿した
拡張子が大文字の場合に動作しなかったものを対応してくれたと返事が
投稿されてました。


実は、もうひとつ問題をみつけているのですが、対処が可能かどうかまだテストしていません。
SWFObject の 2.1 を既にロードしているとエラーになりますが shadowboxは動作します。

2.2 なら動くと思うのですが、まだテストしていません。

今日明日のうちに、3.0.2できちんとテストする予定です

で、2.2だと確かにエラーも出ずに使えているみたいですが、気持ち悪いので
shadowbox.js 内の SWFObject を使ってみると、一応使えたので、選択肢は
いくつかあるという事でまあ、納得です。

Shadowbox.flash.embedSWF(
	"https://nurd.up.seesaa.net/file/ggmap.swf",
	"ggmap118013765", 
	"600",
	"500",
	"9.0.0",
	"",
	flashvars,
	params,
	attributes
);

Sizzle.js を使用しているとの事なので、見に行ってみると、Selectors Level 3
が全て実装されているとの事です。とりあえずいくつか試しましたがたしかに動作します
とても使いやすいと想像できるいくつかのセレクタを以下にで簡単に説明します
( Sizzle では " は省略できるとあります )
=> Sizzle doesn’t require quotes around the specified value in an attribute selector

1) 属性の完全一致 : E[foo="bar"]
例 a[att=a_01_001]
arr という属性を作成してその値が一致する a 要素

2) 属性の前方一致 : E[foo^="bar"]
例 a[att^=a_]
arr という属性を作成してその値が a_ で始まる a 要素

3) 属性の後方一致 : E[foo$="bar"]
例 a[href$=.html]
拡張子が .html の URL をリンクしている a 要素

4) 属性の部分一致 : E[foo*="bar"]
例 a[href*=exteriors]
URL に exteriors が含まれる a 要素

5) 属性の-(ハイフン)より前の一致 : E[foo|="bar"]
例 a[att|=ja]
arr という属性を作成してその値が ja- で始まる a 要素

※ 特に、4) で適当な文字列を使うと、予期しないものが含まれるので注意です

いくつかのバリエーションですが、実際ギャラリーで動作しています。

Shadowbox.init は文字通り初期化用のメソッドで、全体で共通の環境を設定
した上で、コールバック関数を指定して個別の設定を行う関数を第二引数に
指定しています。ここではインラインで指定していますが、関数を別に定義
して関数名を指定する事もできます。

ここで全体指定は一般的に言われる「連想配列」のような書式で一括で渡
されており、counterLimit は、表示するページリンクの最大数です。読み込
む時に全体を覆うペース色を overlayColor で黒を指定し、その時の透過度
を overlayOpacity で指定しています。オリジナルのデフォルト値と説明は
こちらにあります。

Shadowbox.setup は、単純にはクラス毎のグループで設定を行うメソッドで
厳密には第一引数でセレクタを指定します。例では、a.クラス名 でグループ
化していますが、オリジナルページでは、'a[title="Sweetness"]' というよう
な指定も行っており、これは外部ライブラリのSizzle.js を使用しているとの
事です。

第二引数はやはり「連想配列」のような書式で一括でプロパティをセットし
ており、gallery が shadowbox[ギャラリー名] に対応する値になります。
continuous と counterType はセットで使い、ページリンクを作成して直接
リンクを作成すると同時に最後から最初、最初から最後とループして順に移動
できる事を意味します。

width と height はそれぞれ指定できますが、両方指定しているのはサイズ
固定の Google ストリートビュー用です、横幅のみ固定は外部のブログを内部
に表示しています。YouTube 用はさらに player で SWF を直接埋め込む事を
意味します。

最後のセットでは、slideshowDelay を指定してスライドショーの時間を指定
していおり、デフォルトの 0 ですとスライドショーにはなりません。スライド
ショーの時のみ一時停止/再生アイコンが表示され、スペースキーで切り替わり
ます。


ちなみに、ウインドウを閉じるのは ESC か Q か X です。

Shadowbox.init(
{
	counterLimit:20,
	overlayColor:'#000000',
	overlayOpacity:0.6
},
function () {
	Shadowbox.setup("a.light", {
		gallery: "light",
		continuous: true,
		counterType:"skip"
	});

	Shadowbox.setup("a.ggpano", {
		gallery: "test",
		width: 800,
		height: 600,
		continuous: true,
		counterType:"skip"
	});

	Shadowbox.setup("a.blog", {
		overlayColor: "#123456",
		width: 1075,
		gallery: "blog",
		continuous: true,
		counterType:"skip"
	});

	Shadowbox.setup("a.youtube", {
		gallery: "youtube",
		width: 835,
		height: 505,
		player: "swf",
		continuous: true,
		counterType:"skip"
	});

	Shadowbox.setup("a.main", {
		gallery: "main",
		continuous: true,
		counterType:"skip",
		slideshowDelay: 6
	});
});

Shadowbox 3.0.1 は、2010/02/16 バージョンです。3.0 Final で、Flash が表示
されない不具合に対応されたものですが、作者さんの配布時のミスのようですが、
細かい事を言うと 3.0 Final のほうで対応されていた事が欠落しています。

1) Japanese でダウンロードした場合、使用時に charset="utf-8" が必要です

これは、作者さんが「コンパイラ」による作業行ってるせいだとは思いますが、
3.0 Final 内では日本語がコード化されていたのに対して( \u8aad\u8fbc\u4e2d )
3.0.1 では、生のUTF-8の日本語で書かれているので、発生します。

利用ページが UTF-8 以外だと問題が出ます
( ブラウザ別の検証はしていませんが・・・ )

これは、利用者側で対応できるので Forum には書き込んでいません。


2) 画像ファイルの拡張子が大文字の場合、画像と認識せずにHTML扱いになる

これについては Forum に書き込みましたが、小さな事なので当分変わらない
だろうとは思います。先の Flash はすぐ対応されましたが、これは自分のように
デジカメで撮った画像データを使い慣れていなかったせいで発生したので誰も
あまり気にしてないでしょうし。でも、3.0b では対応されていたんですが。


3) 3.0b で動作していたrel内で書く options= が動作しない

これは、メインページのサンプル的に言うと仕様変更ぽいのですが、他の説明
ページでは特に言及されていません。3.0b の時も、Flash のオプションはrel
でうまく行かなかったし、Flash は誰もそういう使い方をしなかったでしょうが、
options={counterType:'skip',continuous:true} という使い方は利用していた
人も居ると思うので注意です。

それにこれに関しては代替方法があるのでそちらで対応するのが今後のメンテ
ナンスも効率が格段に良くなります。

以下が現在自分が使っているコードのサンプルです

<script type="text/javascript">
function setAll() {
	Shadowbox.setup("a.light", {
		gallery: "light",
		continuous: true,
		counterType:"skip"
	});
	
	Shadowbox.setup("a.ggpano", {
		gallery: "test",
		width: 800,
		height: 600,
		continuous: true,
		counterType:"skip"
	});
	
	Shadowbox.setup("a.story", {
		gallery: "story",
		continuous: true,
		counterType:"skip"
	});
	
	Shadowbox.setup("a.gimp", {
		gallery: "gimp",
		continuous: true,
		counterType:"skip"
	});
	
	Shadowbox.setup("a.mono", {
		gallery: "mono",
		continuous: true,
		counterType:"skip"
	});
	
	Shadowbox.setup("a.blog", {
		overlayColor: "#404040",
		width: 1075,
		gallery: "blog",
		continuous: true,
		counterType:"skip"
	});
	
	Shadowbox.setup("a.garou", {
		overlayColor: "#404040",
		width: 1075,
		gallery: "garou",
		continuous: true,
		counterType:"skip"
	});
	
	
	Shadowbox.setup("a.tegaki", {
		gallery: "tegaki",
		continuous: true,
		counterType:"skip"
	});
	
	
	Shadowbox.setup("a.youtube", {
		gallery: "youtube",
		width: 835,
		height: 505,
		player: "swf",
		continuous: true,
		counterType:"skip"
	});
	
	Shadowbox.setup("a.review", {
		gallery: "review",
		continuous: true,
		counterType:"skip"
	});
	
	Shadowbox.setup("a.main", {
		gallery: "main",
		continuous: true,
		counterType:"skip",
		slideshowDelay: 6
	});
}
Shadowbox.init(
	{
		counterLimit:20,
		overlayColor:'#000000',
		overlayOpacity:0.6
	},
	setAll
);
</script>

今解ったのですが、今朝早くに作者さんが修正かけてくれたのでなおってます。
現在バージョンは 3.0.1 になっています
以下はそれを知る前に書いた記事です

比較的非力な PC で、IE8 で動かすと、アニメーションが良く無いです。
実は、ソースコード的には、IE7とIE6 でテストした形跡があるのですが、
IE のフラグがあるにもかかわらず、常に false になっています。それで
IE8 が動く以上、ブラウザ間の差がかなり無くなったという事なんだと思います
が、IE を嫌ってた人たちはここぞとばかりに、IE7( IE6 ) を駆逐にかかる
んでしょうね。この Shadowbox がいい例です。

実際は、IE7 と IE6 でまだうちのサイトでは半分以上のシェアがあります。
(ブラウザ比率 in SQLの窓)

とうぶんこんな事よく起きそうですね・・・・



というか、Google の円グラフのライブラリが IE8 でうまく
動いてないようですが・・・。
クリックしたらデータが表示されるはずなのに出ないですね。
で、互換モードアイコンをクリックすると動くのですが、そもそも
もともと DOCTYPE 書いて無かったので、互換のはずなのですが、
DOCTYPE を書いて標準モードにしたら、最初からうまく表示されました。
その場合、Firefox と表示が同じで、互換モードにしても完全に
IE6 の表示とは同じにならないですね。



めんどくさいなぁ:-(

そもそもの始まり、3.0b を使っていて、IE7環境で使っている shadowbox
が 他の Flash と喧嘩して「インターネットサイトが表示できません」という
IE のよくある現象が出たのがはじまりで、この問題は IE の問題なので、
記述する位置や構造で変わるので対症療法しかありません。

でも、shadowbox がバージョンアップしていたらどうにかなってるかも・・
と思って見に行ったら( 2/12 )、前日の 2/11 に Version 3.0 Final が
出ているという偶然にぶちあたったわけで。

で、実装してみると Flash が動きません。いろいろ変わっていて、ロード
時のアニメーションがスムーズになっているし、日本語対応だし、IEが標準
モードでなくても動くので「やった!!」と思ったのですが、残念・・・
( flv プレーヤーも同梱されます )

なもんで、なんとかしようと思ってコード読んで Flash に関しては正しく
動くように変更できたのですけれど、大きなサイズの画像をリサイズする時
に( Firefox も ) 右端に空白空いてスクロールバーが出てみっともない状態
になります。しかたないので、今さっき Forum に投稿してきました

IE7(IE6) 
Flash does not work. 
v.ie is always false; 
I think IE needs classid for OBJECT element. 
I changed it. 
And then work. 

More. 
Width is not resized with a relatively big image definitely 

sorry my english. 

ひでぇ英語ですが、背に腹は変えられません・・・

いろいろやってみましたが、shadowbox でストリートビューを表示するには、
ストリートビューは単独の URL で表示されるようにして呼び出す以外はうまく動きませんでした。

エッフェル塔
風車

<a
	rel="shadowbox[test];width=600;height=400"
	href="http://winofsql.jp/ggv_pano_basic.php?a=48.857288&b=2.294404&c=8.24369085737899&d=-40"
>エッフェル塔</a>

<?
header( "pragma: no-cache" );
header( "Expires: Wed, 31 May 2000 14:59:58 GMT" );
header( "Cache-control: no-cache" );

$api_key = 'ABQIAAAADuryzsZi1CenwhafsPEvzBTlxX6exlqfox7R3DL2rE86SPuTyhTaQ7BUC2tKBidUAEn1fGLxVVQR1A';

if ( $_GET['w'] == '' ) {
	$_GET['w'] = 600;
}
if ( $_GET['h'] == '' ) {
	$_GET['h'] = 400;
}

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title></title>

<script	src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=<?= $api_key ?>" type="text/javascript"></script>

<script type="text/javascript">
var myPano;
var mylat,mylng;

function initialize() {

	myPano = new GStreetviewPanorama(document.getElementById("pano"));
	var fenwayPark = new GLatLng(<?=$_GET['a']?>,<?=$_GET['b']?>);
	myPOV = {yaw:<?=$_GET['c']?>,pitch:<?=$_GET['d']?>,zoom:0};
	myPano.setLocationAndPOV(fenwayPark, myPOV);
	GEvent.addListener(myPano, "error", handleNoFlash);
	GEvent.addListener(myPano, "initialized", getTargetLatLng);

}

function handleNoFlash(errorCode) {

	if (errorCode == 603) {
		alert("Error: Flash doesn't appear to be supported by your browser");
		return;
	}
}

function getTargetLatLng(myLocation) {
	mylat = myLocation.latlng.lat();
	mylng = myLocation.latlng.lng();
	try {
		parent.document.getElementById("lat").value = mylat;
		parent.document.getElementById("lng").value = mylng;
		parent.iframePano = myPano;
	}
	catch(e){};
}

</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div name="pano" id="pano" style='width:<?= $_GET['w'] ?>px;height:<?= $_GET['h'] ?>px;'></div>
</body>
</html>

twitvideo のサイズは、ちょうどブログにいいサイズで、
picasa のサイズはかなり大きめです。

しばらく使ってみて、問題なければいい組み合わせだと思うのですが