任意に指定した写真セットを表示するサンプル。ここではパリの凱旋門の写真を集めてみました。
<!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 & 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>