Shadowbox.js と Google ストリートビュー


  A 要素と rel 属性による通常呼び出しで実装します




shadowbox は、ブラウザが標準モードでしか動作しませんので、IE の場合は注意です

▼ クリックすると shadowbox が起動します
エッフェル塔
風車

ggv_pano_basic.php と shadowbox を使ったリンクの作成

w=600&h=400 のようにしてストリートビュー側も大きさを変更をできますが( デフォルト600x400 )、
サイズは shadowbox と一致させて下さい。


Shadowbox_sview

実際のテストは、こちらで出来ます

右側の一番下のテキストエリアへ shadowbox 用のリンクを貼り付けて、shadowbox
ライブラリのチェックを付けてプレビューが可能です




関連する記事

Google ストリートビュー埋め込みライブラリ
パノラマパーツの使い方 :琴線に触れる
( 座標の取得方法はこちらをご覧下さい )
Google ストリートピューを表示させたまま、移動してAPI用貼り付けコードを取得していくオンラインサービスの使い方
( 移動しながらの座標の取得方法はこちらをご覧下さい )


関連する外部リンク

DOCTYPE スイッチの一覧表












  ggv_pano_basic.php で単独の単純なストリートビューを表示します




  

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

$api_key
 = 'サイトの Map APIキー';

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&v=2&sensor=false&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>
  

  補足 : shadowbox オプション

2010/02/17 現在、3.0.1 でこのオプションが動作しないようなので注意して下さい

▼ 以下をごらん下さい
Shadowbox.js : 3.0.1 使用時の注意事項

options={counterType:'skip',continuous:true}

counterType:'skip' は、ページリンクが左下に表示されるようになります
continuous:true は、最後と最初の間を前後ナビゲートで移動できるようになります

エッフェル塔
風車

  

<a
	rel="shadowbox[sview2];width=600;height=400;options={counterType:'skip',continuous:true}"
	href="http://lightbox.on.coocan.jp/ggv_pano_basic.php?a=48.857288&b=2.294404&c=8.24369085737899&d=-40"
>エッフェル塔</a>
<br>
<a
	rel="shadowbox[sview2];width=600;height=400;options={counterType:'skip',continuous:true}"
	href="http://lightbox.on.coocan.jp/ggv_pano_basic.php?a=52.34176&b=4.792075&c=162&d=-24"
>風車</a>
  




yahoo  google  MSDN  MSDN(us)  WinFAQ  Win Howto  tohoho  ie_DHTML  vector  wdic  辞書  天気 


[shadowbox]
claudebot
24/04/18 16:01:42
InfoBoard Version 1.00 : Language=Perl

1 BatchHelper COMprog CommonSpec Cprog CprogBase CprogSAMPLE CprogSTD CprogSTD2 CprogWinsock Cygwin GameScript HTML HTMLcss InstallShield InstallShieldFunc JScript JScriptSAMPLE Jsfuncs LLINK OldProg OracleGold OracleSilver PRO PRObrowser PROc PROconePOINT PROcontrol PROftpclient PROjscript PROmailer PROperl PROperlCHAT PROphp PROphpLesson PROphpLesson2 PROphpLesson3 PROphpfunction PROphpfunctionArray PROphpfunctionMisc PROphpfunctionString PROsql PROvb PROvbFunction PROvbString PROvbdbmtn PROvbonepoint PROwebapp PROwin1POINT PROwinSYSTEM PROwinYOROZU PROwindows ProjectBoard RealPHP ScriptAPP ScriptMaster VBRealtime Vsfuncs a1root access accreq adsi ajax amazon argus asp aspSample aspVarious aspdotnet aw2kinst cappvariety centura ckeyword classStyle cmaterial cmbin cmdbapp cmenum cmlang cmlistbox cmstd cmstdseed cmtxt cs daz3d db dbCommon dbaccess dnettool dos download flex2 flex3 flex4 framemtn framereq freeWorld freesoft gimp ginpro giodownload google hdml home hta htmlDom ie9svg install java javaSwing javascript jetsql jquery jsp jspTest jspVarious lightbox listasp listmsapi listmsie listmsiis listmsnt listmspatch listmsscript listmsvb listmsvc memo ms msde mysql netbeans oraPlsql oracle oracleWiper oraclehelper orafunc other panoramio pear perl personal pgdojo pgdojo_cal pgdojo_holiday pgdojo_idx pgdojo_ref pgdojo_req php phpVarious phpguide plsql postgres ps r205 realC realwebapp regex rgaki ruby rule sboard sc scprint scquest sdb sdbquest seesaa setup sh_Imagick sh_canvas sh_dotnet sh_google sh_tool sh_web shadowbox shgm shjquery shvbs shweb sjscript skadai skywalker smalltech sperl sqlq src systemdoc tcpip tegaki three toolbox twitter typeface usb useXML vb vbdb vbsfunc vbsguide vbsrc vpc wcsignup webanymind webappgen webclass webparts webtool webwsh win8 winofsql wmi work wp youtube