{"id":941,"date":"2015-01-10T01:15:31","date_gmt":"2015-01-10T01:15:31","guid":{"rendered":"http:\/\/maquetando.com\/?p=941"},"modified":"2015-01-10T01:33:59","modified_gmt":"2015-01-10T01:33:59","slug":"prhotosphere-js-libreria-para-visualizar-fotos-de-photosphere-o-360","status":"publish","type":"post","link":"https:\/\/orpot.com\/blog\/prhotosphere-js-libreria-para-visualizar-fotos-de-photosphere-o-360\/","title":{"rendered":"Photosphere.js : librer\u00eda para visualizar fotos hechas con PhotoSphere"},"content":{"rendered":"<p><a href=\"http:\/\/maquetando.com\/wp-content\/uploads\/2015\/01\/photos.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-950\" src=\"http:\/\/maquetando.com\/wp-content\/uploads\/2015\/01\/photos.jpg\" alt=\"photos\" width=\"800\" height=\"378\" srcset=\"https:\/\/orpot.com\/blog\/wp-content\/uploads\/2015\/01\/photos.jpg 800w, https:\/\/orpot.com\/blog\/wp-content\/uploads\/2015\/01\/photos-600x284.jpg 600w, https:\/\/orpot.com\/blog\/wp-content\/uploads\/2015\/01\/photos-300x142.jpg 300w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/a><\/p>\n<p>Si tienes un dispositivo android\/iOS \u00a0con la aplicaci\u00f3n de Google \u00a0Photosphere quiz\u00e1 te has preguntado si es posible visualizar las fotograf\u00edas 360 \u00a0fuera de Google Maps o bien G+.<\/p>\n<p>Pues existe una librer\u00eda excelente programada en Javascript que funciona a la maravilla para visualizar estas fotos via web sin necesidad de casi nada de codigo :D.<\/p>\n<p>Su uso es como el de cualquier librer\u00eda simplemente enlazamos dos archivos (sphere.js y three.js) :<\/p>\n<pre class=\"lang:php decode:true \">&lt;!DOCTYPE html&gt;\r\n&lt;html lang=\"en\"&gt;\r\n &lt;head&gt;\r\n &lt;title&gt;PhotoSphere Ejemplo &lt;\/title&gt;\r\n &lt;script type=\"text\/javascript\" src=\"lib\/three.min.js\"&gt;&lt;\/script&gt;\r\n &lt;script type=\"text\/javascript\" src=\"lib\/sphere.js\"&gt;&lt;\/script&gt;\r\n &lt;script type=\"text\/javascript\"&gt;\r\n\/\/pasamos el parametro de la imagen que queremos visualizar  y le indicamos en que elemento HTML la vamos a mostrar \r\n new Photosphere(\"pano.jpg\").loadPhotosphere(document.getElementById(\"sphere\"));\r\n &lt;\/script&gt;\r\n &lt;\/head&gt;\r\n &lt;body&gt;\r\n \r\n &lt;div id=\"sphere\" style=\"width: 100%; min-height: 700px;\"&gt;&lt;\/div&gt;\r\n \r\n \r\n \r\n &lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p>&nbsp;<\/p>\n<p>Listo!, como ves es muy simple , puedes ver un ejemplo <a href=\"http:\/\/www.maquetando.com\/ejemplos\/photos\/prueba.php\" target=\"_blank\">aqui<\/a>\u00a0(espera un poco ya que la imagen es algo pesada :P)<\/p>\n<p>Enlace [<a href=\"https:\/\/github.com\/kennydude\/photosphere\" target=\"_blank\">PhotoSphere.js<\/a> ]<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Si tienes un dispositivo android\/iOS \u00a0con la aplicaci\u00f3n de Google \u00a0Photosphere quiz\u00e1 te has preguntado&hellip;<\/p>\n","protected":false},"author":1,"featured_media":950,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13,2],"tags":[93,85],"_links":{"self":[{"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/posts\/941"}],"collection":[{"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/comments?post=941"}],"version-history":[{"count":9,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/posts\/941\/revisions"}],"predecessor-version":[{"id":954,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/posts\/941\/revisions\/954"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/media\/950"}],"wp:attachment":[{"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/media?parent=941"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/categories?post=941"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/tags?post=941"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}