指定したユーザーの写真セットを表示し、写真の投稿日付の昇順・降順に切り替え表示します。
<!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":330, "height":220, "columns": 3, "rows":2, "croppedPhotos":true /* 写真のトリミング表示有効 */ } /* リクエスト */ var myRequest = { "user":6901390 }; function review(flag){ switch(flag){ case "DATE_DESC": myRequest["order"]=panoramio.PhotoOrder.DATE_DESC; break; case "DATE": myRequest["order"]=panoramio.PhotoOrder.DATE; break; } /* 写真リストウィジェット */ var wapiblock = document.getElementById('wapiblock'); var widget = new panoramio.PhotoListWidget(wapiblock, myRequest, myOptions); widget.setPosition(0); } review($("input[name='order']:checked").val()); $("input[name='order']").change(function(){ review($("input[name='order']: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 & JavaScript Room</a> :: 設置サンプル</h1> <h3 class='h'>実行結果</h3> <h1>設置サンプル:Panoramio JavaScript API</h1> <p> 指定したユーザーの写真セットを表示し、写真の投稿日付の昇順・降順に切り替え表示します。 </p> <hr /> <h3 class="title_camera"><a href="http://www.panoramio.com/user/6901390" target="_blank">cocoism</a> の写真</h3> <form> <p> order: <label for="order_1"><input type="radio" id="order_1" name="order" value="DATE" checked />DATE(古→新)</label> <label for="order_2"><input type="radio" id="order_2" name="order" value="DATE_DESC" />DATE_DESC(新→古)</label> </p> </form> <div id="wapiblock"></div> </body> </html>