PHP & JavaScript Room :: 設置サンプル

実行結果

設置サンプル：Panoramio JavaScript API

イベント

写真をクリックした時の「panoramio.events.EventType.PHOTO_CLICKED」を無効化し、写真ページを別ウィンドウで開きます。
パリにあるカフェの写真

設置サンプルのソース

<!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 myOptions = {
            "width":320,            /* ウィジェットの幅(px) */
            "height":220,            /* ウィジェットの高さ(px) */
            "croppedPhotos":true,      /* 写真トリミング有効 */
            "columns":4,
            "rows":3,
            "disableDefaultEvents":[   /* 一部のデフォルトイベント無効化 */
               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 widget = new panoramio.PhotoListWidget('wapiblock', myRequest, myOptions);
         /* ウィジェットを表示 */
         /* 写真の表示開始位置を指定 */
         widget.setPosition(0);
         
         /* 写真がクリックされた時 */
         function photoClicked(event) {
            $("#res").prepend('写真がクリックされました　"' + event.getPhoto().getPhotoUrl() + '"'+"\n\n");
            //写真ページを別窓で開く
            window.open(event.getPhoto().getPhotoUrl());
         }
         panoramio.events.listen(widget, panoramio.events.EventType.PHOTO_CLICKED,  photoClicked);
      });
   </script>
   <style type="text/css">
      #wapiblock .panoramio-wapi-photolist { /* 枠 */
         border:1px solid #aec8e8;
      }
      #wapiblock .panoramio-wapi-images { /* 背景色 */
         background-color: #d2e6f4
      }
      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 &amp; JavaScript Room</a> :: 設置サンプル</h1>
<h3 class='h'>実行結果</h3>
   <h1>設置サンプル：Panoramio JavaScript API</h1>
   <h2>イベント</h2>
   <p>写真をクリックした時の「panoramio.events.EventType.PHOTO_CLICKED」を無効化し、写真ページを別ウィンドウで開きます。</p>
   <hr />
   <h3 class="title_camera">パリにあるカフェの写真</h3>
   <div id="wapiblock"><!-- ウィジェットの表示領域 --></div>
   <textarea id="res"></textarea>
</body>
</html>