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

実行結果

設置サンプル：Panoramio JavaScript API

各首都で撮影された写真の中から「hotel」のタグがつけられている写真を表示します。

rect:

設置サンプルのソース

<!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>
   <script type='text/javascript' src='http://www.panoramio.com/wapi/wapi.js?v=1&hl=ja'></script>
   <script type="text/javascript">
      $(function(){
         var rect_ary={
            "paris": {'sw': {'lat': 48.7978487, 'lng': 2.224162500000034}, 'ne': {'lat': 48.9153104, 'lng': 2.4802813000000015}},
            "roma": {'sw': {'lat': 41.65587379999999, 'lng': 12.234426600000006}, 'ne': {'lat': 42.140959, 'lng': 12.855864099999962}},
            "madrid": {'sw': {'lat': 41.65587379999999, 'lng': 12.234426600000006}, 'ne': {'lat': 42.140959, 'lng': 12.855864099999962}}
         }
         /* ウィジェットの見た目 */
         var myOptions = {
            "width":340,
            "height":220,
             "columns": 5,
             "rows":3,
            "croppedPhotos":true /* 写真のトリミング表示有効 */
         }
         /* リクエスト */
         var myRequest = {
            "tag":"hotel"
         };
         function review(flag){
            myRequest["rect"]=rect_ary[flag];
            /* 写真リストウィジェット */
            var wapiblock = document.getElementById('wapiblock');
            var widget = new panoramio.PhotoListWidget(wapiblock, myRequest, myOptions);
            widget.setPosition(0);
         }
         review($("input[name='rect']:checked").val());
         $("input[name='rect']").change(function(){
            review($("input[name='rect']:checked").val());
         });
      });
   </script>
   <style type="text/css">
      #wapiblock .panoramio-wapi-photolist {   /* 枠 */
         border:1px solid #aec8e8;
      }
      #wapiblock .panoramio-wapi-images {   /* 背景色 */
         background-color: #d2e6f4
      }
   </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>
   <p>
      各首都で撮影された写真の中から「hotel」のタグがつけられている写真を表示します。
   </p>
   <hr />
   <form>
      <p>
         rect: 
         <label for="rect_1"><input type="radio" id="rect_1" name="rect" value="paris" checked />フランス　パリ</label>
         <label for="rect_2"><input type="radio" id="rect_2" name="rect" value="roma" />イタリア　ローマ</label>
         <label for="rect_3"><input type="radio" id="rect_3" name="rect" value="madrid" />スペイン　マドリード</label>
      </p>
   </form>
   <div id="wapiblock"></div>
</body>
</html>