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

実行結果

設置サンプル:Panoramio JavaScript API

イベント

デフォルトイベントを有効化・無効化、一部だけ無効化したウィジェットです。


disableDefaultEvents:true

デフォルトの動作を無効化

disableDefaultEvents:false

デフォルトの動作を有効化


disableDefaultEvents:[...]

デフォルトの動作の一部(前ボタン、写真クリック)を無効化
写真ページを別窓で開く

設置サンプルのソース

<!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 &amp; 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>