任意に指定した写真セットを表示するサンプル。ここではパリの凱旋門の写真を集めてみました。
<!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":360,
"height":220,
"columns": 6,
"rows":2,
"croppedPhotos":panoramio.Cropping.TO_FILL
}
/* リクエスト */
var myRequest = {
"ids":[
{'photoId': 16365869, 'userId': 1662714},
{'photoId': 30149354, 'userId': 3968724},
{'photoId': 59723765, 'userId': 341731},
{'photoId': 61955771, 'userId': 1850516},
{'photoId': 29049775, 'userId': 2341793},
{'photoId': 60984787, 'userId': 4272273},
{'photoId': 53880245, 'userId': 4208745},
{'photoId': 547292, 'userId': 116341},
{'photoId': 2330395, 'userId': 101009},
{'photoId': 43182870, 'userId': 2972027},
{'photoId': 20789715, 'userId': 873463},
{'photoId': 1558077, 'userId': 78506},
{'photoId': 6495866, 'userId': 1081020},
{'photoId': 4743304, 'userId': 799809},
{'photoId': 7812842, 'userId': 151365},
{'photoId': 57679492, 'userId': 3452687},
{'photoId': 60984787, 'userId': 4272273},
{'photoId': 1558077, 'userId': 78506}
]
};
/* 写真リストウィジェット */
var widget = new panoramio.PhotoListWidget('wapiblock', myRequest, myOptions);
widget.setPosition(0);
});
</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>任意に指定した写真セットを表示するサンプル。ここではパリの凱旋門の写真を集めてみました。</p>
<hr />
<h3 class="title_camera">パリの凱旋門の写真</h3>
<div id="wapiblock"></div>
</body>
</html>