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

実行結果

設置サンプル:Panoramio JavaScript API

任意に指定した写真セットを表示するサンプル。ここではパリの凱旋門の写真を集めてみました。


パリの凱旋門の写真

設置サンプルのソース

<!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 myOptions = {
            "width":360,
            "height":220,
             "columns": 6,
             "rows":2,
            "croppedPhotos":panoramio.Cropping.TO_FILL
         }
         /* リクエスト */
         var myRequest = {
            "ids":[
               {'photoId': 16365869,   'userId': 1662714},
               {'photoId': 30149354,   'userId': 3968724},
               {'photoId': 59723765,   'userId': 341731},
               {'photoId': 61955771,   'userId': 1850516},
               {'photoId': 29049775,   'userId': 2341793},
               {'photoId': 60984787,   'userId': 4272273},
               {'photoId': 53880245,   'userId': 4208745},
               {'photoId': 547292,      'userId': 116341},
               {'photoId': 2330395,   'userId': 101009},
               {'photoId': 43182870,   'userId': 2972027},
               {'photoId': 20789715,   'userId': 873463},
               {'photoId': 1558077,   'userId': 78506},
               {'photoId': 6495866,   'userId': 1081020},
               {'photoId': 4743304,   'userId': 799809},
               {'photoId': 7812842,   'userId': 151365},
               {'photoId': 57679492,   'userId': 3452687},
               {'photoId': 60984787,   'userId': 4272273},
               {'photoId': 1558077,   'userId': 78506}
            ]
         };
         /* 写真リストウィジェット */
         var widget = new panoramio.PhotoListWidget('wapiblock', myRequest, myOptions);
         widget.setPosition(0);
      });
   </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>任意に指定した写真セットを表示するサンプル。ここではパリの凱旋門の写真を集めてみました。</p>
   <hr />
   <h3 class="title_camera">パリの凱旋門の写真</h3>
   <div id="wapiblock"></div>
</body>
</html>