CINXE.COM

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr"> <head><script type="text/javascript" src="/_static/js/bundle-playback.js?v=HxkREWBo" charset="utf-8"></script> <script type="text/javascript" src="/_static/js/wombat.js?v=txqj7nKC" charset="utf-8"></script> <script>window.RufflePlayer=window.RufflePlayer||{};window.RufflePlayer.config={"autoplay":"on","unmuteOverlay":"hidden"};</script> <script type="text/javascript" src="/_static/js/ruffle/ruffle.js"></script> <script type="text/javascript"> __wm.init("https://web.archive.org/web"); __wm.wombat("http://www.panoramio.com:80/api/widget/api.html","20161021075332","https://web.archive.org/","web","/_static/", "1477036412"); </script> <link rel="stylesheet" type="text/css" href="/_static/css/banner-styles.css?v=S1zqJCYt" /> <link rel="stylesheet" type="text/css" href="/_static/css/iconochive.css?v=3PDvdIFv" />  <title> Panoramio - Widget API. Display photos from Panoramio on your own website </title> <meta name="description" content="Photo-sharing community. Discover the world through photos."/> <meta http-equiv="X-UA-Compatible" content="IE=9"/> <link rel="shortcut icon" type="image/x-icon" href="/web/20161021075332im_/http://www.panoramio.com/img/favicon.ico"/> <link rel="stylesheet" type="text/css" href="//web.archive.org/web/20161021075332cs_/http://fonts.googleapis.com/css?family=Roboto:300,400|Open+Sans:300&subset=latin,latin-ext,cyrillic,cyrillic-ext,greek,greek-ext,vietnamese"> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-184567-1'], ['_trackPageview', '/api/widget/api.html']); _gaq.push(['_trackEvent', "AcrylicPageView", "True", null || undefined, null || undefined, !false, ]); (function() { var ga = document.createElement('script'); ga.src = ('https:' == document.location.protocol ? 'https://web.archive.org/web/20161021075332/https://ssl' : 'https://web.archive.org/web/20161021075332/http://www') + '.google-analytics.com/ga.js'; ga.setAttribute('async', 'true'); document.documentElement.firstChild.appendChild(ga); })(); </script> <script type="text/javascript"> var close_str = '[Close]'; var we_cant_find_str = 'We can\u0027t find \u003Cem\u003E%s\u003C/em\u003E.'; </script> <link rel="stylesheet" type="text/css" href="/web/20161021075332cs_/http://www.panoramio.com/css/screen_interim.ltr.css?v=109c5f"/> <link rel="stylesheet" type="text/css" href="/web/20161021075332cs_/http://www.panoramio.com/css/acrylic.ltr.css?v=218c14"/> <script type="text/javascript" src="//web.archive.org/web/20161021075332js_/http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> <script type="text/javascript" src="/web/20161021075332js_/http://www.panoramio.com/js/jquery-history.js"></script> <script type="text/javascript" src="//web.archive.org/web/20161021075332js_/http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places,search&language=en&client=google-panoramio"></script> <script type="text/javascript" src="/web/20161021075332js_/http://www.panoramio.com/js_lib/panoramio.js?v=34ab4f"></script> <script type="text/javascript" src="/web/20161021075332js_/http://www.panoramio.com/wapi/wapi.js?v=1"></script> </head> <body id="generic"> <div class="navbar" id="navbar"> <div class="navbar-inner"> <a href="/web/20161021075332/http://www.panoramio.com/?no_redirect" class="navbar-left"> <span class="navbar-logo"> <span class="navbar-logo-image"></span> <span class="navbar-logo-text"> <span class="navbar-logo-separator"></span> <span>Google Maps</span> </span> </span> </a> <div class="collapsed-menu"> <div id="collapsed-menu-button" class="goog-toolbar-menu-button collapsed-menu-icon"> <div class="collapse-menu-container goog-menu" style="display: none; background-color: rgba(0,0,0,0.8); width: 100%;"> <div class="collapse-menu-profile"> <button class="jfk-button jfk-button-primary" id="navbar-signup-button" onclick="location.href='/signup';">Sign up</button> <a id="navbar-signup-link" class="navbar-signup-link-collapsed" href="/web/20161021075332/http://www.panoramio.com/signin">Sign in</a> </div> <div class="collapse-menu-profile-links"> <div class="collapse-menu-profile-link-container"> <a href="/web/20161021075332/http://www.panoramio.com/help" class="collapse-menu-profile-link">Help</a> </div> </div> <div class="collapse-menu-explore-links"> <div class="collapse-menu-explore-column"> <div class="collapse-menu-explore-column-header">Explore Panoramio</div> <a href="/web/20161021075332/http://www.panoramio.com/map" class="collapse-menu-explore-column-link">World map</a> <a href="/web/20161021075332/http://www.panoramio.com/places" class="collapse-menu-explore-column-link">Cool places</a> <a href="/web/20161021075332/http://www.panoramio.com/tags" class="collapse-menu-explore-column-link">Tags</a> </div> <div class="collapse-menu-explore-column"> <div class="collapse-menu-explore-column-header">Community</div> <a href="/web/20161021075332/http://www.panoramio.com/groups" class="collapse-menu-explore-column-link">Groups</a> <a href="/web/20161021075332/http://www.panoramio.com/contest" class="collapse-menu-explore-column-link">Photo contest</a> <a href="/web/20161021075332/http://www.panoramio.com/blog" class="collapse-menu-explore-column-link">Blog</a> <a href="/web/20161021075332/http://www.panoramio.com/forum" class="collapse-menu-explore-column-link">Discussion forums</a> </div> </div> </div> </div> </div> <div class="search-menu"> <div id="search-menu-icon"></div> </div> <div id="explore-menu-button-wrapper"> <div id="explore-menu-button" class="menu_bar-button goog-toolbar-menu-button"> <div class="menu_bar-button_label">Explore</div> <div class="goog-menu" style="display: none; background-color: rgba(0,0,0,0.8)"> <div class="explore-menu"> <div class="explore-menu-column"> <div class="explore-menu-column-header">Explore Panoramio</div> <a href="/web/20161021075332/http://www.panoramio.com/map" class="explore-menu-column-link">World map</a> <a href="/web/20161021075332/http://www.panoramio.com/places" class="explore-menu-column-link">Cool places</a> <a href="/web/20161021075332/http://www.panoramio.com/tags" class="explore-menu-column-link">Tags</a> </div> <div class="explore-menu-column"> <div class="explore-menu-column-header">Community</div> <a href="/web/20161021075332/http://www.panoramio.com/groups" class="explore-menu-column-link">Groups</a> <a href="/web/20161021075332/http://www.panoramio.com/contest" class="explore-menu-column-link">Photo contest</a> <a href="/web/20161021075332/http://www.panoramio.com/blog" class="explore-menu-column-link">Blog</a> <a href="/web/20161021075332/http://www.panoramio.com/forum" class="explore-menu-column-link">Discussion forums</a> </div> </div> </div> </div> </div> <div id="explore-wrapper"> <input type="text" class="explore-input" id="explore-expanded-input" placeholder="Search for a place"> </div> <div id="explore-collapsed-wrapper"> <input type="text" class="explore-input" id="explore-collapsed-input" placeholder="Search for a place"> </div> <div class="navbar-profile"> <div id="navbar-signin-link-container"> <a id="navbar-signin-direct-link" href="/web/20161021075332/http://www.panoramio.com/signin/google">Sign in</a> <div id="signin-menu-button" class="goog-menu-button"> <div class="goog-menu" style="display: none; background-color: rgba(0,0,0,0.8);"> <div id="signin-menu-container"> <a id="navbar-signin-drop-link" href="/web/20161021075332/http://www.panoramio.com/signin/google">Sign in with a Google account</a> <a id="navbar-signin-legacy-drop-link" href="/web/20161021075332/http://www.panoramio.com/signin/legacy">Use a legacy account</a> </div> </div> </div> </div> </div> </div> </div> <div class="interim-important_notice_wrapper"> <div class="interim-important_notice"> Panoramio is closing. <a class="interim-important_notice_link" href="/web/20161021075332/http://www.panoramio.com/maps-faq">Learn how to back up your data</a>. </div> </div> <script type="text/javascript"> //<![CDATA[ pano.translation.register('Connect account', 'Connect account'); pano.translation.register('Connecting account…', 'Connecting account...'); pano.translation.register('Connecting to Google+ failed.', 'Connecting to Google+ failed.'); $(document).ready(function() { $('#gplus_profile_avatar').error(function() { $(this).unbind('error'); $(this).attr('src', '/img/user_avatar.png'); }); }); //]]> </script> <div id="gplus-upgrade-dialog" style="display: none;" title="Connect your Google+ account to Panoramio"> <div id="gplus-upgrade-dialog-content"> <div id="gplus_profile_explanation"> This is how your name and profile photo will appear on Panoramio if you connect this Google+ account. You cannot switch to a different account later. <a href="/web/20161021075332/http://www.panoramio.com/help/gplus-faq" target="_blank">Learn more</a>. </div> <img src="/web/20161021075332im_/http://www.panoramio.com/img/user_avatar.png" width="120" height="120" id="gplus_profile_avatar" alt=""> <div class="gplus_profile_info"> <div id="gplus_profile_name"></div> <div id="gplus_profile_location"></div> </div> </div> </div> <script type="text/javascript"> pano.acrylic.Header.start(null, 'an:yfHcUPt4UJga29D29Htqdn2_fFeGpAHWzWg1-Rrnj106MTQ3NzAzNjQxMjIxNzY3MA', true); </script> <div class="content_wrapper"> <div id="status_message" class="wide" style="display: none;"> </div> <div id="contenido" class="wapidoc"> <a name="toc"></a> <h1> Panoramio Widget API - Display photos from Panoramio on your own website </h1> <div class="sidebox" id="oldapisidebox"> <p> Looking for the Panoramio Data API? It's available, you'll find it <a href="/web/20161021075332/http://www.panoramio.com/api/data/api.html">here</a>. </p> </div> <div class="toc"> <a href="#toc"><b>Contents</b></a> <ul> <li><a href="#choice">JavaScript or iframes?</a></li> <li><a href="#basic">Basic concepts</a></li> <li><a href="#templates">HTML templates</a></li> <ul> <li><a href="#templates-examples">Examples</a></li> </ul> <li><a href="#js">JavaScript API</a></li> <ul> <li><a href="#js-get">Set up</a></li> <li><a href="#request">Request</a></li> <li><a href="#photo-widget">Photo widget</a></li> <li><a href="#photo-list-widget">Photo list widget</a></li> <li><a href="#events">Events</a></li> <li><a href="#photo-object">Photo object</a></li> <li><a href="#attribution-widget">Attribution block</a></li> <li><a href="#api-reference">API Reference</a></li> </ul> <li><a href="#conditions-of-use">Conditions of Use</a></li> <li><a href="#questions">Questions</a></li> </ul> <hr/> <a href="/web/20161021075332/http://www.panoramio.com/api/widget/reference.html">API Reference</a> </div> <p>With the Panoramio Widget API you can display the photos from Panoramio on your own web site. Geolocated photos from Panoramio are great to enrich your maps or illustrate information where location is an important factor (real estate sites, hotels and vacation sites, routes, trails...). </p> <p>The Panoramio Widget API is a JavaScript library that provides easy-to-use graphical UI elements and search capabilities so that you can show Panoramio photos on your web site. In addition, we provide ready-made HTML templates that you can embed in a web site using iframe tags so you can take advantage of the Widget API without the need to write any JavaScript. </p> <p> The Panoramio Widget API is free for both commercial and non-commercial purposes that don't exceed the limit of 100000 queries through the API per day. </p> <a name="choice"></a> <h2>JavaScript or iframes: which is right for me?</h2> <iframe style="float: right; margin: 10px" src="/web/20161021075332if_/http://www.panoramio.com/wapi/template/slideshow.html?tag=sunset&width=300&height=200&delay=6" frameborder="0" width="300" height="200" scrolling="no" marginwidth="0" marginheight="0"> </iframe> <p>We provide the Widget API in two flavors: a JavaScript library, and a set of ready-made HTML templates.</p> <p>With the JavaScript library, you need to link to the JavaScript file in your web site's HTML code, and then write code in JavaScript to create and manipulate widgets.</p> <p>With the HTML templates, Panoramio provides normal HTML pages that contain just one widget or a combination of them, in fixed configurations; you then add a request for one of these pages into an iframe tag in your own web site so the widget will appear inside your web site, and not in a separate page. You can also look into these HTML templates and use them as examples to understand the JavaScript library.</p> <p>The following table summarizes the advantages of each flavor.</p> <table> <thead> <tr><th width="40%"></th> <th width="30%">JavaScript library</th> <th width="30%">HTML templates</th></tr> </thead> <tbody> <tr><th>Ease of deployment</th> <td>Requires some programming</td> <td>Just cut and paste HTML</td></tr> <tr><th>Required knowledge of programming languages</th> <td>JavaScript, HTML, CSS optional</td> <td>HTML</td></tr> <tr><th>Flexibility to combine widgets</th> <td>Full power of the Widget API</td> <td>Limited configurations available</td></tr> <tr><th>User interaction</th> <td>Page behavior is fully customizable</td> <td>Some predefined behaviors available</td></tr> <tr><th>Interaction between widgets and with rest of the page</th> <td>Fully customizable</td> <td>Generally not possible</td></tr> <tr><th>Programmatic control over widgets</th> <td>Yes</td> <td>No</td></tr> <tr><th>UI customization</th> <td>Possible with CSS</td> <td>Size and base color</td></tr> <tr><th>Hosting web site</th> <td>Must allow JavaScript</td> <td>Must allow iframes</td></tr> </tbody> </table> <p>In general, using the JavaScript library directly gives you more flexibility and power, but requires that you write JavaScript code. </p> <a name="basic"></a> <h2>Basic concepts</h2> <p>The basic concepts in the Widget API are the <b>request</b> and the <b>widget</b>. A request specifies which photos you want to show, and a widget is a graphical element that shows the selected photos in your browser. </p> <p>The Widget API provides different types of <b>requests</b>: you can select all photos by a user, all photos that have a certain tag, photos in a predefined set, photos that belong to a particular group, and you can specify an explicit list of photos to show (only in the JavaScript library). In addition, you can restrict some of these requests to only show photos in a specific part of the World. </p> <p>The Widget API provides two <b>widgets</b>: The photo widget shows one photo at a time. Depending on how you configure it, the user will be able to move to the next and previous photos of a request by pressing the arrows that are shown on the widget; you can also configure the widget so that it advances to the next photo automatically.</p> <p>The photo list widget shows multiple photos at a time; it can also be configured so that the user can scroll it to see previous and next photos. In both cases, which photos to show, and in which order, is determined by a request.</p> <a name="templates"></a> <h2>HTML templates</h2> <p>The Panoramio site provides a set of pages that contain an already-configured widget or a ready-made composition. You can access these pages simply by typing their URL. If you want to use these widgets in your web site, you can use the HTML <b>iframe</b> tag to embed these pages from Panoramio into your web site.</p> <p>These URLs have the following structure: </p> <code> http://www.panoramio.com/wapi/template/<i>name</i>.html?<i>option</i>&<i>option</i>&<i>option</i>... </code> <p>For <i>name</i> you can use:</p> <ul> <li><b>photo</b> for a single-photo widget</li> <li><b>slideshow</b> for a single-photo widget with a play/pause button, that automatically advances to the next photo</li> <li><b>list</b> for a photo-list widget</li> <li><b>photo_list</b> for a combination of a single-photo widget and a photo-list widget </li> </ul> <p>The options determine what request to use, and the widget's visual appearance. You can give any number of options, separated by the "&" sign.</p> <p>The following options determine the request. You can use these options with any HTML template, that is, with any value for <i>name</i>. </p> <table> <thead> <tr><th width="20%">option</th> <th width="80%">meaning</th></tr> </thead> <tbody> <tr><th>user=12345</th> <td>Select all photos by the user with id 12345</td></tr> <tr><th>group=300</th> <td>Select all photos that are in the group with id 300</td></tr> <tr><th>tag=sunset</th> <td>Select all photos tagged with the tag "sunset". If you combine the <i>user</i> and <i>tag</i> options, you will get photos by that user that have the given tag. </td> <tr><th>set=all</th> <td>Select all photos</td></tr> <tr><th>set=public</th> <td>Select all photos selected for Google Earth</td></tr> <tr><th>set=recent</th> <td>Select recently-uploaded photos</td></tr> <tr><th>order=date_desc</th> <td>Show the photos in descending date order, that is, from newest to oldest, instead of the default which is from oldest to newest</td></tr> </tbody> </table> <p> You can only use the <i>order</i> option if you use the <i>user</i> and/or the <i>group</i> option. You cannot use the <i>set</i> option together with the <i>user</i>, <i>group</i>, or <i>tag</i> options. If you don't use <i>user</i>, <i>tag</i>, or <i>set</i>, the default is <i>set=public</i>. </p> <p>The following options determine the visual appearance of your widget. Some options are only valid for some HTML templates. These are all optional, default values will be provided for options that you don't include; however, we recommend that you do not rely on these default values, so that your web site continues to operate unaltered if we change these values. </p> <table> <thead> <tr><th width="20%">option</th> <th width="10%">valid for</th> <th width="70%">meaning</th></tr> </thead> <tbody> <tr><th>width=400</th> <td>all</td> <td>Total widget width, in pixels</td></tr> <tr><th>height=300</th> <td>all</td> <td>Total widget height, in pixels</td></tr> <tr><th>bgcolor=%23FF0000</th> <td>all</td> <td>Background color. You can give a CSS color name, for example <i>bgcolor=red</i>, or a hexadecimal code, for example <i>bgcolor=%23FF0000</i>; note that although the hexadecimal code for red is <i>#FF0000</i>, you need to use <i>%23FF0000</i> because the <i>#</i> character needs to be escaped when you add it to a URL </td></tr> <tr><th>columns=4</th> <td>list</td> <td>How many columns of photos to show in the photo-list widget</td></tr> <tr><th>rows=1</th> <td>list</td> <td>How many rows of photos to show in the photo-list widget. Note that you can request more than one row and more than one column to obtain a grid of photos instead of a strip </td></tr> <tr><th>orientation=vertical</th> <td>list</td> <td> The orientation of the list. Valid values are <i>horizontal</i> and <i>vertical</i>. This controls the position of the arrows, the scrolling direction, and how the photos are sorted. The shape of the list, i.e. whether it is a horizontal or a vertical strip of photos (or a grid) is controlled by the <i>rows</i> and <i>columns</i> options</td></tr> <tr><th>list_size=6</th> <td>photo_list</td> <td>How many photos to show in the list </td></tr> <tr><th>position=bottom</th> <td>photo_list</td> <td> Position of the photo list relative to the single-photo widget. Valid values are <i>left</i>, <i>top</i>, <i>right</i> and <i>bottom</i></td></tr> <tr><th>delay=2.5</th> <td>slideshow</td> <td>Delay, in seconds, before advancing automatically to the next photo</td></tr> </tbody> </table> <p>How is this used? Let's say that you want to embed a list of mountain images into your web site. You'd like the list to be 280 pixels wide and 140 pixels high, and contain two rows of four photos. After checking the option tables, you decide that the URL that you need is <code> http://www.panoramio.com/wapi/template/list.html?tag=mountain&width=280&height=140&rows=2&columns=4&orientation=horizontal </code> (this should be all in one line; your browser may be showing the URL split into multiple lines if it doesn't fit the screen). Then, in your web site, you'd add code such as <code> <iframe<br> style="float: right; margin: 10px"<br/> src="http://www.panoramio.com/wapi/template/list.html?tag=mountain&amp;width=280&amp;height=140&amp;rows=2&amp;columns=4&amp;orientation=horizontal"<br/> frameborder="0" width="280" height="140" scrolling="no" marginwidth="0" marginheight="0"> </iframe><br/> </code> <iframe style="float: right; margin: 10px" src="/web/20161021075332if_/http://www.panoramio.com/wapi/template/list.html?tag=mountain&width=280&height=140&rows=2&columns=4&orientation=horizontal" frameborder="0" width="280" height="140" scrolling="no" marginwidth="0" marginheight="0"> </iframe> Again, do not split the URL in multiple lines. Also note that we've replaced the & characters in the URL with &amp; — this is because we are adding them inside a piece of HTML, and they need to be escaped. The <i>style="float..."</i> part indicates how the iframe should appear within your web site; you will need to adapt this to your needs using CSS, or remove that part altogether. We've added exactly that code in this page so you can see the effect — look at the right edge.</p> <p>Here are other examples that you may want to try: </p> <ul> <li><a href="/web/20161021075332/http://www.panoramio.com/wapi/template/list.html?set=public&width=80&height=400&rows=4&columns=1&orientation=vertical">http://www.panoramio.com/wapi/template/list.html?set=public&width=80&height=400&rows=4&columns=1&orientation=vertical</a></li> <li><a href="/web/20161021075332/http://www.panoramio.com/wapi/template/slideshow.html?user=7&delay=1.5">http://www.panoramio.com/wapi/template/slideshow.html?user=7&delay=1.5</a></li> <li><a href="/web/20161021075332/http://www.panoramio.com/wapi/template/photo.html?tag=sea&bgcolor=white">http://www.panoramio.com/wapi/template/photo.html?tag=sea&bgcolor=white</a></li> <li><a href="/web/20161021075332/http://www.panoramio.com/wapi/template/photo_list.html?tag=beach&position=right&list_size=8&bgcolor=%23000020">http://www.panoramio.com/wapi/template/photo_list.html?tag=beach&position=right&list_size=8&bgcolor=%23000020</a></li> </ul> <p> These widgets have a default behavior for clicks on photos: For the <i>photo</i>, <i>list</i>, and <i>slideshow</i> templates, and for the single-photo widget in the <i>photo_list</i> template, clicking on a photo will open the Panoramio photo page for that photo in another browser window or tab. For the photo-list widget in the <i>photo_list</i> template, clicking on a photo will show that photo in the single-photo widget. Photo widgets show, when the mouse is over them, the photo title and the photographer's name; clicking on them will go to the Panoramio photo page or the Panoramio user page, respectively.</p> <a name="templates-examples"></a> <h3>Examples</h3> <p>This section provides several ready-made examples of using Widget API HTML templates that you can cut-and-paste into your web site or blog.</p> <ul> <li><p>Show all your photos, one <b>photo</b> at a time (let's say that your Panoramio user id is <b>12345</b>; you can see the user id in the web address for your Panoramio user page). Make it <b>400</b> pixels wide and <b>300</b> pixels high. Do not automatically advance to the next photo, but instead provide arrows where the visitor can click.</p></li> <pre> <iframe src="http://www.panoramio.com/wapi/template/<b>photo</b>.html?<b>user=12345</b>&amp;width=<b>400</b>&amp;height=<b>300</b>" frameborder="0" width="<b>400</b>" height="<b>300</b>" scrolling="no" marginwidth="0" marginheight="0"> </iframe> </pre> <iframe style="margin-left: 50px" src="/web/20161021075332if_/http://www.panoramio.com/wapi/template/photo.html?user=12345&width=400&height=300" frameborder="0" width="400" height="300" scrolling="no" marginwidth="0" marginheight="0"> </iframe> <li><p>Show all the photos tagged with "<b>hdr</b>", one <b>photo</b> at a time. Use a <b>brown</b> background. Make it <b>400</b> pixels wide and <b>300</b> pixels high. Do not automatically advance to the next photo.</p></li> <pre> <iframe src="http://www.panoramio.com/wapi/template/<b>photo</b>.html?<b>tag=hdr</b>&amp;width=<b>400</b>&amp;height=<b>300</b>&amp;<b>bgcolor=brown</b>" frameborder="0" width="400" height="300" scrolling="no" marginwidth="0" marginheight="0"> </iframe> </pre> <iframe style="margin-left: 50px" src="/web/20161021075332if_/http://www.panoramio.com/wapi/template/photo.html?tag=hdr&width=400&height=300&bgcolor=brown" frameborder="0" width="400" height="300" scrolling="no" marginwidth="0" marginheight="0"> </iframe> <li><p>Show a <b>slideshow</b> of all your photos (user id 7 in this example). Make it 450 pixels wide and 400 pixels high. Automatically advance to the next photo every <b>6.5</b> seconds.</p></li> <pre> <iframe src="http://www.panoramio.com/wapi/template/<b>slideshow</b>.html?user=7&amp;width=450&amp;height=400&amp;<b>delay=6.5</b>" frameborder="0" width="450" height="400" scrolling="no" marginwidth="0" marginheight="0"> </iframe> </pre> <iframe style="margin-left: 50px" src="/web/20161021075332if_/http://www.panoramio.com/wapi/template/slideshow.html?user=7&width=450&height=400&delay=6.5" frameborder="0" width="450" height="400" scrolling="no" marginwidth="0" marginheight="0"> </iframe> <li><p>Show a <b>slideshow</b> of all your photos (user id 7 in this example) that are tagged with <b>Germany</b>. Make it 450 pixels wide and 400 pixels high.</p></li> <pre> <iframe src="http://www.panoramio.com/wapi/template/<b>slideshow</b>.html?user=7&amp;width=450&amp;height=400&amp;<b>tag=Germany</b>" frameborder="0" width="450" height="400" scrolling="no" marginwidth="0" marginheight="0"> </iframe> </pre> <iframe style="margin-left: 50px" src="/web/20161021075332if_/http://www.panoramio.com/wapi/template/slideshow.html?user=7&width=450&height=400&tag=Germany" frameborder="0" width="450" height="400" scrolling="no" marginwidth="0" marginheight="0"> </iframe> <li><p>Show a <b>list</b> of thumbnails of all your photos (user id 7 in this example). Make it 150 pixels wide and 400 pixels high, and show <b>2</b> columns and <b>5</b> rows of thumbnails. The list should scroll in the <b>vertical</b> direction. Use a <b>black</b> background. </p></li> <pre> <iframe src="http://www.panoramio.com/wapi/template/<b>list</b>.html?user=7&amp;width=150&amp;height=400&amp;<b>columns=2</b>&amp;<b>rows=5</b>&amp;<b>orientation=vertical</b>&amp;<b>bgcolor=black</b>" frameborder="0" width="150" height="400" scrolling="no" marginwidth="0" marginheight="0"> </iframe> </pre> <iframe style="margin-left: 50px" src="/web/20161021075332if_/http://www.panoramio.com/wapi/template/list.html?user=7&width=150&height=400&columns=2&rows=5&orientation=vertical&bgcolor=black" frameborder="0" width="150" height="400" scrolling="no" marginwidth="0" marginheight="0"> </iframe> <li><p>Show a <b>list</b> of thumbnails of all photos tagged with "<b>beach</b>". Make it 400 pixels wide and 200 pixels high, and show 6 columns and 3 rows of thumbnails. The list should scroll in the <b>horizontal</b> direction.</p></li> <pre> <iframe src="http://www.panoramio.com/wapi/template/<b>list</b>.html?<b>tag=beach</b>&amp;width=400&amp;height=200&amp;columns=6&amp;rows=3&amp;<b>orientation=horizontal</b>" frameborder="0" width="400" height="200" scrolling="no" marginwidth="0" marginheight="0"> </iframe> </pre> <iframe style="margin-left: 50px" src="/web/20161021075332if_/http://www.panoramio.com/wapi/template/list.html?tag=beach&width=400&height=200&columns=6&rows=3&orientation=horizontal" frameborder="0" width="400" height="200" scrolling="no" marginwidth="0" marginheight="0"> </iframe> <li><p>Show a list of thumbnails of all photos tagged with "<b>sand</b>". Make it 700 pixels wide and 100 pixels high, and show 10 columns and 1 row of thumbnails. The list should scroll in the horizontal direction.</p></li> <pre> <iframe src="http://www.panoramio.com/wapi/template/list.html?tag=sand&amp;width=700&amp;height=100&amp;columns=10&amp;rows=1&amp;orientation=horizontal" frameborder="0" width="700" height="100" scrolling="no" marginwidth="0" marginheight="0"> </iframe> </pre> <iframe style="margin-left: 50px" src="/web/20161021075332if_/http://www.panoramio.com/wapi/template/list.html?tag=sand&width=700&height=100&columns=10&rows=1&orientation=horizontal" frameborder="0" width="700" height="100" scrolling="no" marginwidth="0" marginheight="0"> </iframe> <li><p>Show a combination of large <b>photo and list</b> of thumbnails, for all your photos (user id 7 in this example). Make the combination 500 pixels wide and 500 pixels high. Show <b>8</b> photos in the list, and put the list <b>below</b> the large photo. Use a <b>light blue</b> background.</p></li> <pre> <iframe src="http://www.panoramio.com/wapi/template/<b>photo_list</b>.html?user=7&amp;width=500&amp;height=500&amp;<b>list_size=8</b>&amp;<b>position=bottom</b>&amp;<b>bgcolor=%23C0E0FF</b>" frameborder="0" width="500" height="500" scrolling="no" marginwidth="0" marginheight="0"> </iframe> </pre> <iframe style="margin-left: 50px" src="/web/20161021075332if_/http://www.panoramio.com/wapi/template/photo_list.html?user=7&width=500&height=500&list_size=8&position=bottom&bgcolor=%23C0E0FF" frameborder="0" width="500" height="500" scrolling="no" marginwidth="0" marginheight="0"> </iframe> </ul> <a name="js"></a> <h2>JavaScript API</h2> <p>By accessing the Widget API through the JavaScript library, you get the full functionality of the API. The basic concepts of the JavaScript library are <a href="#request"><b>requests</b></a> and <a href="#photo-widget"><b>widgets</b></a>, as with HTML templates. In addition, you may have to use <a href="#events"><b>events</b></a> and <a href="#photo-object"><b>photo objects</b></a>.</p> <a name="js-get"></a> <h3>Obtaining the JavaScript library</h3> <p>To use the JavaScript Widget API in your web page, you need to load the following URL <code> http://www.panoramio.com/wapi/wapi.js?v=1 </code> to obtain a version localized to the language set in the user's browser configuration, or <code> http://www.panoramio.com/wapi/wapi.js?v=1&hl=de </code> to obtain a version localized to a particular language, German in the example (German's language code is "de"; you can use other language codes). This needs to be loaded in the <i>head</i> section of your page, so your HTML code will end up looking similar to this:</p> <pre> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr"> <head> <title>My page</title> <meta name="description" content="This is my page." /> <link rel="shortcut icon" type="image/x-icon" href="/img/favicon.ico" /> <link rel="stylesheet" type="text/css" href="/css/page.css" /> <script type="text/javascript" src="http://www.panoramio.com/wapi/wapi.js?v=1&amp;hl=fr"></script> </head> <body> <h1>My page</h1> ... </pre> <a name="request"></a> <h3>Request</h3> <p>A request is a JavaScript object that specifies which set of photos should be displayed by a widget. You can reuse the same request in multiple widgets. You can specify a request with a JavaScript object literal. To build a request in this way, use code like this in JavaScript:</p> <pre> var myRequest = { 'tag': 'sunset', 'rect': {'sw': {'lat': -30, 'lng': 10.5}, 'ne': {'lat': 50.5, 'lng': 30}} }; </pre> <p>These are the valid fields for a request object:</p> <table> <thead> <tr><th width="10%">name</th> <th width="20%">example value</th> <th width="70%">meaning</th></tr> </thead> <tbody> <tr><th>set</th> <td>panoramio.PhotoSet.ALL</td> <td>Selects one named photo set. Valid values are <i>panoramio.PhotoSet.ALL</i> for all photos, <i>panoramio.PhotoSet.PUBLIC</i> for all photos selected for Google Earth, and <i>panoramio.PhotoSet.RECENT</i> for recently-uploaded photos</td></tr> <tr><th>tag</th> <td>'sunset'</td> <td>Selects all photos that have the given tag. The tag must be given between single or double quotes.</td></tr> <tr><th>user</th> <td>17</td> <td>Selects all photos owned by a particular user. The user's id, a number, must be given.</td></tr> <tr><th>group</th> <td>300</td> <td>Selects all photos that are in a particular group. The group's id, a number, must be given.</td></tr> <tr><th>ids</th> <td>[{'photoId': 1000, 'userId': 187}, {'photoId': 1001, 'userId': 1}, {'photoId': 1003, 'userId': 187}]</td> <td>Selects a particular set of photos. For each photo, you must give its numerical photo id, and the numerical user id of its owner. The photos will be shown in the same order as they are given in this option</td></tr> <tr><th>rect</th> <td>{'sw': {'lat': -30, 'lng': 10.5}, 'ne': {'lat': 50.5, 'lng': 30}}</td> <td>This option is only valid for requests where you do not use the <i>ids</i> option. It indicates that only photos that are in a certain area are to be shown. The area is given as a latitude-longitude rectangle, with <i>sw</i> at the south-west corner and <i>ne</i> at the north-east corner. Each corner has a <i>lat</i> field for the latitude, in degrees, and a <i>lng</i> field for the longitude, in degrees. Northern latitudes and eastern longitudes are positive, and southern latitudes and western longitudes are negative. Note that the south-west corner may be more "eastern" than the north-east corner if the selected rectangle crosses the 180° meridian</td></tr> <tr><th>order</th> <td>panoramio.PhotoOrder.DATE_DESC</td> <td>This option is only valid for requests where you use the <i>user</i> option and you do not use the <i>rect</i> option. It requests that photos are shown in a particular order. Valid values are <i>panoramio.PhotoOrder.DATE_DESC</i>, to show them from newest to oldest, and <i>panoramio.PhotoOrder.DATE</i>, to show them from oldest to newest (this is the default)</td></tr> </tbody> </table> <p>The <i>ids</i>, <i>user</i>, <i>group</i>, <i>tag</i>, and <i>set</i> options, called "selectors", can be combined with the <i>rect</i> and <i>order</i> options, called "modifiers", only in certain combinations, as listed by this table:</p> <table> <tbody> <tr> <th>selector</th> <th>no modifier</th> <th><i>rect</i></th> <th><i>order</i></th> <th><i>rect</i> and <i>order</i></th> </tr> <tr> <th><i>ids</i></th> <td>valid</td><td>invalid</td><td>invalid</td><td>invalid</td></tr> <tr> <th><i>user</i></th> <td>valid</td><td>valid</td><td>valid</td><td>invalid</td></tr> <tr> <th><i>group</i></th> <td>valid</td><td>valid</td><td>valid</td><td>invalid</td></tr> <tr> <th><i>user</i> and <i>group</i></th> <td>valid</td><td>invalid</td><td>valid</td><td>invalid</td></tr> <tr> <th><i>user</i> and <i>tag</i></th> <td>valid</td><td>invalid</td><td>valid</td><td>invalid</td></tr> <tr> <th><i>tag</i></th> <td>valid</td><td>valid</td><td>invalid</td><td>invalid</td></tr> <tr> <th><i>set</i></th> <td>valid</td><td>valid</td><td>invalid</td><td>invalid</td></tr> <tr> <th>none</th> <td>valid</td><td>valid</td><td>invalid</td><td>invalid</td></tr> <tr> <th>other combinations</th> <td>invalid</td><td>invalid</td><td>invalid</td><td>invalid</td></tr> </tbody> </table> <p>If you don't use any selector, the default is <i>'set': panoramio.PhotoSet.PUBLIC</i>. If you specify invalid options, the Widget API will raise an exception of class <i>panoramio.InvalidPhotoRequestError</i> when you create a widget.</p> <p>Some requests contain an element of randomness, they may return different results if you run them twice. This can be problematic if you have two or more widgets that are supposed to show the same results, and there is some linkage between the widgets —for example clicking on one photo in a photo thumbnail list displays that photo in a larger format in another widget. To avoid this you can use a <i>panoramio.PhotoRequest</i> object built with a JavaScript constructor. If you pass the same <i>panoramio.PhotoRequest</i> object to two or more widgets, they will share the results of the request and the problem described will not happen. You can create a <i>panoramio.PhotoRequest</i> object in this way by passing it request options, for example with</p> <pre> var myRequest = new panoramio.PhotoRequest({ 'tag': 'sunset', 'rect': {'sw': {'lat': -30, 'lng': 10.5}, 'ne': {'lat': 50.5, 'lng': 30}} }; </pre> <p>in a similar way to how requests are defined as object literals at the beginning of this section. All widgets that accept requests as object literals also accept requests as <i>panoramio.PhotoRequest</i> objects.</p> <p>Learn more about requests in the API Reference:</p> <ul> <li><a href="/web/20161021075332/http://www.panoramio.com/api/widget/reference.html#PhotoRequest">PhotoRequest</a></li> <li><a href="/web/20161021075332/http://www.panoramio.com/api/widget/reference.html#PhotoRequestOptions">PhotoRequestOptions</a></li> <li><a href="/web/20161021075332/http://www.panoramio.com/api/widget/reference.html#PhotoOrder">PhotoOrder</a></li> <li><a href="/web/20161021075332/http://www.panoramio.com/api/widget/reference.html#PhotoSet">PhotoSet</a></li> <li><a href="/web/20161021075332/http://www.panoramio.com/api/widget/reference.html#InvalidPhotoRequestError">InvalidPhotoRequestError</a></li> </ul> <a name="photo-widget"></a> <h3>Photo widget</h3> <div id="div_photo_ex" style="float: right; margin: 10px 15px"></div> <script type="text/javascript"> var beaches = {'tag': 'beaches'}; var photo_ex_options = {'width': 350, 'height': 200}; var photo_ex_widget = new panoramio.PhotoWidget('div_photo_ex', beaches, photo_ex_options); photo_ex_widget.setPosition(0); </script> <p>The photo widget shows one photo from a request at a time. You, as the web developer, can instruct it to move to a different photo; depending on how you configure it, the user can also move to another photo by clicking on the arrows.</p> <p>You create a photo widget by creating a new instance of the panoramio.PhotoWidget class. You need to reserve, in the HTML code of your page, space where the widget will appear. When you create the widget you can specify the request that it should use to show photos, or you can choose to specify this later. You can also give configuration options that will control the widget's appearance and behavior.</p> <p>You reserve space in your HTML page by adding this code in the appropriate place:</p> <pre> <div id="wapiblock"></div> </pre> <p>You may choose another identifier instead of <i>wapiblock</i>, and you can then combine this with CSS to fine-tune the widget's appearance.</p> <p>The configuration options for a PhotoWidget are given as a JavaScript object. To build an options object, use code like this in JavaScript:</p> <pre> var myOptions = { 'width': 300, 'height': 200 }; </pre> <p>These are the valid fields for an options object for a PhotoWidget:</p> <table> <thead> <tr><th width="10%">name</th> <th width="20%">example value</th> <th width="70%">meaning</th></tr> </thead> <tbody> <tr><th>width</th> <td>300</td> <td>Widget width, in pixels</td></tr> <tr><th>height</th> <td>200</td> <td>Widget height, in pixels</td></tr> <tr><th>croppedPhotos</th> <td>false</td> <td>Whether we should use cropped photos. The value <i>panoramio.Cropping.NO_CROPPING</i> (or false) does not crop the photo. The value <i>panoramio.Cropping.TO_SQUARE</i> (or true) crops the photo to square shape. The value <i>panoramio.Cropping.TO_FILL</i> crops the photo to fill the entire image viewport. Cropped photos may be better when showing lists of small photos for navigation purposes, and normal photos may be better when the full beauty of the photo is needed.</td></tr> </tbody> </table> <p>Two additional options, <i>disableDefaultEvents</i> and <i>attributionStyle</i> are discussed later in the <a href="#events">Events</a> and <a href="#attribution-widget">Attribution widget</a> sections. Default values are provided for these options, in case you don't use them.</p> <p>Once you have prepared a request and an options object, and defined a place for the widget in the HTML code, you create a widget with the following JavaScript code:</p> <pre> var widget = new panoramio.PhotoWidget('wapiblock', myRequest, myOptions); widget.setPosition(0); </pre> <p>If you already have a JavaScript object for the DOM node where the widget should go, you can pass that to the constructor, instead of the node's identifier:</p> <pre> var wapiblock = document.getElementById('wapiblock'); var widget = new panoramio.PhotoWidget(wapiblock, myRequest, myOptions); widget.setPosition(0); </pre> <p>After the widget is constructed, it will not start showing photos right away: you always need to call the <i>setPosition</i> method at least once. We made this two separate steps so that you have a chance to set up event handlers before the user starts interacting with the widget.</p> <p>For example, we've added at the beginning of this section, in this web page, the following code:</p> <pre> <div id="div_photo_ex" style="float: right; margin: 10px 15px"></div> <script type="text/javascript"> var beaches = {'tag': 'beaches'}; var photo_ex_options = {'width': 350, 'height': 200}; var photo_ex_widget = new panoramio.PhotoWidget('div_photo_ex', beaches, photo_ex_options); photo_ex_widget.setPosition(0); </script> </pre> <p>The same effect can be obtained with, for example,</p> <pre> <div id="div_photo_ex" style="float: right; margin: 10px 15px"></div> <script type="text/javascript"> var photo_ex_widget = new panoramio.PhotoWidget( 'div_photo_ex', {'tag': 'beaches'}, {'width': 350, 'height': 200}); photo_ex_widget.setPosition(0); </script> </pre> <p>A PhotoWidget exposes the following methods. You can learn more about them in the API Reference:</p> <table> <thead> <tr><th width="20%">name</th> <th width="80%">usage</th> </thead> <tbody> <tr><th>enableNextArrow</th> <td>Controls whether the "next" arrow should be visible and active</td></tr> <tr><th>enablePreviousArrow</th> <td>Controls whether the "previous" arrow should be visible and active</td></tr> <tr><th>getAtEnd</th> <td>Checks if the widget is at the end of the photo set</td></tr> <tr><th>getAtStart</th> <td>Checks if the widget is at the start of the photo set</td></tr> <tr><th>getPhoto</th> <td>Gets information about the currently-displayed photo</td></tr> <tr><th>getPosition</th> <td>Gets the position of the current photo in the photo set</td></tr> <tr><th>setPosition</th> <td>Moves to another position in the photo set, and shows that photo</td></tr> <tr><th>setRequest</th> <td>Defines the request to use to get photos</td></tr> </tbody> </table> <p>Learn more about single-photo widgets in the API Reference:</p> <ul> <li><a href="/web/20161021075332/http://www.panoramio.com/api/widget/reference.html#PhotoWidget">PhotoWidget</a></li> <li><a href="/web/20161021075332/http://www.panoramio.com/api/widget/reference.html#PhotoWidgetOptions">PhotoWidgetOptions</a></li> </ul> <a name="photo-list-widget"></a> <h3>Photo list widget</h3> <div id="div_list_ex" style="float: right; margin: 10px 15px"></div> <script type="text/javascript"> var birds = {'tag': 'birds'}; var list_ex_options = {'width': 400, 'height': 100, 'columns': 5, 'croppedPhotos': true}; var list_ex_widget = new panoramio.PhotoListWidget('div_list_ex', birds, list_ex_options); list_ex_widget.setPosition(0); </script> <p>The photo list widget shows a set of photos from a request at a time. Typically, this widget is used to give an overview of the available photos; a detailed view of a particular photo would be shown using the photo widget. You, as the web developer, can instruct it to move to a different position in the request, to show a different set of photos; depending on how you configure it, the user can also move to another set of photos by clicking on the arrows.</p> <p>As with the photo widget, you create a photo list widget by creating a new instance of the panoramio.PhotoListWidget class. You need to reserve, in the HTML code of your page, space where the widget will appear. When you create the widget you can specify the request that it should use to show photos, or you can choose to specify this later. You can also give configuration options that will control the widget's appearance and behavior.</p> <p>You reserve space in your HTML page by adding this code in the appropriate place:</p> <pre> <div id="wapiblock"></div> </pre> <p>You may choose another identifier instead of <i>wapiblock</i>, and you can then combine this with CSS to fine-tune the widget's appearance.</p> <p>The configuration options for a PhotoListWidget are given as a JavaScript object. To build an options object, use code like this in JavaScript:</p> <pre> var myOptions = { 'width': 500, 'height': 100, 'columns': 5, 'croppedPhotos': true }; </pre> <p>These are the valid fields for an options object for a PhotoListWidget:</p> <table> <thead> <tr><th width="10%">name</th> <th width="20%">example value</th> <th width="70%">meaning</th></tr> </thead> <tbody> <tr><th>width</th> <td>300</td> <td>Widget width, in pixels</td></tr> <tr><th>height</th> <td>200</td> <td>Widget height, in pixels</td></tr> <tr><th>croppedPhotos</th> <td>false</td> <td>Whether we should use cropped photos. The value <i>panoramio.Cropping.NO_CROPPING</i> (or false) does not crop the photos. The value <i>panoramio.Cropping.TO_SQUARE</i> (or true) crops the photos to square shape. The value <i>panoramio.Cropping.TO_FILL</i> crops the photo to fill the entire image viewport. Cropped photos may be better when showing lists of small photos for navigation purposes, and normal photos may be better when the full beauty of the photo is needed.</td></tr> <tr><th>columns</th> <td>4</td> <td>How many columns of photos to show in the photo-list widget</td></tr> <tr><th>rows</th> <td>1</td> <td>How many rows of photos to show in the photo-list widget. Note that you can request more than one row and more than one column to obtain a grid of photos instead of a strip</td></tr> <tr><th>orientation</th> <td>horizontal</td> <td>The orientation of the list. Valid values are <i>panoramio.PhotoListWidgetOptions.Orientation.HORIZONTAL</i> and <i>panoramio.PhotoListWidgetOptions.Orientation.VERTICAL</i>. This controls the position of the arrows, the scrolling direction, and how the photos are sorted. The shape of the list, i.e. whether it is a horizontal or a vertical strip of photos (or a grid) is controlled by the <i>rows</i> and <i>columns</i> options</td></tr> </tbody> </table> <p>Two additional options, <i>disableDefaultEvents</i> and <i>attributionStyle</i> are discussed later in the <a href="#events">Events</a> and <a href="#attribution-widget">Attribution widget</a> sections. Default values are provided for these options, in case you don't use them.</p> <p>Once you have prepared a request and an options object, and defined a place for the widget in the HTML code, you create a widget with the following JavaScript code:</p> <pre> var widget = new panoramio.PhotoListWidget('wapiblock', myRequest, myOptions); widget.setPosition(0); </pre> <p>If you already have a JavaScript object for the DOM node where the widget should go, you can pass that to the constructor, instead of the node's identifier:</p> <pre> var wapiblock = document.getElementById('wapiblock'); var widget = new panoramio.PhotoListWidget(wapiblock, myRequest, myOptions); widget.setPosition(0); </pre> <p>After the widget is constructed, it will not start showing photos right away: you always need to call the <i>setPosition</i> method at least once. We made this two separate steps so that you have a chance to set up event handlers before the user starts interacting with the widget.</p> <p>For example, we've added at the beginning of this section, in this web page, the following code:</p> <pre> <div id="div_list_ex" style="float: right; margin: 10px 15px"></div> <script type="text/javascript"> var birds = {'tag': 'birds'}; var list_ex_options = {'width': 400, 'height': 100, 'columns': 5, 'croppedPhotos': true}; var list_ex_widget = new panoramio.PhotoWidget('div_list_ex', birds, list_ex_options); list_ex_widget.setPosition(0); </script> </pre> <p>A PhotoListWidget exposes the following methods. You can learn more about them in the API Reference:</p> <table> <thead> <tr><th width="20%">name</th> <th width="80%">usage</th> </thead> <tbody> <tr><th>enableNextArrow</th> <td>Controls whether the "next" arrow should be visible and active</td></tr> <tr><th>enablePreviousArrow</th> <td>Controls whether the "previous" arrow should be visible and active</td></tr> <tr><th>getAtEnd</th> <td>Checks if the widget is at the end of the photo set</td></tr> <tr><th>getAtStart</th> <td>Checks if the widget is at the start of the photo set</td></tr> <tr><th>getPhotos</th> <td>Gets information about the currently-displayed photos</td></tr> <tr><th>getPosition</th> <td>Gets the position of the current photo in the photo set</td></tr> <tr><th>setPosition</th> <td>Moves to another position in the photo set, and shows that photo</td></tr> <tr><th>setRequest</th> <td>Defines the request to use to get photos</td></tr> </tbody> </table> <p>Learn more about photo-list widgets in the API Reference:</p> <ul> <li><a href="/web/20161021075332/http://www.panoramio.com/api/widget/reference.html#PhotoListWidget">PhotoListWidget</a></li> <li><a href="/web/20161021075332/http://www.panoramio.com/api/widget/reference.html#PhotoListWidgetOptions">PhotoListWidgetOptions</a></li> </ul> <a name="events"></a> <h3>Events</h3> <p>When the user interacts with a web page, the web browser generates <i>browser events</i>. Events are generated when the user clicks or moves the mouse, presses a key, visits a new page, and in many other cases. Different browsers handle browser events in different ways, and making use of these events requires an understanding of the structure of a web page, or, in our case, of the internal structure of the widgets provided by the Widget API. To make it easier for you to manage user interaction, the Widget API detects browser events that are related to it, for example the user clicking on the "next" arrow, and generates <i>synthetic events</i>. These synthetic events carry higher-level information; for example, if a user clicks on a photo in a photo list, the browser may generate an event that says "mouse clicked image so-and-so at pixel 800, 300". The corresponding synthetic event would be "user clicked photo with Panoramio photo id 123, made by user id 300, with title 'View of Mallorca'". The Widget API provides you functions to detect synthetic events and act on them.</p> <p>The Widget API defines the following <i>types</i> of synthetic events.</p> <table> <thead> <tr><th width="30%">symbol</th> <th width="70%">meaning</th></tr> </thead> <tbody> <tr><th>panoramio.events.EventType.PREVIOUS_CLICKED</th> <td>The user clicked on a "previous" arrow.</td></tr> <tr><th>panoramio.events.EventType.NEXT_CLICKED</th> <td>The user clicked on a "next" arrow.</td></tr> <tr><th>panoramio.events.EventType.PHOTO_CHANGED</th> <td>The photo or photos shown on a widget have changed —for example because the Widget API has finished loading them.</td></tr> <tr><th>panoramio.events.EventType.PHOTO_CLICKED</th> <td>The user clicked on a photo.</td></tr> </tbody> </table> <p>To detect a synthetic event and act on it, you have to "listen" to it by calling the <i>panoramio.events.listen</i> function. For example, with the following code</p> <pre> var beaches = {'tag': 'beaches'}; var options = {'width': 350, 'height': 200}; var widget = new panoramio.PhotoWidget('wapiblock', beaches, options); function photoClicked(event) { alert('Photo "' + event.getPhoto().getPhotoTitle() + '" was clicked'); } panoramio.events.listen(widget, panoramio.events.EventType.PHOTO_CLICKED, photoClicked); widget.setPosition(0); </pre> <p>you create a photo widget, set up event handling so that when the user clicks on a photo <i>on that widget</i>, the function <i>photoClicked</i> will be called.</p> <p>The function <i>panoramio.events.listen</i> has more options. You can also stop listening to an event type using the functions <i>panoramio.events.unlisten</i> and <i>panoramio.events.unlistenByKey</i> functions. See the API Reference for <a href="/web/20161021075332/http://www.panoramio.com/api/widget/reference.html#events">events</a> for more details.</p> <p>You'll notice that <i>photoClicked</i> received an argument which we named <i>event</i>. Event handlers always receive such an argument. Its type and value depend on the event that was detected.</p> <table> <thead> <tr><th width="20%">event</th> <th width="80%">event value</th></tr> </thead> <tbody> <tr><th>panoramio.events.EventType.PREVIOUS_CLICKED</th> <td>An object with a field named "target" which will be the PhotoWidget or PhotoListWidget object that was clicked.</td></tr> <tr><th>panoramio.events.EventType.NEXT_CLICKED</th> <td>An object with a field named "target" which will be the PhotoWidget or PhotoListWidget object that was clicked.</td></tr> <tr><th>panoramio.events.EventType.PHOTO_CHANGED</th> <td>An object with a field named "target" which will be the PhotoWidget or PhotoListWidget object that changed.</td></tr> <tr><th>panoramio.events.EventType.PHOTO_CLICKED</th> <td>An object of type <a href="/web/20161021075332/http://www.panoramio.com/api/widget/reference.html#events_PhotoClickedEvent">panoramio.events.PhotoClickedEvent</a>. This object has a method named <i>getPosition</i> that returns the current position in the widget's photo set of the photo that was clicked, and a method named <i>getPhoto</i> that returns a <a href="#photo-object">Photo object</a> for the photo that was clicked</td></tr> </tbody> </table> <p>The Widget API automatically converts from browser events to synthetic events. In addition, the Widget API defines some default behaviors for certain synthetic events. For example, the default behavior when the "next" photo is clicked is to move to the next photo or photos in the result set, and the default behavior when a photo is clicked is to open the corresponding Panoramio photo page in a new browser window or tab. You can disable some or all of these default behaviors if you don't want them, for example because you want to provide your own behaviors. To do this, you need to use the <i>disableDefaultEvents</i> option in the options object for the PhotoWidget and PhotoListWidget. Its values are</p> <table> <thead> <tr><th width="10%">name</th> <th width="20%">example value</th> <th width="70%">meaning</th></tr> </thead> <tbody> <tr><th>disableDefaultEvents</th> <td>true</td> <td>Disable all default behaviors</td></tr> <tr><th>disableDefaultEvents</th> <td>false</td> <td>Keep all default behaviors (this is the default)</td></tr> <tr><th>disableDefaultEvents</th> <td>[panoramio.events.EventType.PREVIOUS_CLICKED, panoramio.events.EventType.PHOTO_CLICKED]</td> <td>If a list of synthetic event types is provided, the default behaviors for those events will be disabled.</td></tr> </tbody> </table> <p>Learn more about events in the API Reference:</p> <ul> <li><a href="/web/20161021075332/http://www.panoramio.com/api/widget/reference.html#events">events</a></li> <li><a href="/web/20161021075332/http://www.panoramio.com/api/widget/reference.html#events_EventType">events.EventType</a></li> <li><a href="/web/20161021075332/http://www.panoramio.com/api/widget/reference.html#events_PhotoClickedEvent">events.PhotoClickedEvent</a></li> <li><a href="/web/20161021075332/http://www.panoramio.com/api/widget/reference.html#PhotoWidgetOptions">PhotoWidgetOptions</a></li> <li><a href="/web/20161021075332/http://www.panoramio.com/api/widget/reference.html#PhotoListWidgetOptions">PhotoListWidgetOptions</a></li> </ul> <a name="photo-object"></a> <h3>Photo object</h3> <p>The Widget API defines a <i>panoramio.Photo</i> class that contains information about a Panoramio photo. If you call, for example, the <i>getPhoto</i> method of a <i>panoramio.PhotoWidget</i> object, or the <i>getPhotos</i> method of a <i>panoramio.PhotoListWidget</i> object, you will get one or more <i>panoramio.Photo</i> objects for the photos that the widgets are currently displaying. Also, if the user clicks on a photo, the Widget API will generate a synthetic event of class <i>panoramio.PhotoClickedEvent</i>, which has a method <i>getPhoto</i> that also returns a <i>panoramio.Photo</i> object.</p> <p>A Photo object has the following methods. You can learn more about them in the API Reference:</p> <table> <thead> <tr><th width="20%">name</th> <th width="80%">usage</th> </thead> <tbody> <tr><th>getPhotoId</th> <td>Returns the Panoramio photo identifier for this photo</td></tr> <tr><th>getPhotoTitle</th> <td>Returns the title of this photo</td></tr> <tr><th>getPhotoUrl</th> <td>Returns the URL of the Panoramio photo page for this photo</td></tr> <tr><th>getPosition</th> <td>Returns the position where the photo was taken, if known</td></tr> <tr><th>getOwnerId</th> <td>Returns the Panoramio user identifier for the owner of this photo</td></tr> <tr><th>getOwnerName</th> <td>Returns the name of the owner of this photo</td></tr> <tr><th>getOwnerUrl</th> <td>Returns the URL of the Panoramio user page for the owner of this photo</td></tr> <tr><th>getWidth</th> <td>Returns the width of this photo, in pixels, for the full size version (the original), oriented as the photo is to be displayed (i.e. after taking into account EXIF tags that say that the photo should be rotated when displaying it)</td></tr> <tr><th>getHeight</th> <td>Returns the height of this photo, in pixels, for the full size version (the original), oriented as the photo is to be displayed (i.e. after taking into account EXIF tags that say that the photo should be rotated when displaying it)</td></tr> </tbody> </table> <p>Learn more about Photo objects in the API Reference:</p> <ul> <li><a href="/web/20161021075332/http://www.panoramio.com/api/widget/reference.html#Photo">Photo</a></li> <li><a href="/web/20161021075332/http://www.panoramio.com/api/widget/reference.html#PhotoWidget">PhotoWidget</a></li> <li><a href="/web/20161021075332/http://www.panoramio.com/api/widget/reference.html#PhotoListWidget">PhotoListWidget</a></li> </ul> <a name="attribution-widget"></a> <h3>Attribution block</h3> <p>The <a href="/web/20161021075332/http://www.panoramio.com/api/terms.html">Terms of Service</a> for the Widget API require you to do certain things, such as give proper attribution for the photos. The Widget API tries to help you comply with the Terms of Service by, for example, automatically adding attribution language at the bottom of each widget.</p> <style type="text/css"> #div_attr_ex { position: relative; margin: 0 0 20px 30px; float: right; width: 370px; } #div_attr_ex_list { position: absolute; left: 300px; } #div_attr_ex .panoramio-wapi-images { background-color: #E5ECF9; } #div_attr_ex .panoramio-wapi-tos { background-color: #E5ECF9 !important; } </style> <div id="div_attr_ex"> <div id="div_attr_ex_list"></div> <div id="div_attr_ex_photo"></div> <div id="div_attr_ex_attr"></div> </div> <script type="text/javascript"> var sand = {'tag': 'sand'}; var sandRequest = new panoramio.PhotoRequest(sand); var attr_ex_photo_options = { 'width': 300, 'height': 300, 'attributionStyle': panoramio.tos.Style.HIDDEN}; var attr_ex_photo_widget = new panoramio.PhotoWidget( 'div_attr_ex_photo', sandRequest, attr_ex_photo_options); var attr_ex_list_options = { 'width': 70, 'height': 300, 'columns': 1, 'rows': 4, 'croppedPhotos': true, 'disableDefaultEvents': [panoramio.events.EventType.PHOTO_CLICKED], 'orientation': panoramio.PhotoListWidgetOptions.Orientation.VERTICAL, 'attributionStyle': panoramio.tos.Style.HIDDEN}; var attr_ex_list_widget = new panoramio.PhotoListWidget( 'div_attr_ex_list', sandRequest, attr_ex_list_options); var attr_ex_attr_options = {'width': 370}; var attr_ex_attr_widget = new panoramio.TermsOfServiceWidget( 'div_attr_ex_attr', attr_ex_attr_options); function onListPhotoClicked(event) { var position = event.getPosition(); if (position !== null) attr_ex_photo_widget.setPosition(position); } panoramio.events.listen( attr_ex_list_widget, panoramio.events.EventType.PHOTO_CLICKED, function(e) { onListPhotoClicked(e); }); attr_ex_photo_widget.enablePreviousArrow(false); attr_ex_photo_widget.enableNextArrow(false); attr_ex_photo_widget.setPosition(0); attr_ex_list_widget.setPosition(0); </script> <p>However, there are cases where this default behavior does not make sense; for example if you are using a very narrow widget, the automatic attribution will also be narrow which may be aesthetically unpleasing. Or if you use more than one widget in a visual unit, you may want to display a single attribution block that encompasses the whole group of widgets, instead of having one attribution block for each widget separately. To accommodate these cases, the Widget API gives you some flexibility in how these attribution blocks should be displayed. However, remember that it is still your responsibility to comply with the Terms of Service.</p> <p>Specifically, we provide two elements of customization:</p> <ul> <li>In the options object for the PhotoWidget and the PhotoListWidget, you can specify a style for the attribution. We currently provide two basic styles, as well as the option of not showing an attribution block for that widget.</li> <li>We provide a class <i>panoramio.TermsOfServiceWidget</i> that lets you add attribution blocks in your page, manually positioned where you want, separate from the photo and photo-list widgets. If you disable the attribution blocks of all your photo and photo-list widgets, you will need to use a TermsOfServiceWidget because you are required to show an attribution block near your widgets. Note that, although a TermsOfServiceWidget behaves in some ways like a "real" widget, that is, like a PhotoWidget or a PhotoListWidget, we do not consider it a widget in this documentation.</li> </ul> <p>The attribution style for a widget can be changed by using the option <i>attributionStyle</i> in the widget's options object. This works for both PhotoWidget and PhotoListWidget objects. These are the valid values and their meanings:</p> <table> <thead> <tr><th width="10%">name</th> <th width="20%">value</th> <th width="70%">meaning</th></tr> </thead> <tbody> <tr><th>attributionStyle</th> <td>panoramio.tos.Style.DEFAULT</td> <td>Show an attribution block at the bottom of this widget, as wide as the widget. The widget's height will be reduced so that the total height, of the widget plus the attribution block, is the one that you indicate in the <i>height</i> field in the widget's options object</td></tr> <tr><th>attributionStyle</th> <td>panoramio.tos.Style.DEFAULT_ADD</td> <td>Show an attribution block at the bottom of this widget, as wide as the widget. The widget's height will not be modified and will be what you indicate in the <i>height</i> field in the widget's options object, so the total height, of the widget plus the attribution block, will be larger than what you requested</td></tr> <tr><th>attributionStyle</th> <td>panoramio.tos.Style.HIDDEN</td> <td>Do not show an attribution block for this widget</td></tr> </tbody> </table> <p>If you set the attribution style for all your widgets to <i>HIDDEN</i>, you can use the panoramio.TermsOfServiceWidget class to show the attribution block somewhere else in the page, near the widgets, as you are required to do by the Terms of Service. This works in a very similar way to the photo and photo-list widgets. You start by creating a new instance of the panoramio.TermsOfServiceWidget class. You need to reserve, in the HTML code of your page, space where the attribution block will appear. You can also give configuration options that will control the block's appearance and behavior.</p> <p>You reserve space in your HTML page by adding this code in the appropriate place:</p> <pre> <div id="wapiblock"></div> </pre> <p>You may choose another identifier instead of <i>wapiblock</i>.</p> <p>The configuration options for a TermsOfServiceWidget are given as a JavaScript object. To build an options object, use code like this in JavaScript:</p> <pre> var myOptions = { 'width': 300 }; </pre> <p>There is only one valid field for an options object for a TermsOfServiceWidget:</p> <table> <thead> <tr><th width="10%">name</th> <th width="20%">example value</th> <th width="70%">meaning</th></tr> </thead> <tbody> <tr><th>width</th> <td>400</td> <td>Widget width, in pixels</td></tr> </tbody> </table> <p>Default values are provided for this option, in case you don't use it.</p> <p>Once you have prepared an options object, and defined a place for the widget in the HTML code, you create an attribution block with the following JavaScript code:</p> <pre> var block = new panoramio.TermsOfServiceWidget('wapiblock', myOptions); </pre> <p>If you already have a JavaScript object for the DOM node where the widget should go, you can pass that to the constructor, instead of the node's identifier:</p> <pre> var wapiblock = document.getElementById('wapiblock'); var block = new panoramio.TermsOfServiceWidget(wapiblock, myOptions); </pre> <p>For example, we've added at the beginning of this section, in this web page, the following code:</p> <pre> <style type="text/css"> #div_attr_ex { position: relative; margin: 0 0 20px 30px; float: right; width: 370px; } #div_attr_ex_list { position: absolute; left: 300px; } #div_attr_ex .panoramio-wapi-images { background-color: #E5ECF9; } #div_attr_ex .pwanoramio-wapi-tos{ background-color: #E5ECF9 !important; } </style> <div id="div_attr_ex"> <div id="div_attr_ex_list"></div> <div id="div_attr_ex_photo"></div> <div id="div_attr_ex_attr"></div> </div> <script type="text/javascript"> var sand = {'tag': 'sand'}; var sandRequest = new panoramio.PhotoRequest(sand); var attr_ex_photo_options = { 'width': 300, 'height': 300, 'attributionStyle': panoramio.tos.Style.HIDDEN}; var attr_ex_photo_widget = new panoramio.PhotoWidget( 'div_attr_ex_photo', sandRequest, attr_ex_photo_options); var attr_ex_list_options = { 'width': 70, 'height': 300, 'columns': 1, 'rows': 4, 'croppedPhotos': true, 'disableDefaultEvents': [panoramio.events.EventType.PHOTO_CLICKED], 'orientation': panoramio.PhotoListWidgetOptions.Orientation.VERTICAL, 'attributionStyle': panoramio.tos.Style.HIDDEN}; var attr_ex_list_widget = new panoramio.PhotoListWidget( 'div_attr_ex_list', sandRequest, attr_ex_list_options); var attr_ex_attr_options = {'width': 370}; var attr_ex_attr_widget = new panoramio.TermsOfServiceWidget( 'div_attr_ex_attr', attr_ex_attr_options); function onListPhotoClicked(event) { var position = event.getPosition(); if (position !== null) attr_ex_photo_widget.setPosition(position); } panoramio.events.listen( attr_ex_list_widget, panoramio.events.EventType.PHOTO_CLICKED, function(e) { onListPhotoClicked(e); }); attr_ex_photo_widget.enablePreviousArrow(false); attr_ex_photo_widget.enableNextArrow(false); attr_ex_photo_widget.setPosition(0); attr_ex_list_widget.setPosition(0); </script> </pre> <p>A TermsOfServiceWidget exposes the following method. You can learn more about them in the API Reference:</p> <table> <thead> <tr><th width="20%">name</th> <th width="80%">usage</th> </thead> <tbody> <tr><th>getHeight</th> <td>Returns the height, in pixels, of the attribution block. You can use this to compute the height needed for your widgets</td></tr> </tbody> </table> <p>If you configure the attribution blocks in a way that would violate the Terms of Service, the Widget API will raise an exception of class <i>panoramio.TermsOfServiceViolationError</i>.</p> <p>Learn more about attribution blocks in the API Reference:</p> <ul> <li><a href="/web/20161021075332/http://www.panoramio.com/api/widget/reference.html#tos_Style">tos.Style</a></li> <li><a href="/web/20161021075332/http://www.panoramio.com/api/widget/reference.html#TermsOfServiceWidget">TermsOfServiceWidget</a></li> <li><a href="/web/20161021075332/http://www.panoramio.com/api/widget/reference.html#TermsOfServiceWidgetOptions">TermsOfServiceWidgetOptions</a></li> <li><a href="/web/20161021075332/http://www.panoramio.com/api/widget/reference.html#PhotoWidgetOptions">PhotoWidgetOptions</a></li> <li><a href="/web/20161021075332/http://www.panoramio.com/api/widget/reference.html#PhotoListWidgetOptions">PhotoListWidgetOptions</a></li> <li><a href="/web/20161021075332/http://www.panoramio.com/api/widget/reference.html#TermsOfServiceViolationError">TermsOfServiceViolationError</a></li> </ul> <a name="api-reference"></a> <h3>API Reference</h3> <p>The <a href="/web/20161021075332/http://www.panoramio.com/api/widget/reference.html">Panoramio Widget API Reference page</a> contains details about all the classes, methods, and constants that have been described here, including the type signatures of all methods. Please refer to that page for any detail on how to use the Widget API.</p> <a name="conditions-of-use"></a> <h2>Attribution Requirements</h2> <p>To use the Panoramio Widget API, you must follow these conditions:</p> <ul> <li>Next to every photo or group of photos displayed in your site through the Panoramio Widget API you must show the Panoramio name and logo, and the text "Photos are copyrighted by their owners" or a translation in the site's language.</li> <li>Each photo whose largest displayed dimension is more than 499 pixels ("Large Photo") must include, at least when the mouse is over the photo, a link to the photo page on the Panoramio.com domain (for example, <a href="/web/20161021075332/http://www.panoramio.com/photo/532693">http://www.panoramio.com/photo/532693</a>), a link to the user page of the photo owner on the Panoramio.com domain (for example,<a href="/web/20161021075332/http://www.panoramio.com/user/1234">http://www.panoramio.com/user/1234</a>), and the name of the photo owner.</li> <li>Each photo whose largest displayed dimension is less than 500 pixels must comply with the requirements for Large Photos; or include a link to the photo page on the Panoramio.com domain; or make visible, active, or otherwise draw the user to, a photo that complies with the requirements for Large Photos.</li> </ul> <p>This is just a simplified summary of the conditions. Please check the <a href="/web/20161021075332/http://www.panoramio.com/api/terms.html">Panoramio API - Terms of Service</a> for details.</p> <p>The Widget API tries to help you comply with the Terms of Service by, for example, automatically adding attribution language at the bottom of each widget. However, remember that it is still your responsibility to comply with the Terms of Service; for example, you are not allowed to use CSS or other techniques to hide the Panoramio logo that is inserted by the Widget API at the appropriate places.</p> <a name="questions"></a> <h2>Questions</h2> <p>Questions or suggestions? Feel free to contact us at api&zwnj;@panoramio.com</p> </div> <script type="text/javascript"> pano.glass.register( pano.glass.components.Footer.start, [{"django_id":"ar","language_name":"\u0639\u0631\u0628\u064a","text_domain":"ar_EG.utf8"},{"django_id":"ast","language_name":"Asturian","text_domain":"ast_ES.utf8"},{"django_id":"be","language_name":"\u0431\u0435\u043b\u0430\u0440\u0443\u0441\u043a\u0430\u044f","text_domain":"be_BY.utf8"},{"django_id":"bg","language_name":"\u0411\u044a\u043b\u0433\u0430\u0440\u0441\u043a\u0438","text_domain":"bg_BG.utf8"},{"django_id":"bs","language_name":"Bosanski","text_domain":"bs_BA.utf8"},{"django_id":"ca","language_name":"Catal\u00e0","text_domain":"ca_ES.utf8"},{"django_id":"cs","language_name":"\u010ce\u0161tina","text_domain":"cs_CZ.utf8"},{"django_id":"da","language_name":"Dansk","text_domain":"da_DK.utf8"},{"django_id":"de","language_name":"Deutsch","text_domain":"de_DE.utf8"},{"django_id":"el","language_name":"\u0395\u03bb\u03bb\u03b7\u03bd\u03b9\u03ba\u03ac","text_domain":"el_GR.utf8"},{"django_id":"en","language_name":"English","text_domain":"en_US.utf8"},{"django_id":"es","language_name":"Espa\u00f1ol","text_domain":"es_ES.utf8"},{"django_id":"eo","language_name":"Esperanto","text_domain":"eo_XX.utf8"},{"django_id":"eu","language_name":"Euskara","text_domain":"eu_ES.utf8"},{"django_id":"fa","language_name":"\u0641\u0627\u0631\u0633\u064a","text_domain":"fa_IR.utf8"},{"django_id":"fr","language_name":"Fran\u00e7ais","text_domain":"fr_FR.utf8"},{"django_id":"gl","language_name":"Galego","text_domain":"gl_ES.utf8"},{"django_id":"he","language_name":"\u05e2\u05b4\u05d1\u05b0\u05e8\u05b4\u05d9\u05ea","text_domain":"he_IL.utf8"},{"django_id":"hr","language_name":"Hrvatski","text_domain":"hr_HR.utf8"},{"django_id":"id","language_name":"Indonesia","text_domain":"id_ID.utf8"},{"django_id":"it","language_name":"Italiano","text_domain":"it_IT.utf8"},{"django_id":"hu","language_name":"Magyar","text_domain":"hu_HU.utf8"},{"django_id":"ja","language_name":"\u65e5\u672c\u8a9e","text_domain":"ja_JP.utf8"},{"django_id":"ko","language_name":"\ud55c\uad6d\uc5b4","text_domain":"ko_KR.utf8"},{"django_id":"lt","language_name":"Lietuvi\u0161kai","text_domain":"lt_LT.utf8"},{"django_id":"mk","language_name":"\u041c\u0430\u043a\u0435\u0434\u043e\u043d\u0441\u043a\u0438","text_domain":"mk_MK.utf8"},{"django_id":"ms","language_name":"Bahasa Melayu","text_domain":"ms_ALL.utf8"},{"django_id":"nl","language_name":"Nederlands","text_domain":"nl_NL.utf8"},{"django_id":"no","language_name":"Norsk (Bokm\u00e5l)","text_domain":"no_NO.utf8"},{"django_id":"pl","language_name":"Polski","text_domain":"pl_PL.utf8"},{"django_id":"pt","language_name":"Portugu\u00eas (Portugal)","text_domain":"pt_PT.utf8"},{"django_id":"pt_BR","language_name":"Portugu\u00eas (Brasil)","text_domain":"pt_BR.utf8"},{"django_id":"ro","language_name":"Rom\u00e2n\u0103","text_domain":"ro_RO.utf8"},{"django_id":"ru","language_name":"\u0420\u0443\u0441\u0441\u043a\u0438\u0439","text_domain":"ru_RU.utf8"},{"django_id":"sk","language_name":"Slovensk\u00fd","text_domain":"sk_SK.utf8"},{"django_id":"sl","language_name":"Sloven\u0161\u010dina","text_domain":"sl_SI.utf8"},{"django_id":"sq","language_name":"Shqip","text_domain":"sq_AL.utf8"},{"django_id":"sr","language_name":"Srpski","text_domain":"sr_CS.utf8"},{"django_id":"fi","language_name":"Suomi","text_domain":"fi_FI.utf8"},{"django_id":"sv","language_name":"Svenska","text_domain":"sv_SE.utf8"},{"django_id":"ta","language_name":"\u0ba4\u0bae\u0bbf\u0bb4\u0bcd","text_domain":"ta_ALL.utf8"},{"django_id":"th","language_name":"\u0e20\u0e32\u0e29\u0e32\u0e44\u0e17\u0e22","text_domain":"th_TH.utf8"},{"django_id":"tr","language_name":"T\u00fcrk\u00e7e","text_domain":"tr_TR.utf8"},{"django_id":"uk","language_name":"\u0423\u043a\u0440\u0430\u0457\u043d\u0441\u044c\u043a\u043e\u044e","text_domain":"uk_UA.utf8"},{"django_id":"vi","language_name":"Ti\u1ebfng Vi\u1ec7t","text_domain":"vi_VN.utf8"},{"django_id":"zh_CN","language_name":"\u4e2d\u6587\uff08\u7b80\u4f53\uff09","text_domain":"zh_CN.utf8"},{"django_id":"zh_TW","language_name":"\u4e2d\u6587 (\u7e41\u9ad4)","text_domain":"zh_TW.utf8"}], "en"); </script> <div class="interim-footer-root" id="footer"> <ul class="interim-footer-links"><li><a href="/web/20161021075332/http://www.panoramio.com/terms">Terms of Service</a></li><li><a href="/web/20161021075332/http://www.panoramio.com/privacy">Privacy Policy</a></li><li><a href="/web/20161021075332/http://www.panoramio.com/api">API</a></li><li><a href="/web/20161021075332/http://www.panoramio.com/help">Help</a></li><li class="footer-with_button"><div id="footer-language_button" class="jfk-select glass_jfk-button_borderless footer-language_button"></div></li></ul> </div> </div> </body> </html>