デフォルトイベントを有効化・無効化、一部だけ無効化したウィジェットです。
デフォルトの動作を無効化
デフォルトの動作を有効化
デフォルトの動作の一部(前ボタン、写真クリック)を無効化
写真ページを別窓で開く
<!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":true, /* 写真トリミング有効 */
"columns":4,
"rows":3,
"disableDefaultEvents":true /* デフォルトイベント無効化 */
}
var myOptions2 = {
"width":320, /* ウィジェットの幅(px) */
"height":220, /* ウィジェットの高さ(px) */
"croppedPhotos":true, /* 写真トリミング有効 */
"columns":4,
"rows":3,
"disableDefaultEvents":false /* デフォルトイベント無効化 */
}
var myOptions3 = {
"width":320, /* ウィジェットの幅(px) */
"height":220, /* ウィジェットの高さ(px) */
"croppedPhotos":true, /* 写真トリミング有効 */
"columns":4,
"rows":3,
"disableDefaultEvents":[ /* 一部のデフォルトイベント無効化 */
panoramio.events.EventType.PREVIOUS_CLICKED,
panoramio.events.EventType.PHOTO_CLICKED
]
}
/* リクエストを指定 */
var myRequest = {
/* エリア：フランス パリ */
"rect": {'sw': {'lat': 48.7978487, 'lng': 2.224162500000034}, 'ne': {'lat': 48.9153104, 'lng': 2.4802813000000015}},
/* タグ：'cafe' */
"tag": "restaurant"
};
/* 写真リストウィジェットを生成 */
var widget1 = new panoramio.PhotoListWidget('wapiblock1', myRequest, myOptions1);
var widget2 = new panoramio.PhotoListWidget('wapiblock2', myRequest, myOptions2);
var widget3 = new panoramio.PhotoListWidget('wapiblock3', myRequest, myOptions3);
/* ウィジェットを表示 */
/* 写真の表示開始位置を指定 */
widget1.setPosition(12);
widget2.setPosition(12);
widget3.setPosition(12);
/* 写真がクリックされた時 */
function photoClicked(event,f) {
res('写真がクリックされました "' + event.getPhoto().getPhotoTitle() + '"',f);
}
panoramio.events.listen(widget3, panoramio.events.EventType.PHOTO_CLICKED, function(event){
photoClicked(event,3);
});
panoramio.events.listen(widget2, panoramio.events.EventType.PHOTO_CLICKED, function(event){
photoClicked(event,2);
});
panoramio.events.listen(widget1, panoramio.events.EventType.PHOTO_CLICKED, function(event){
photoClicked(event,1);
});
/* 前へ矢印がクリックされた時 */
function previousClicked(event,f) {
res('前へ矢印がクリックされました',f);
}
panoramio.events.listen(widget3, panoramio.events.EventType.PREVIOUS_CLICKED, function(event){
previousClicked(event,3);
});
panoramio.events.listen(widget2, panoramio.events.EventType.PREVIOUS_CLICKED, function(event){
previousClicked(event,2);
});
panoramio.events.listen(widget1, panoramio.events.EventType.PREVIOUS_CLICKED, function(event){
previousClicked(event,1);
});
/* 次へ矢印がクリックされた時 */
function nextClicked(event,f) {
res('次へ矢印がクリックされました',f);
}
panoramio.events.listen(widget3, panoramio.events.EventType.NEXT_CLICKED, function(event){
nextClicked(event,3);
});
panoramio.events.listen(widget2, panoramio.events.EventType.NEXT_CLICKED, function(event){
nextClicked(event,2);
});
panoramio.events.listen(widget1, panoramio.events.EventType.NEXT_CLICKED, function(event){
nextClicked(event,1);
});
/* 写真が変更された時 */
function photoChanged(event,f) {
res("写真が変更されました",f);
}
panoramio.events.listen(widget3, panoramio.events.EventType.PHOTO_CHANGED, function(event){
photoChanged(event,3);
});
panoramio.events.listen(widget2, panoramio.events.EventType.PHOTO_CHANGED, function(event){
photoChanged(event,2);
});
panoramio.events.listen(widget1, panoramio.events.EventType.PHOTO_CHANGED, function(event){
photoChanged(event,1);
});
function res(str,f){
$("#res"+f).prepend(str+"\n\n");
}
});
</script>
<style type="text/css">
/* ウィジェットのスタイル指定 */
#wapiblock3 .panoramio-wapi-photolist,
#wapiblock2 .panoramio-wapi-photolist,
#wapiblock1 .panoramio-wapi-photolist { /* 枠 */
border:1px solid #aec8e8;
}
#wapiblock3 .panoramio-wapi-images,
#wapiblock2 .panoramio-wapi-images,
#wapiblock1 .panoramio-wapi-images { /* 背景色 */
background-color: #d2e6f4
}
.box {
float:left;
width:48%;
margin:0; padding:0;
}
textarea {
width:320px; height:100px;
font-size:6px;
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>デフォルトイベントを有効化・無効化、一部だけ無効化したウィジェットです。</p>
<hr />
<div class="cf" style="width:700px">
<div class="box">
<h3>disableDefaultEvents:true</h3>
<p>デフォルトの動作を無効化</p>
<div id="wapiblock1"><!-- ウィジェットの表示領域 --></div>
<textarea id="res1"></textarea>
</div>
<div class="box">
<h3>disableDefaultEvents:false</h3>
<p>デフォルトの動作を有効化</p>
<div id="wapiblock2"><!-- ウィジェットの表示領域 --></div>
<textarea id="res2"></textarea>
</div>
</div>
<hr />
<h3>disableDefaultEvents:[...]</h3>
<p>デフォルトの動作の一部(前ボタン、写真クリック)を無効化<br>写真ページを別窓で開く</p>
<div id="wapiblock3"><!-- ウィジェットの表示領域 --></div>
<textarea id="res3"></textarea>
</body>
</html>