SQLの窓

2015年07月17日


jquery.balloon.js + Google ドライブの webViewLink(仮想ディレクトリ) + Google ストートビュー画像

▼ Google ドライブに以下のような img 要素による HTML 記述を書いた、.txt ファイルを置いています
<img src="http://maps.googleapis.com/maps/api/streetview?size=300x200&location=48.873321%2C2.295613&fov=90&heading=-40.96&pitch=18.1&sensor=false" style="border: solid 1px #000000">
これは、Google の API を使用して、ストリートビューの一場面を画像化したものです。


jQuery + jquery.balloon.js + jQuery UI のエフェクトを使用してバルーンにアニメーション効果を適用しています。バルーンの中の HTML データは、Google ドライブの WEB ホステング機能を使ってテキストとして置いて、ajax で呼び出しています。

関係するページ
jquery.balloon.js のダウンロードと使い方のページ

jQuery プラグイン jquery.balloon.js で、画像吹き出しを使って吹き出しの中央に文章を配置する

Google Street View Image API
( Google Street View Image API では、JavaScript を使用せずに、静的(非インタラクティブ)なストリートビューのパノラマ画像やサムネイルをウェブページに埋め込むことができます。)

ストリートビュー内で移動しながらリアルタイムで画像 URL を取得するサービス
Google ドライブの 『webViewLink』という仮想ディレクトリは、access-control-allow-origin:* を返してくれるので、一般ブログ内からでも利用する事ができます。 アニメーションに関しては、slide では二回目以降に失敗する事があり、Firefox で顕著でした。これはテキストコンテンツではあまり起きなかったので、画像を使っている事が影響していると思います。jQuery のアニメーションは、特殊なものは環境や大きさ等が原因で失敗するものもあるようです。 凱旋門のストリートビュー写真が右から アニメーションするバルーンの中に表示 されます url の内容を ajax で取得して HTML としてバルーン内のコンテンツとして使用していまが、jquery.balloon.js では、url オプションの内容を ajax で読み込んで、バルーンの中身として使用してくれます 最初の スクリプトは、jQuery 関係のロードですが、ブログの記事毎に必要な場合のみロードする方法です
<script>
if ( !window.jQuery ) {
	document.write("<"+"script src=\"//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"></"+"script>");
}
</script>
<script>
if ( !window.jQuery.ui ) {
	document.write("<"+"link rel=\"stylesheet\" href=\"//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css\">");
	document.write("<"+"script src=\"//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js\"></"+"script>");
}
if ( !window.jQuery.balloon ) {
	document.write("<"+"script src=\"http://winofsql.jp/js/jquery.balloon.min.051.js\"></"+"script>");
}
</script>
<style>
.balloon_ajax {
	width: 300px;
	cursor: pointer;
}
</style>
<script>
$(function() {
	$( ".balloon_ajax" ).balloon(
		{
			url: "https://googledrive.com/host/0B9Jymqpro6gSVlB5Wm52U29wTlE/ajax/street_view_img.txt",
			showDuration: 400,
			showAnimation: function(d) {
				this.show( {
					effect: "slide", direction: "right",
					duration: d,
					easing: "swing" 
				}); 
			},
			hideAnimation: function(d) {
				this.hide( {
					effect: "slide", direction: "right",
					duration: d,
					easing: "swing" 
				}); 
			},
			position: "right",
			tipSize: 20,
			offsetY: 0,
			offsetX: 30,
			css: {
				width: "300px",
				height: "200px",
				opacity: "1",
				color: "#333",
				fontSize: "16px",
				borderRadius: "10px",
				border: "solid 2px #A63814",
				padding: "10px"
			}
		}
	);

});
</script>
<pre class=w6>



<div class="balloon_ajax" id="slide_right_386699574"><img src="https://lh4.googleusercontent.com/-0l8Fqu9YYeE/VGWSwZ65BLI/AAAAAAAAXi4/3FWfh92yL8M/s198/mouse_over.png" style="border: solid 1px #000000" />
<b>凱旋門のストリートビュー写真が右から
アニメーションするバルーンの中に表示
されます
</b></div>
</pre>
この JavaScript のコードは、リアルタイム HTML で実行できます

▼ GN-キルゴを使った画像は、フリーフォントで簡単ロゴ作成で作成できます。



関連する記事



【プラグイン:jQueryの最新記事】
posted by lightbox at 2015-07-17 18:22 | プラグイン:jQuery | このブログの読者になる | 更新情報をチェックする
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり