デフォルトイベントを有効化・無効化、一部だけ無効化したウィジェットです。
デフォルトの動作を無効化
デフォルトの動作を有効化
デフォルトの動作の一部(前ボタン、写真クリック)を無効化
写真ページを別窓で開く
<!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>