ROTACIÓN PARA TUS IMÁGENES (PASO A PASO)

**gjulian** · 03/08/2010, 12:28

Muy bueno, enhorabuena, es casi lo que llevo buscando... ni me acuerdo.
Aunque para decir verdad, no es exactamente esto.
Me explico, yo tengo en mi proyecto puesta una imagen de fondo que se ajusta a cuaquier resolucion de pantalla asi:
HTML

Código:

<div>
[img]img/fondo3.jpg[/img]
</div>

CSSS

Código:

html, body {
margin:0; 
padding:0; 
width:100%; 
height:100%; 
overflow:hidden;
}

#fondo {
position:absolute; 
z-index:1; 
width:100%; 
height:100%;
}

Y creí que con tu script podría hacer un pase de imagenes de fondo, pero no sé o no doy con la tecla. Lo he intentado y no hay manera. ¿podríais echarle un vistazo a ver si se puede adaptar tu script al <div>
[img]img/fondo3.jpg[/img]
</div>?
Gracias

**gjulian** · 03/08/2010, 17:08

CONSEGUIDO
Tras muchos intentos lo he conseguio usando el script que dejaste y retocando un poco, he conseguido rotar la imagen de fondo y que se vea completa dicha imagen en cualquier resolucion independientemente del contenido.
HTML

Código:

<script type="text/javascript" src="crossfader.js"></script>
</head>
<body>

<div>
[img]img/3.png[/img]
[img]img/1.png[/img]
[img]img/3.png[/img]
[img]img/2.png[/img]
</div>
<div id="contenedor">
<div id="contenido">
bla,bla,bla
</div>
</div>
<script type="text/javascript">
var cf = new Crossfader( new Array('cf1','cf2','cf3','cf4'), 2000, 7000 );
</script>
</body>
</html>

CSS

Código:

*{text-indent:0px; margin:0px; padding:0px; border:0px;}

html, body {
margin:0; 
padding:0; 
width:100%; 
height:100%; 
overflow:hidden;
}

body {
background-color:#FFFF99 ;
font-family:Andalus, Arial, Helvetica, sans-serif; 
font-size:1.1em;
}

#cf1,#cf2,#cf3,#cf4 {
position:absolute; 
z-index:1; 
width:100%; 
height:100%;
}

#fondo{
position:absolute; 
z-index:1; 
width:100%; 
height:100%;
}

#contenedor {
position:absolute;
width:100%; 
height:100%; 
top:0; left:0; 
overflow:auto; 
z-index:2;
} 

#contenido {
padding:25px 300px 20px 14%;
}

Y como es de buen nacido ser agradecido expongo esto para aquel que le pueda servir como a mi.
Gracias

**David** · 25/08/2010, 00:58

Ups.

Un pequeño problema al enviar el mensaje. Vean el siguiente que si es el verdadero. Diculpa

**David** · 25/08/2010, 00:59

Hola amigos.
He querido hacer este Script también pero no me funciona. Aquí les dejo los diferentes códigos para que me ayuden a ver si tengo alguna falla.

HTML

Código:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="script.css" type="text/css" media="all">
<title>Documento sin t&iacute;tulo</title>
<script type="text/javascript" src="crossfader.js"></script> 
<style type="text/css"> 
#wrapper {float:right ;width:450px; height:250px} 
</style>
</head>

<body>
<div id="wrapper"> 
<div class="cf_wrapper"> 
<div class="cf_element" id="cf1">[img]Pirata/imagenuno.jpg[/img]</div> 
<div class="cf_element" id="cf2">[img]Pirata/imagendos.jpg[/img]</div> 
<div class="cf_element" id="cf3">[img]Pirata/imagentres.jpg[/img]</div> 
<div class="cf_element" id="cf4">[img]Pirata/imagencuatro.jpg[/img]</div> 
</div> 

<script type="text/javascript"> 
var cf = new Crossfader( new Array('cf1','cf2','cf3', 'cf4'), 2000, 2000 ); 
</script> 
</body>
</html>

CSS

Código:

#wrapper {text-align:left; height:250px; width:450px;}

crossfader.js

Código:

/** 
 *  author:      Timothy Groves - http://www.brandspankingnew.net 
 *   version:   1.0 - 2006-09-25 
 * 
 *   requires:   nothing 
 * 
 */ 

var useBSNns; 

if (useBSNns) 
{ 
   if (typeof(bsn) == "undefined") 
      bsn = {} 
   var _bsn = bsn; 
} 
else 
{ 
   var _bsn = this; 
} 



_bsn.Crossfader = function (divs, fadetime, delay ) 
{    
   this.nAct = -1; 
   this.aDivs = divs; 
    
   for (var i=0;i<divs.length;i++) 
   { 
      document.getElementById(divs[i]).style.opacity = 0; 
      document.getElementById(divs[i]).style.position = "absolute"; 
      document.getElementById(divs[i]).style.filter = "alpha(opacity=0)"; 
      document.getElementById(divs[i]).style.visibility = "hidden"; 
   } 
    
   this.nDur = fadetime; 
   this.nDelay = delay; 
       
   this._newfade(); 
} 


_bsn.Crossfader.prototype._newfade = function() 
{ 
   if (this.nID1) 
      clearInterval(this.nID1); 
    
   this.nOldAct = this.nAct; 
   this.nAct++; 
   if (!this.aDivs[this.nAct])   this.nAct = 0; 
   document.getElementById( this.aDivs[this.nAct] ).style.visibility = "visible"; 
    
   this.nInt = 50; 
   this.nTime = 0; 
    
   var p=this; 
   this.nID2 = setInterval(function() { p._fade() }, this.nInt); 
} 


_bsn.Crossfader.prototype._fade = function() 
{ 
   this.nTime += this.nInt; 
    
   var op = this._easeInOut(this.nTime, 0, 1, this.nDur); 
   var ieop = op*100; 
   document.getElementById( this.aDivs[this.nAct] ).style.opacity = op; 
   document.getElementById( this.aDivs[this.nAct] ).style.filter = "alpha(opacity="+ieop+")"; 
    
   if (this.nOldAct > -1) 
   { 
      document.getElementById( this.aDivs[this.nOldAct] ).style.opacity = 1 - op; 
      document.getElementById( this.aDivs[this.nOldAct] ).style.filter = "alpha(opacity="+(100 - ieop)+")"; 
   } 
    
   if (this.nTime == this.nDur) 
   { 
      clearInterval( this.nID2 ); 
       
      if (this.nOldAct > -1) 
         document.getElementById( this.aDivs[this.nOldAct] ).style.visibility = "hidden";    
       
      var p=this; 
      this.nID1 = setInterval(function() { p._newfade() }, this.nDelay); 
   } 
} 



_bsn.Crossfader.prototype._easeInOut = function(t,b,c,d) 
{ 
   return c/2 * (1 - Math.cos(Math.PI*t/d)) + b; 
}

Espero que puedan ayudarme y disculpen mi ignorancia, soy novato.[/code]

**peugeot** · 26/08/2010, 00:45

hola amigos,

gjulian, cuánto me alegro de que te haya salido, no te respondí porque recién entro al foro después de mucho tiempo.

waldragon, gracias por tu post, aunque no es para tanto.

david, en el punto 2, te falta una etiqueta de cierre de uno de los div:
</div>

ojalá eso sea todo, ya nos contarás.

saludos a todos.

**David** · 26/08/2010, 02:13

peugeot, ya coloque lo que medijistes en donde va pero aun sigue sin correr el Script. ¿Habrá otro problema?

**peugeot** · 26/08/2010, 22:15

david, por qué no nos das tu url para ver mejor? apaarentemente, todo está bien. ahora, cuando no aparecen las imágenes, por lo general, se trata de un problema de rutas. Verifica las rutas de tus imágenes, sobretodo si tu carpeta empieza con mayúscula, así también deberá estar en tu wordspace.

Otra cosa, subiste el archivo de texto a la carpeta local e internet?

**David** · 26/08/2010, 22:54

Hola peugeot, no te doy la url de mi web porque no la tengo montada en internet. Estoy trabajando con ella desde el sitio local.
Si salen las imagenes pero una montadas arriba de la otra a la derecha del navegador sin ejecutarse la rotación.

Nose que pasará, pero dejame ver si te mando un pantallazo de como se ve la web desde un navehador normal.

**simole** · 07/09/2010, 10:39

Es script me ha salido perfectamente, gracias. Querría saber si se puede poner dos veces para dos apartados de la página, porque no lo consigo. :?

**spitfire2** · 08/09/2010, 23:01

muy bueno logre hacerlo con 7 imagenes, se ponemedia pesada pero me gusta como queda; muchas gracias.

**simole** · 15/09/2010, 12:15

Ya conseguí poner los dos script. Saludos

**mago** · 20/09/2010, 18:23

hola mui bueno el post pero lo pongo i no me funciona aber si tu me puedes ajudar donde lo e echo mal gracias.

te pongo el codigo para que lo veas

<html>

<head>

<script language="javascript">
step=0;
function autoImgFlip() {
if (step < 3) {step++;}
else {step=0;}
if (step==0)
{a.src="imagenes/imagencero.jpg";}
if (step==1)
{a.src="imagenes/imagenuno.jpg";}
setTimeout("autoImgFlip()", 3000);
if (step==2)
{a.src="imagenes/imagendos.jpg";}
if (step==3)
{a.src="imagenes/imagentres.jpg";}

}
</script>

</head>

<body onLoad="autoImgFlip();">

<title>canaletas</title>

<body bgcolor="#4F4F4F">

<font size="100" face="algerian" color="#C0FF3E">
<center>galeria de fotos</center>
</font>

</p>

<table border="1" align="center" cellspacing="1" cellpadding="3" width="100%" height="90%">

<tr>

<td width=17% align="center" valign="center" body bgcolor="#C0FF3E"><font face="algerian" </font >
menu
</td>

<td colspan="2" rowspan="3" width="650" height="450" height=13% align="center" valign="center" body bgcolor="#C0FF3E">

[img]imagenes/imagencero.jpg[/img]

</td>

<td body bgcolor="#C0FF3E" align="center" valign="center">

</td>

</tr>

<tr>
<td rowspan="2" align="center" valign="center" body bgcolor="#C0FF3E"><font face="algerian" </font>
inicio
historia del canaletas
nuestra carta
galeria de fotos
foro
contacto
</td>

<td rowspan="2" width=17% align="center" valign="center" body bgcolor="#C0FF3E"><font face="algerian" </font>

canaletas
bar cafeteria
pl.del angel nº 2
08140
caldes de montbui
(barcelona)
</td>

</tr>

<tr>

</tr>
</table>

</body>

</html>

**Exitoso** · 14/10/2010, 18:52

buen post, me salio de lujo un buen escript... hay algo que quisiera tener y es que alado de esa imagenes grande que se pasan, tener las imagenes mas pequeñas una abajo de la otra, no c si me explico asi como esta en la pagina principal de latam.msn.com alguien me ayuda...

**veroespindola** · 22/10/2010, 16:41

Me encantó el script y tu descripción fue excelente! Copié los códigos que indicaste y funcionó inmediatamente.

La pregunta que quiero hacerte es: ¿cómo lograr que la transición entre una imagen y otra sea lenta, como está en el sitio http://www.celuladeoracion.com/? Porque mis imágenes pasan como violentamente de una a otra.

Te agradezco desde ya por tu aporte!!!

Saludos, Vero Espindola

**peugeot** · 20/11/2010, 18:54

Hola Vero,

no sé si ya solucionaste el problema pero, en el punto 4, explico el detalle del tiempo de exposición de las imágenes. De todos modos, aquí, lo cito:

Iniciado por peugeot

y la segunda cifra 2000 corresponde al tiempo que permanecerá en exposición la imagen antes de pasar a la siguiente. Prueben cambiando las cantidades a su gusto.

Por si acaso, yo en mi web, tengo las 2 cantidades en 2000. Un saludo.