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=fr'></script>
<script type="text/javascript">
$(function(){
/* ウィジェットの見た目を指定 */
var myOptions1 = {
"width":320, /* ウィジェットの幅(px) */
"height":220, /* ウィジェットの高さ(px) */
"croppedPhotos":panoramio.Cropping.TO_FILL,
"attributionStyle":panoramio.tos.Style.HIDDEN /* 属性ブロック非表示 */
}
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);
/* 属性ブロックを表示 */
var attrOption = {'width':500};
var attrwidget = new panoramio.TermsOfServiceWidget('attrbox', attrOption);
/* 写真リストの写真がクリックされた時 */
panoramio.events.listen(widget2, panoramio.events.EventType.PHOTO_CLICKED, function(event){
/* クリックされた写真を単一写真ウィジェットに表示 */
var position = event.getPosition();
if(position!==null){
widget1.setPosition(position);
if(position>0){
widget2.setPosition(position-1);
}
}
return false;
});
});
</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>
写真リストの各写真をクリックすると、クリックした写真を単一写真ウィジェットを表示します。<br>
単一写真ウィジェットの前後ボタンは無効化しています。
</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>
<div id="attrbox"><!-- 属性ブロックの表示領域 --></div>
</body>
</html>