Panoramio Widget API(javascript)の貼り付けコード その３

ヘッダーロゴの下に下記のコードを追加しました。※これで各ページの最初の方にコードが挿入されます。

view plainprint?

1. <script   
2.     type="text/javascript"   
3.     src="http://www.panoramio.com/wapi/wapi.js?v=1&hl=ja_JP.utf8"  
4. ></script>  
5. <style type="text/css">   
6. .panoramio-wapi-photo .panoramio-wapi-images {   
7.     background-color: #ffffff;   
8. }   
9. </style>   

<script 
	type="text/javascript" 
	src="http://www.panoramio.com/wapi/wapi.js?v=1&hl=ja_JP.utf8"
></script>
<style type="text/css"> 
.panoramio-wapi-photo .panoramio-wapi-images { 
	background-color: #ffffff; 
} 
</style> 

３行目の「&hl=ja_JP.utf8」は無い方がいいかも？ 無ければユーザー設定言語で表示されるはずだけど・・・

英語になったり、中国語になったり・・・

---

各記事には下記の部分だけをHTMLモードで記入します。

view plainprint?

1. <div id="p86314230"></div>  
2. <script type="text/javascript">  
3. (function() {   
4. var wapiblock = document.getElementById('p86314230');  
5.    
6. var myOptions = {  
7.   'width': 573,  
8.   'height': 340,  
9.   'openLinksInNewWindow': true  
10. };  
11. var photoRequestOptions = {  
12.  ids: [  
13.   {  'photoId': 86314230,  'userId': 1597930 }  
14.   ,{  'photoId': 86314228,  'userId': 1597930 }  
15.   ,{  'photoId': 86314232,  'userId': 1597930 }  
16. ]  
17. };  
18. var widget = new panoramio.PhotoWidget(wapiblock, photoRequestOptions, myOptions);  
19. widget.setPosition(0);  
20. })();   
21. </script>  

<div id="p86314230"></div>
<script type="text/javascript">
(function() { 
var wapiblock = document.getElementById('p86314230');
 
var myOptions = {
  'width': 573,
  'height': 340,
  'openLinksInNewWindow': true
};
var photoRequestOptions = {
 ids: [
  {  'photoId': 86314230,  'userId': 1597930 }
  ,{  'photoId': 86314228,  'userId': 1597930 }
  ,{  'photoId': 86314232,  'userId': 1597930 }
]
};
var widget = new panoramio.PhotoWidget(wapiblock, photoRequestOptions, myOptions);
widget.setPosition(0);
})(); 
</script>

１行目と４行目の「p86314230」は同じ文字列にしてください。idなのでブログ内で重複しないように、日付＋フォトIDの文字列でもOKです。７行目と８行目は写真のアスペクト比に合わせて変更した方がいいです。著作権表示の部分が改行する幅の時は18を大きく変更。

• ３：２      573, 400      573 /  3 × 2 + 18 ≒ 400
  
  
  
• １６：９     573, 340      573 / 16 × 9 + 18 ≒ 340
  

１２～１６行目は３枚の写真を切り替えて表示する場合の例です。

９行目は「true」で写真をクリックした時に新しいウインドウで開く、「false」だと同じウインドウで開くの違いみたいです。※APIのリファレンスには載っていない
[2013/04/23] APIサンプルのソースを見ていたら、載ってました。

以上、元ネタは下記サイトです。詳細は下記参照

• Panoramio のすすめ - NAVER まとめ