Panoramiaの写真でフランス内で撮影された写真の内、下記のタグが含まれる写真を表示します。
<!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":true /* 写真のトリミング表示有効 */ } /* リクエスト */ var myRequest = { /* エリア指定:フランスの境界((42.1331639, -5.982052000000067), (50.0380022, 10.409549999999967)) */ "rect": {'sw': {'lat': 42.1331639, 'lng': -5.982052000000067}, 'ne': {'lat': 50.0380022, 'lng': 10.409549999999967}} }; function review(flag){ myRequest["tag"]="france,"+flag; /* 写真リストウィジェット */ var wapiblock = document.getElementById('wapiblock'); var widget = new panoramio.PhotoListWidget(wapiblock, myRequest, myOptions); widget.setPosition(0); } review($("input[name='tag']:checked").val()); $("input[name='tag']").change(function(){ review($("input[name='tag']: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> Panoramiaの写真でフランス内で撮影された写真の内、下記のタグが含まれる写真を表示します。 </p> <hr /> <form> <p> tag: <label for="tag_1"><input type="radio" id="tag_1" name="tag" value="bourgogne" checked />france, bourgogne</label> <label for="tag_2"><input type="radio" id="tag_2" name="tag" value="bretagne" />france, bretagne</label> <label for="tag_3"><input type="radio" id="tag_3" name="tag" value="paris" />france, paris</label> </p> </form> <div id="wapiblock"></div> </body> </html>