ウィジェットに現在表示されている写真情報を取得して表示します。
前後ボタンをクリックすると、下記の情報が変わります。
ウィジェット内には表参道で最近撮影された写真を表示しています。
<!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 myOptions1 = {
"width":320, /* ウィジェットの幅(px) */
"height":220, /* ウィジェットの高さ(px) */
"croppedPhotos":panoramio.Cropping.TO_FILL
}
var myOptions2 = {
"width":320, /* ウィジェットの幅(px) */
"height":220, /* ウィジェットの高さ(px) */
"croppedPhotos":true, /* 写真トリミング有効 */
"columns":4,
"rows":3
}
/* リクエストを指定 */
var myRequest = {
/* ウィジェット内には表参道で最近撮影された写真を表示 */
"set":panoramio.PhotoSet.RECENT,
"rect":{'sw':{'lat':35.657386,'lng':139.70300099999997},'ne':{'lat':35.67244,'lng':139.72109899999998}}
};
/* 単一写真ウィジェットを生成 */
var widget1 = new panoramio.PhotoWidget('wapiblock1', myRequest, myOptions1);
/* 写真リストウィジェットを生成 */
var widget2 = new panoramio.PhotoListWidget('wapiblock2', myRequest, myOptions2);
/* ウィジェットを表示 */
widget1.setPosition(0);
widget2.setPosition(0);
/* 表示される写真が変更された時、現在の写真情報を取得 */
function getPhotoInfo(event,n){
var s="";
if(n==1){
obj=widget1.getPhoto();
}else{
obj=widget2.getPhotos();
}
console.log(obj.length);
if(obj.length>0){
for(var i in obj){
var photo=obj[i];
/* 各写真情報を表示 */
s+="写真ID："+photo.getPhotoId()+"\n";
s+="写真タイトル："+photo.getPhotoTitle()+"\n";
s+="写真ページのURL：<a href='"+photo.getPhotoUrl()+"' target='_blank'>"+photo.getPhotoUrl()+"</a>\n";
s+="撮影された場所："+photo.getPosition()["lat"]+", "+photo.getPosition()["lng"]+"\n";
s+="撮影者のユーザーID："+photo.getOwnerId()+"\n";
s+="撮影者の名前："+photo.getOwnerName()+"\n";
s+="オリジナル写真の幅："+photo.getWidth()+"px\n";
s+="オリジナル写真の高さ："+photo.getWidth()+"px\n";
s+="---------------------------------------------------------\n";
}
}else{
/* 各写真情報を表示 */
s+="写真ID："+obj.getPhotoId()+"\n";
s+="写真タイトル："+obj.getPhotoTitle()+"\n";
s+="写真ページのURL：<a href='"+obj.getPhotoUrl()+"' target='_blank'>"+obj.getPhotoUrl()+"</a>\n";
s+="撮影された場所："+obj.getPosition()["lat"]+", "+obj.getPosition()["lng"]+"\n";
s+="撮影者のユーザーID："+obj.getOwnerId()+"\n";
s+="撮影者の名前："+obj.getOwnerName()+"\n";
s+="オリジナル写真の幅："+obj.getWidth()+"px\n";
s+="オリジナル写真の高さ："+obj.getWidth()+"px\n";
s+="---------------------------------------------------------\n";
}
$("#res"+n).html(s);
}
panoramio.events.listen(widget1, panoramio.events.EventType.PHOTO_CHANGED, function(event){
getPhotoInfo(event,1);
});
panoramio.events.listen(widget2, panoramio.events.EventType.PHOTO_CHANGED, function(event){
getPhotoInfo(event,2);
});
});
</script>
<style type="text/css">
#wapiblock2 .panoramio-wapi-photolist,
#wapiblock1 .panoramio-wapi-photolist { /* 枠 */
border:1px solid #aec8e8;
}
#wapiblock2 .panoramio-wapi-images,
#wapiblock1 .panoramio-wapi-images { /* 背景色 */
background-color: #d2e6f4
}
.box {
width:320px;
float:left;
}
.box pre {
width:320px;
font-size:6px;
margin:0; padding:10px;
line-height:1.2;
}
</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>
ウィジェットに現在表示されている写真情報を取得して表示します。<br>
前後ボタンをクリックすると、下記の情報が変わります。<br>
ウィジェット内には表参道で最近撮影された写真を表示しています。
</p>
<hr />
<div class="cf" style="width:700px;">
<div class="box">
<h3>単一写真ウィジェット</h3>
<div id="wapiblock1"><!-- ウィジェットの表示領域 --></div>
<pre id="res1"></pre>
</div>
<div class="box" style="float:right;">
<h3>写真リストウィジェット</h3>
<div id="wapiblock2"><!-- ウィジェットの表示領域 --></div>
<pre id="res2"></pre>
</div>
</div>
</body>
</html>