Pamoorama: muestra tus imágenes de forma panorámica
Con Pamoorama podrás mostrar tus fotografías de la mejor manera posible, en 360 grados y de una forma muy simple. Funciona aprovechando mootools y no es necesario css, solamente algo de html. Vamos a ver como implementarlo. Aquí tenéis la demo que yo e hecho para que veáis como queda.
1.- Lo primero descargamos Pamoorama0.3 y mootools.
2.- Creamos una carpeta que llamaremos pamoorama, dentro de la cual hacemos otra con nombre js. Metemos en esta última las dos librerías javascript que hemos descargado y en pamoorama la imagen que queramos usar para la vista en 360 grados.
3.- Creamos un archivo html con el siguiente código que veis debajo, y lo guardamos con el nombre que queramos y extensión .html dentro de la carpeta pamoorama.
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
<title>Pamoorama</title>
-
-
<script type="text/javascript" src="js/mootools.v1.11.js" charset="utf-8"></script>
-
<script type="text/javascript" src="js/pamoorama0.3.js" charset="utf-8"></script>
-
-
<script type="text/javascript" charset="utf-8">
-
window.addEvent('load', init);
-
-
function init() {
-
var myPamoo = new pamoorama('pamoorama1', {activateSlider: false, width: 650, footercolor:"#ff7100", captioncolor:"#8fb50d", caption: "diarioTHC", autoscrollSpeed:90000, enableAutoscroll: true, autoscrollOnLoad:true});
-
-
}
-
</script>
-
</head>
-
-
-
<div id="pamoorama1" alt="corona50.gif"></div>
-
</body>
-
</html>
Explicando cada parte del código:
Primero de todo llamamos a las dos librerías:
Y seguidamente a pamoorama:
-
<script type="text/javascript" charset="utf-8"></script>
-
window.addEvent('load', init);
-
-
function init() {
-
var myPamoo = new pamoorama('pamoorama1', {activateSlider: false, width: 650, footercolor:"#ff7100", captioncolor:"#8fb50d", caption: "diarioTHC", autoscrollSpeed:90000, enableAutoscroll: true, autoscrollOnLoad:true});
-
-
}
Con el código:
-
new pamoorama('pamoorama1', {activateSlider: false, width: 650, footercolor:"#ff7100", captioncolor:"#8fb50d", caption: "diarioTHC", autoscrollSpeed:90000, enableAutoscroll: true, autoscrollOnLoad:true});
primero se crea un nuevo “pamoorama”, al que se le pasa la id del “cajón” que usaremos para cargar la imagen:
-
new pamoorama('pamoorama1',
-
<div id="pamoorama1
y luego las opciones:
-
{activateSlider: false, width: 650, footercolor:"#ff7100", captioncolor:"#8fb50d", caption: "diarioTHC", autoscrollSpeed:90000, enableAutoscroll: true, autoscrollOnLoad:true});
activateSlider: puede estar en true o false, y permite mover la imagen hacia adelante o hacia atrás con el ratón.
width: el ancho que le daremos
footercolor: el color de fondo
captioncolor: el color de las letras (titulo de la imagen, controloes si están activados)
caption: texto que aparecerá debajo de la imagen
autoscrollSpeed: velocidad a la que se moverá la imagen
enableAutoscroll: puede estar en trae o false, activa los botones para que podamos para o comenzar la animación
autoscrollOnLoad: puede esta en trae o false, hace que la animación comienza ella sola o no
En html, como decía, hacemos un div, con la id que luego pasamos a pamoorana y alt con el nombre de la image:
-
<div id="pamoorama1" alt="corona50.jpg"></div>
Una forma original pero simple para mostrar nuestras imágenes.
Posts relacionados
- Admira las nuevas 7 maravillas del mundo en panorámico
- FanzyZoom, muestra imágenes con opción de ampliarlas
- WordPress ya muestra al instante cualquier nueva publicación gracias a RSS Cloud
3 Comentarios
Dejar un comentario
Hola trabajo en panorámicas hace rato, no soy muy ducho en action script, e intento visualizar con pamoorama, y hago lo que ustedes indican pero no me funciona, desearía me indicaran donde puedo montar el ejercicio para que puedan evaluar donde me equivoco.
Gracias
COMO PUEDO MONTAR UNA PANORAMICA EN UNA PAGINA WEB
Es posible hacer con pamoorama una vista 360 sin tope, sino que sea rotativa?