Showing posts with label Javascript. Show all posts
Showing posts with label Javascript. Show all posts

Sunday, 20 October 2013

Panoramio Javascript API Widget 2

This is Panoramio JavaScriptt API. Panoramio JavaScriptt API let you customize it.













This is complete Code for Panoramio JavaScriptt API widget.It does not show in composing mood.It show after publishing it.
<div dir="ltr" style="text-align: center;" trbidi="on">

<script src="https://ssl.panoramio.com/wapi/wapi.js?v=1&amp;hl=en"></script>



<div id="wapiblock" style="float: right; margin: 10px 15px"></div>


<script type="text/javascript">

var myRequest = {
  'tag': 'sunset',
  'rect': {'sw': {'lat': -30, 'lng': 10.5}, 'ne': {'lat': 50.5, 'lng': 30}}
};

  var myOptions = {
  'width': 300,
  'height': 200
};
var wapiblock = document.getElementById('wapiblock');

  var photo_widget = new panoramio.PhotoWidget('wapiblock', myRequest, myOptions);

  photo_widget.setPosition(0);

</script>

</div>

Panoramio Javascript API Widget example 1

this is Panoramio JavaScript API Widget example.



Panoramio JavaScript API Widget does not show by composing, it show when it will be published.It is full code just copy paste it.
<div dir="ltr" style="text-align: left;" trbidi="on">
this is&nbsp;Panoramio Javascript API Widget example.<br />
<div style="text-align: left;">
<script src="https://ssl.panoramio.com/wapi/wapi.js?v=1&amp;hl=en"></script>
   
<style type="text/css">


  
  #div_attr_ex .panoramio-wapi-images {
    background-color: transparent;
  }
  #div_attr_ex .pwanoramio-wapi-tos{
    background-color: transparent !important;
  }
</style>
</div>
<div id="div_attr_ex">
<div id="div_attr_ex_photo">
</div>
<div id="div_attr_ex_attr">
</div>
</div>
<script type="text/javascript">
function increase ()
{
var temp = parseInt (document . apple . banana . value);

 
 if (isNaN (temp))
  return; 

if (temp>=0 )
{
attr_ex_photo_widget.setPosition(temp);

}
else
{
attr_ex_photo_widget.setPosition(0);
document . apple . banana . value = 0;

}

}
var position;
var end;

function myfunction(no)
{

position =attr_ex_photo_widget.getPosition();

no=position+no;


end=attr_ex_photo_widget.getAtEnd();
 if (no>=0 && !end)
{
attr_ex_photo_widget.setPosition(no);
document . apple . banana . value = no;

}
 else  
{
no=0;
attr_ex_photo_widget.setPosition(no);
document . apple . banana . value = no;


}



}
var no=0;
  var label = {'tag': 'kahna'};
  var tagRequest = new panoramio.PhotoRequest(label);
  var attr_ex_photo_options = {
    'width': 600,
    'height': 500,
    'attributionStyle': panoramio.tos.Style.HIDDEN};
  var attr_ex_photo_widget = new panoramio.PhotoWidget(
      'div_attr_ex_photo', tagRequest, attr_ex_photo_options);


  var attr_ex_attr_options = {'width':600};
  var attr_ex_attr_widget = new panoramio.TermsOfServiceWidget(
    'div_attr_ex_attr', attr_ex_attr_options);


   
    
  attr_ex_photo_widget.enablePreviousArrow(true);
  attr_ex_photo_widget.enableNextArrow(true);

  attr_ex_photo_widget.setPosition(2);

  
</script>

<button onclick="myfunction(1)">next</button><button onclick="myfunction(-1)">previous</button>
<br />
<form name="apple">
<input min="0" name="banana" size="5" type="number" />
   <input onclick="increase ();" type="button" value="View" />
  </form>
</div>