Hola atodos, he encontrado un codigo para hacer una presentación de imágenes que me interesa mucho usar pero yo de javascript no se casi nada por no decir nada.
Necesito cambiar algunos parámetros y os pido vuestra ayuda por favor.
El link donde podeis ver el codigo es:
hasiandasha.com/castellano/rincon/fotografias.html
El codigo os lo copio aquí al final y lo que megustaría es:
Que la circunferencia se mucho más abierta y las imagenes más separadas, aunque en el codigopone la línea que se encarga de eso yo por más que cambio los números no hay manera de que se separen ni se haga más amplia la circunferencia.
Me gustaría ponerle fondo al recuadro de la imagen o quizá no, quiero probarlo pero tampoco sé.
Y por último me gustaría que cada imagen cargue una web en el marco de la pa´gina que se llama rincon, si es posible, había pensado que la web se llamara igual que la foto y decirle algo asi como carga en rincon el nombre de la foto.php.
Espero que m podais ayudar por favor.
Os dejo aquí el código completo.
Muchas gracias
Alejandra
fotografias.html
<html>
<head>
<title>Rotación de fotografías</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<link href= "../../css/estilos.css" rel="stylesheet" type="text/css">
<link href="../../css/contenido_galgo.css" rel="stylesheet" type="text/css">
<script src="comun.js"></script>
<script>
<!-- Variable para almacenar el identificador del procesoque ejecutamos repetitivamente para rotar las imágenes-->
var evento;
<!-- Almacenamos la velocidad en una variable para que se pueda modificar-->
var velocidad=4;
<!-- Un array con los nombres de las imágenes, la extensión la tengo predeterminada más abajo.-->
<!--En este caso son cinco imágenes pero puede haber más.-->
<!-- Deben existir dos imágenes,<nombre>.jpg y g<nombre>.jpg, la primera imágen es la miniatura y la segunda es la original que se abrirá
<!-- cuando se pulse en la imagen. El tamaño de las miniaturas no debe ser grande para evitar así que se tapen mientra giran-->
var nombreImagenes = new Array('taylor', 'taylor', 'taylor', 'taylor', 'taylor');
var imagenes = new Array();
function carga() {
//Obtenemos el objeto DIV que contendrá las imágenes
var obj = document.getElementById("contenedor");
/*Inicializamos cada imágen dándole una posición fija, estilos, eventos: hacer que pare la rotación cuando se pone encima el ratón, continuar
la rotación cuando se deja de poner el ratón en la imágen, abrir la imagen original cuando se pulsa en ella */
for (var i=0; i<nombreImagenes.length; i++) {
imagenes[i] = new Image();
imagenes[i].src = '../../imag/lebreles/'+nombreImagenes[i]+'.gif';
imagenes[i].style.top = '100px';
imagenes[i].style.left = '200px';
imagenes[i].style.width = '200px';
imagenes[i].style.height = '100px';
imagenes[i].style.border = '1px solid blue';
imagenes[i].style.cursor = (IE)? "hand":"pointer";
imagenes[i].onmouseover = parar;
imagenes[i].onmouseout = rotar;
imagenes[i].onclick = abre;
imagenes[i].angulo=0;
imagenes[i].ancho = 65;
imagenes[i].alto = 35;
}
//Cálculamos la separación entra cada imágen
var parte = 1000/imagenes.length;
//Posicionamos cada imágen
for (i=0; i<imagenes.length; i++) {
posiciona(imagenes[i], i*parte);
}
//Añadimos las imágenes al contenedor
obj.innerHTML = "";
for (var i=0; i<imagenes.length; i++) {
obj.appendChild(imagenes[i]);
}
}
//Funcion que se encarga de posicionar la imagen dentro del contenedor, se calcula la posición izquierda, posición derecha, el ancho y el alto
//de la imagen y la posición en la coordenada Z. Para hacer el efecto 3D es necesario cambiar el tamaño de la imagen para simular la profundidad.
function posiciona(_obj, _parte) {
//Calculamos el ángulo de la circumferencia por la que gira
var parte = (_parte+_obj.angulo)*2*Math.PI/1000;
_obj.angulo = (parseInt(_obj.angulo) + _parte) % 1000;
_obj.style.position = "absolute";
//Posicón dentro del eje Z (profundidad)
_obj.style.zIndex = parseInt((200-40*Math.sin(parte)));
//Calculamos el ancho y el alto según la profundidad (en este caso de un cuadro)
ancho = parseInt((65-35*Math.sin(parte)))*3;
_obj.style.width = ancho+"px";
_obj.style.height = ancho+"px";
//Calculamos la posición vertical según el ancho y el ángulo
arriba = parseInt(_obj.style.top.substring(0, _obj.style.top.length-2));
_obj.style.top = parseInt((100-40*Math.sin(parte))-(ancho/3))+"px";
//Cálculamos la posición horizontal según el ancho y el ángulo
izq = parseInt(_obj.style.left.substring(0, _obj.style.left.length-2));
_obj.style.left = parseInt(((document.body.clientWidth/2)+100*Math.cos(parte))-(ancho/2))+"px";
}
//La función para rotar las imágenes se debe llamar en el evento onload del BODY y debe ejecutarse cada cierto tiempo
function rotar() {
//Obtenemos todas las imagenes del contenedor y luego las posiciones
var obj = document.getElementById("contenedor");
var imgs = obj.getElementsByTagName("img");
for (var i=0; i<imgs.length; i++) {
posiciona(imgs[i], velocidad);
}
evento = setTimeout("rotar()", 100);
}
//Para el movimiento de las imagenes cancelando el proceso de rotación
function parar(evt) {
clearTimeout(evento);
}
function abre(evt) {
var obj;
if (IE) {
obj=event.srcElement;
} else {
obj=evt.target;
}
var f = obj.src;
f = f.substring(0, f.lastIndexOf("/")+1)+"g"+f.substring(f.lastIndexOf("/")+1);
abrir(f, 300, 300);
}
</script>
</head>
<!-- Lo primero qu enecesitamos es un contenedor para colocar las imagenes, se va a usar una capa DIV y tendrá que tener
un posicionamiento absoluto para poder moverla libremente por la pantalla-->
<body onload="carga(); rotar()" scroll=no>
<p> </p>
<p> </p>
<p> </p>
<p><br>
</p>
<div id="contenedor" style="position: absolute; ">Cargando datos...</div>
</body>
</html>
comun.js
var IE = navigator.appName.toLowerCase().indexOf("microsoft ") > -1;
var Mozilla = navigator.appName.toLowerCase().indexOf("netscape" ) > -1;
var ventana=0;
function ir(url) {
var obj = document.getElementById("contenido");
obj.src=url;
}
function abrir(url, ancho, alto) {
ventana = window.open(url, "_ventana");
}
