SQLの窓

2015年08月11日


Google Picasa サービスの URL を使用して、jQuery のスライダーでリアルタイムにサイズの違った画像を表示する

これは、Picasa サービスの URL 部分を変更すると、Picasa 側でそのサイズの画像を作成してくれる事の確認プログラムです。最近、Picasa の URL の仕様が少し変わり、"s長辺のサイズ" の後ろに "-Ic42" が付くようになりましたが、意味は謎です。

スライダーを動かすと、画像サイズが変化しますが、これはそのサイズの画像を表示しています。ブラウザは縮小も拡大もしていません。

この仕様は正式な文書は無いかもしれませんが、Picasa のサービス内でユーザが利用する文字列なので、Picasa サービスが余程の変更されない限り利用が継続できるはずです。

"s長辺のサイズ" 以外にも、"w横幅" と "h高さ" も使えますが、これは以前 Google+ の画像に使用されていたもので、現在も使えますが、この二つはいつ使えなくなってもおかしくない仕様です。(そもそも、Picasa も Google+ の画像も元は同じようです)

活用方法

この仕様と、正規表現の置換を用いれば、一つの URL から複数サイズの画像の URL を動的に作成できるので、簡単な使い方の例としては、表示画像(サムネイル)と目的画像というコンテンツを一度での用意です。




<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<link id="link" rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script>
var url = "https://lh3.googleusercontent.com/-CuiK3fGTUAw/Vak2SZiXCXI/AAAAAAAAbJM/RpiEqBN0hmw/s100-Ic42/56ce94dfc3fc6f3df8240e7b6cbbadc6.png"

$(function(){

	// 初期画像
	$("#picasa_img").prop("src", url);

	// スライダー
	$("#slider1").slider({
		range: "min",	// 左側を着色する
		step: 50,	// 50 づつ変更
		min: 50,	// 最小50
		max: 600,	// 最大600
		value: 100,	// 初期値
		// スライダーが変化した時のイベント
		slide: function (event, ui) {
			// src に無名関数の戻り値を設定する
			$("#picasa_img").prop("src", function(){
				// s100 部分の 100 を変更する為の正規表現を使った replace
				return url.replace(/\/s\d+\-Ic42\//, "/s"+ui.value+"-Ic42/");
			});
		}
	})
	.css("width", "400px")
	
});

</script>
<div id="slider1"></div>
<br><br>
<img id="picasa_img">



posted by lightbox at 2015-08-11 22:51 | jQuery UI | このブログの読者になる | 更新情報をチェックする
container 終わり

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

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