Panoramiaの写真でフランス国内で撮影された写真の内、下記の条件で写真を表示します。
<!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>
<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":340,
"height":220,
"columns": 5,
"rows":3,
"croppedPhotos":true /* 写真のトリミング表示有効 */
}
/* リクエスト */
var myRequest = {
/* エリア指定：フランスの境界((42.1331639, -5.982052000000067), (50.0380022, 10.409549999999967)) */
"rect": {'sw': {'lat': 42.1331639, 'lng': -5.982052000000067}, 'ne': {'lat': 50.0380022, 'lng': 10.409549999999967}}
};
function review(flag){
switch(flag){
case "ALL":
myRequest["set"]=panoramio.PhotoSet.ALL;
break;
case "PUBLIC":
myRequest["set"]=panoramio.PhotoSet.PUBLIC;
break;
case "RECENT":
myRequest["set"]=panoramio.PhotoSet.RECENT;
break;
}
/* 写真リストウィジェット */
var wapiblock = document.getElementById('wapiblock');
var widget = new panoramio.PhotoListWidget(wapiblock, myRequest, myOptions);
widget.setPosition(0);
}
review($("input[name='set']:checked").val());
$("input[name='set']").change(function(){
review($("input[name='set']:checked").val());
});
});
</script>
<style type="text/css">
#wapiblock .panoramio-wapi-photolist { /* 枠 */
border:1px solid #aec8e8;
}
#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>
<p>
Panoramiaの写真でフランス国内で撮影された写真の内、下記の条件で写真を表示します。
</p>
<hr />
<form>
<p>
set: panoramio.PhotoSet.
<label for="set_1"><input type="radio" id="set_1" name="set" value="ALL" checked />ALL</label>
<label for="set_2"><input type="radio" id="set_2" name="set" value="PUBLIC" />PUBLIC</label>
<label for="set_3"><input type="radio" id="set_3" name="set" value="RECENT" />RECENT</label>
</p>
</form>
<div id="wapiblock"></div>
</body>
</html>