Hola @pedro9999, básicamente es como hacer tours distintos, cada uno pensando y hecho específicamente para el dispositivo deseado.
El procedimiento, como yo lo haría, puede ser el siguiente…
Primero desarrollas un tour para computadoras de escritorio llamado “tour”. Cuando ya esta completo lo copias, puede ser con “save as”, y le das otro nombre, por ejemplo “tour tabletas”, si lo quieres para computadoras de escritorio, tabletas y teléfonos copia un tercero y lo llamas “tour teléfonos”.
Realiza los cambios de interfaz deseados en “tour tabletas” y “tour teléfonos”.
Genera los tres tours distintos asegurándote que lo haga en directorios diferentes para que no sobrescrita la información. Si, por el momento tienes todo por triplicado, pero yo lo prefiero así para tener más control, evitar errores y poder probar los 3 tours en tu computadora de escritorio de manera local.
Cuando estes seguro de que tienes el resultado deseado será momento de juntarlos para lo cual yo utilizaría la opción 2 del tutorial de panotour que compartí arriba. Aquí lo pongo de nuevo…
http://www.kolor.com/wiki-en/action/view/Panotour_-Advanced-_Different_interfaces_for_different_devices
Siguiendo esas indicaciones haría lo siguiente…
En el mismo nivel de tu carpeta “indexdata” del tour generado para escritorio creas dos carpetas nuevas, una llamada “tour_tabletas” y la otra “tour_telefonos”.
Dentro de estas carpetas copiaría los tours generados como corresponda, “tour tabletas” y “tour teléfonos”.
En el archivo “index.html” del tour para computadoras de escritorio que esta en el mismo nivel que la carpeta “indexdata” y también que las nuevas que has generado “tour tabletas” y “tour telefonos” copias el código que te proporciona el tutorial en la linea que te indica. Como en mi ejemplo también son diferentes las versiones de tabletas y teléfonos copias el siguiente…
// REDIRECTION TABLET
var Tabletcheck = function() {
var check = false;
(function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)/|plucker|pocket|psp|series(4|6)0|symbian|treo|up.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw-(n|u)|c55/|capi|ccwa|cdm-|cell|chtm|cldc|cmd-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc-s|devi|dica|dmob|do(c|p)o|ds(12|-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(-|)|g1 u|g560|gene|gf-5|g-mo|go(.w|od)|gr(ad|un)|haie|hcit|hd-(m|p|t)|hei-|hi(pt|ta)|hp( i|ip)|hs-c|ht(c(-| ||a|g|p|s|t)|tp)|hu(aw|tc)|i-(20|go|ma)|i230|iac( |-|/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |/)|klon|kpt |kwc-|kyo(c|k)|le(no|xi)|lg( g|/(k|l|u)|50|54|-[a-w])|libw|lynx|m1-w|m3ga|m50/|ma(te|ui|xo)|mc(01|21|ca)|m-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|-([1-8]|c))|phil|pire|pl(ay|uc)|pn-2|po(ck|rt|se)|prox|psio|pt-g|qa-a|qc(07|12|21|32|60|-[2-7]|i-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55/|sa(ge|ma|mm|ms|ny|va)|sc(01|h-|oo|p-)|sdk/|se(c(-|0|1)|47|mc|nd|ri)|sgh-|shar|sie(-|m)|sk-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h-|v-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl-|tdg-|tel(i|m)|tim-|t-mo|to(pl|sh)|ts(70|m-|m3|m5)|tx-9|up(.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas-|your|zeto|zte-/i.test(a.substr(0,4)))check = true})(navigator.userAgent||navigator.vendor||window.opera);
return check;
}
if(Tabletcheck()){
window.location = “tour_tabletas/index.html”;
}
// REDIRECTION PHONE
var mobilecheck = function() {
var check = false;
(function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)/|plucker|pocket|psp|series(4|6)0|symbian|treo|up.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|awa|abac|ac(er|oo|s-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw-(n|u)|c55/|capi|ccwa|cdm-|cell|chtm|cldc|cmd-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc-s|devi|dica|dmob|do(c|p)o|ds(12|-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(-|)|g1 u|g560|gene|gf-5|g-mo|go(.w|od)|gr(ad|un)|haie|hcit|hd-(m|p|t)|hei-|hi(pt|ta)|hp( i|ip)|hs-c|ht(c(-| ||a|g|p|s|t)|tp)|hu(aw|tc)|i-(20|go|ma)|i230|iac( |-|/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |/)|klon|kpt |kwc-|kyo(c|k)|le(no|xi)|lg( g|/(k|l|u)|50|54|-[a-w])|libw|lynx|m1-w|m3ga|m50/|ma(te|ui|xo)|mc(01|21|ca)|m-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|-([1-8]|c))|phil|pire|pl(ay|uc)|pn-2|po(ck|rt|se)|prox|psio|pt-g|qa-a|qc(07|12|21|32|60|-[2-7]|i-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55/|sa(ge|ma|mm|ms|ny|va)|sc(01|h-|oo|p-)|sdk/|se(c(-|0|1)|47|mc|nd|ri)|sgh-|shar|sie(-|m)|sk-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h-|v-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl-|tdg-|tel(i|m)|tim-|t-mo|to(pl|sh)|ts(70|m-|m3|m5)|tx-9|up(.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas-|your|zeto|zte-/i.test(a.substr(0,4)))check = true})
(navigator.userAgent||navigator.vendor||window.opera);
return check;
}
if(mobilecheck()){
window.location = "tour_telefonos/index.html";
}
// REDIRECTION END
Fíjate que en el código que pongo aquí como lo copie dos veces cambié el nombre de una de las variables para que no se repita…
var mobilecheck = function() {
por
var Tabletcheck = function() {
y las últimas lineas…
window.location = “mobile/index.html”;
por
window.location = “tour_tabletas/index.html”;
y
window.location = “tour_telefonos/index.html”;
que es donde tu pondrías los tours que haz hecho, usa el nombre que quieras solo cambiando el nombre de las carpetas y colocando la ruta en esas lineas y ya esta, tienes el tour respondiendo distinto de acuerdo al dispositivo con distintas interfaces.
Pero por supuesto no vas a triplicar la información de los panos y demás en el servidor, verdad? Entonces tienes que seguir con el siguiente paso opcional del tutorial “Optional - Using the desktop tiles for your mobile tour”.
Cuando hagas esas modificaciones podrás borrar los archivos correspondientes de las carpetas “tour_tabletas” y “tour_telefonos” pues ya estarán usando los recursos que se encuentran en la carpeta “indexdata” del tour que haz hecho para computadoras de escritorio.
En este último paso del tutorial se refieren a las imágenes correspondientes a los panoramas, que son las que ocupan más espacio, pero este procedimiento podrías usarlo para cualquier archivo si cambias las rutas en los archivos XML que correspondan.