パリで撮影されたPanoramioの写真の中から、「restaurant」というタグが付けられた写真セットを写真リストウィジェットで表示。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Panoramio JavaScript API | 設置サンプル</title>
<link rel="stylesheet" href="/content/lib/global.css" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<!-- PanoramioのJavaScript APIを読み込む -->
<script type='text/javascript' src='http://www.panoramio.com/wapi/wapi.js?v=1&hl=ja'></script>
<script type="text/javascript">
$(function(){
/* ウィジェットの見た目を指定 */
var myOptions = {
"width":320, /* ウィジェットの幅(px) */
"height":220, /* ウィジェットの高さ(px) */
"croppedPhotos":true, /* 写真トリミング有効 */
"columns":4,
"rows":3,
"orientation":"horizontal" /* 垂直方向 */
}
var myOptions2 = {
"width":220, /* ウィジェットの幅(px) */
"height":350, /* ウィジェットの高さ(px) */
"croppedPhotos":true, /* 写真トリミング有効 */
"columns":3,
"rows":4,
"orientation":"vertical" /* 水平方向 */
}
/* リクエストを指定 */
var myRequest = {
/* エリア：フランス パリ */
"rect": {'sw': {'lat': 48.7978487, 'lng': 2.224162500000034}, 'ne': {'lat': 48.9153104, 'lng': 2.4802813000000015}},
/* タグ：'cafe' */
"tag": "restaurant"
};
/* 写真リストウィジェットを生成 */
var widget = new panoramio.PhotoListWidget('wapiblock', myRequest, myOptions);
var widget2 = new panoramio.PhotoListWidget('wapiblock2', myRequest, myOptions2);
/* ウィジェットを表示 */
/* 写真の表示開始位置を指定 */
widget.setPosition(0);
widget2.setPosition(0);
});
</script>
<style type="text/css">
/* ウィジェットのスタイル指定 */
#wapiblock2 .panoramio-wapi-photolist,
#wapiblock .panoramio-wapi-photolist { /* 枠 */
border:1px solid #aec8e8;
}
#wapiblock2 .panoramio-wapi-images,
#wapiblock .panoramio-wapi-images { /* 背景色 */
background-color: #d2e6f4
}
</style>
<link rel="stylesheet" type="text/css" href="/common/css/example.css"></head>
<body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP & JavaScript Room</a> :: 設置サンプル</h1>
<h3 class='h'>実行結果</h3>
<h1>設置サンプル：Panoramio JavaScript API</h1>
<h2>写真リストウィジェット</h2>
<p>パリで撮影されたPanoramioの写真の中から、「restaurant」というタグが付けられた写真セットを写真リストウィジェットで表示。</p>
<hr />
<h3>horizontal</h3>
<div id="wapiblock"><!-- ウィジェットの表示領域 --></div>
<hr />
<h3>vertical</h3>
<div id="wapiblock2"><!-- ウィジェットの表示領域 --></div>
</body>
</html>