選択したPanoramioの写真グループにある写真を新しい順に表示します。
<!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":340, "height":220, "columns": 5, "rows":3, "croppedPhotos":panoramio.Cropping.TO_FILL /* 写真のトリミング */ } /* リクエスト */ var myRequest = { "order":panoramio.PhotoOrder.DATE_DESC /* 新→古い写真順 */ }; function review(flag){ myRequest["group"]=flag; /* 写真リストウィジェット */ var wapiblock = document.getElementById('wapiblock'); var widget = new panoramio.PhotoListWidget(wapiblock, myRequest, myOptions); widget.setPosition(0); } review($("input[name='grp']:checked").val()); $("input[name='grp']").change(function(){ review($("input[name='grp']: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> 選択したPanoramioの写真グループにある写真を新しい順に表示します。 </p> <hr /> <form> <p> group: <label for="grp_1"><input type="radio" id="grp_1" name="grp" value="6095" checked />Panoramas</label> <label for="grp_2"><input type="radio" id="grp_2" name="grp" value="8334" />colors of life</label> <label for="grp_3"><input type="radio" id="grp_3" name="grp" value="8186" />Nature Is Beautiful</label> </p> </form> <div id="wapiblock"></div> </body> </html>