JavaScriptライブラリを使用して、単一写真ウィジェットを写真ウィジェットを表示するサンプルです。
写真リストウィジェットの属性ブロックは非表示にし、単一写真ウィジェットの属性ブロックのみ表示させています。
写真リストの各写真をクリックすると、クリックした写真を単一写真ウィジェットを表示します。 単一写真ウィジェットの前後ボタンは無効化しています。
<!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,
"attributionStyle":panoramio.tos.Style.DEFAULT /* ウィジェットの高さに属性ブロックの高さを追加 */
}
var myOptions2 = {
"width":80, /* ウィジェットの幅(px) */
"height":220, /* ウィジェットの高さ(px) */
"croppedPhotos":true, /* 写真トリミング有効 */
"columns":1,
"rows":3,
"orientation":"vertical", /* 写真リストの向き(垂直) */
"attributionStyle": panoramio.tos.Style.HIDDEN, /* 属性ブロック非表示 */
"disableDefaultEvents":[ /* 一部のデフォルトイベント無効化 */
panoramio.events.EventType.PHOTO_CLICKED
]
}
/* リクエスト */
var myRequest = new panoramio.PhotoRequest({
/* ウィジェット内には最近撮影された写真を表示 */
"set":panoramio.PhotoSet.RECENT
});
/* 単一写真ウィジェットを生成 */
var widget1 = new panoramio.PhotoWidget('wapiblock1', myRequest, myOptions1);
/* 写真リストウィジェットを生成 */
var widget2 = new panoramio.PhotoListWidget('wapiblock2', myRequest, myOptions2);
/* ウィジェットを表示 */
widget1.setPosition(0);
widget2.setPosition(0);
/* 単一写真ウィジェットの前後ボタンを無効化 */
widget1.enablePreviousArrow(false);
widget1.enableNextArrow(false);
/* 写真リストの写真がクリックされた時 */
panoramio.events.listen(widget2, panoramio.events.EventType.PHOTO_CLICKED, function(event){
/* クリックされた写真を単一写真ウィジェットに表示 */
var position = event.getPosition();
if(position!==null) widget1.setPosition(position);
});
});
</script>
<style type="text/css">
#photobox {
width:400px;
overflow:hidden;
}
#photo {
width:320px;
float:left;
}
#photolist {
width:80px;
float:left;
}
</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>
JavaScriptライブラリを使用して、単一写真ウィジェットを写真ウィジェットを表示するサンプルです。<br>
写真リストウィジェットの属性ブロックは非表示にし、単一写真ウィジェットの属性ブロックのみ表示させています。
</p>
<p>
写真リストの各写真をクリックすると、クリックした写真を単一写真ウィジェットを表示します。
単一写真ウィジェットの前後ボタンは無効化しています。
</p>
<hr />
<h3 class="title_camera">Panoramioに最近アップロードされた写真</h3>
<div id="photobox" class="cf">
<div id="photo">
<div id="wapiblock1"><!-- ウィジェットの表示領域 --></div>
</div>
<div id="photolist" style="float:right;">
<div id="wapiblock2"><!-- ウィジェットの表示領域 --></div>
</div>
</div>
</body>
</html>