Efecto no compatible con Fire Fox

thrash · #1 (**permalink**) 31/12/2006, 15:51

Estimados

tengo esto en un archivo jamado fade2.js y en la página donde va esta bien "llamado" genera un efecto muy "simpático" con la transición de imagnes , el tema es que sólo se ve bien en IE y no con Fire Fox . ¿Se puede hacer algo para que sea compatible con ambos navegadores? .

Gracias
Por cierto en la tabla donde va lo llamo así

Código:

<img src="http://www.gaf.cl/csforestalescl/esqueleto/fade/02.jpg" name="cube"  border=0 style="filter:progid:DXImageTransform.Microsoft.Stretch(stretchStyle='PUSH')">

fade2.js

Código:

<!--

//Picture Cube slideshow - By Tony Foster III
//Modifications by JK
//Visit JavaScript Kit (http://javascriptkit.com) for script

var specifyimage=new Array() //Your images
specifyimage[0]="http://www.gaf.cl/csforestalescl/esqueleto/fade/04.jpg"
specifyimage[1]="http://www.gaf.cl/csforestalescl/esqueleto/fade/03.jpg"
specifyimage[2]="http://www.gaf.cl/csforestalescl/esqueleto/fade/02.jpg"

var delay=5000 //3 seconds

//Counter for array 
var count =1;

var cubeimage=new Array()
for (i=0;i<specifyimage.length;i++){
cubeimage[i]=new Image()
cubeimage[i].src=specifyimage[i]
}

function movecube(){
if (window.createPopup)
cube.filters[0].apply()
document.images.cube.src=cubeimage[count].src;
if (window.createPopup)
cube.filters[0].play()
count++;
if (count==cubeimage.length)
count=0;
setTimeout("movecube()",delay)
}

window.onload=new Function("setTimeout('movecube()',delay)")
//-->

caricatos · #2 (**permalink**) 01/01/2007, 00:25

Hola:

Los filtros son propiedad de microsoft y no son estándar, así que solo va a funcionar en navegadores basados en explorer...

No sé que hace tu efecto, pero se pueden hacer muchos de transiciones que funcionan en todos los navegadores (recuerdo haber propuesto un tema al respecto pero no lo encuentro...)

Puedes ver un ejemplo en esta página: Cuentos y Jardines

Saludos

thrash · #3 (**permalink**) 01/01/2007, 13:15

Lo que debería "hacer" al menos en IE es esto http://www.gaf.cl/csforestalescl/ cosa que no hace en el FF.

Igualmete me parecen interesantes los efectos que muestras , sería mucho pedir que me los facilitases .

Gracias y un gran 2007

caricatos · #4 (**permalink**) 01/01/2007, 16:19

Hola:

Hacía tiempo que quería hacer ese efecto, y aproveché la ocasión para ponerme el mameluco...

Código:

<html>
	<head>
		<title>
			efecto
		</title>
		<script type="text/javascript">
			var tam1 = 100;
			var tam2 = 0;
			function transitar() {
				if (tam1 > 0)	{
					tam1--; tam2++;
					document.images.img1.style.width = tam1 + "%";
					document.images.img1.style.left = (100 - tam1) + "%";
					document.images.img2.style.width = tam2 + "%";
					document.images.img2.style.left = (100 - tam2) + "%";
					setTimeout("transitar()", 10);
				}
				else	{
					tmp = document.images.img2.src;
					tam1 = 100; tam2 = 0;
					document.images.img2.src = document.images.img1.src;
					document.images.img1.style.width = tam1 + "%";
					document.images.img1.style.left = "0%";
					document.images.img2.style.width = tam2 + "%";
					document.images.img2.style.left = "0%";
					document.images.img1.src = tmp;
					setTimeout("transitar()", 1000);
				}
			}
		</script>
	</head>
	<body onload="transitar()">
		<div id="efecto" style="width: 133px; height: 100px; position:relative">
			<img src="http://www.pepemolina.com/galeria/fotos/mini/Diapositiva81.jpg"
			style="width: 100%; height: 100%; position: absolute; top: 0; left: 0%"
			name="img1" />
			<img src="http://www.pepemolina.com/galeria/fotos/mini/Diapositiva82.jpg"
			style="width: 0%; height: 100%; position: abolute; top: 0; left: 0%" 					name="img2" />
		</div>
	</body>
</html>

Funciona en los 3 navegadores, aunque en firefox noté un parpadeo

Sobre los efectos, puedes copiar de la página lo que quieras.

Saludos

thrash · #5 (**permalink**) 01/01/2007, 16:54

gracias , es lo que quería, aunque el parpadeo yo lo noto en el IE , será la resaca del año nuevo

.

Saludos

caricatos · #6 (**permalink**) 02/01/2007, 01:31

Hola:

Creo que el parpadeo se debe a la reasignación de imágenes... estuve haciendo algunas pruebas y conseguí que no parpadee, pero el efecto es otro (tal vez te guste)

Código:

<html>
	<head>
		<title>
			efecto
		</title>
		<script type="text/javascript">
			var imagenes =
				["http://www.pepemolina.com/galeria/fotos/mini/Diapositiva81.jpg",
				"http://www.pepemolina.com/galeria/fotos/mini/Diapositiva82.jpg",
				"http://www.pepemolina.com/galeria/fotos/mini/Diapositiva100.jpg"];
			var actual = 1;
			var incre = "img2";
			var decre = "img1";
			var tam1 = 100;
			var tam2 = 0;
			function transitar() {
				if (tam1 > 0)	{
					tam1--; tam2++;
					document.images[decre].style.width = tam1 + "%";
					document.images[decre].style.left = (100 - tam1) + "%";
					document.images[incre].style.width = tam2 + "%";
					document.images[incre].style.left = (100 - tam2) + "%";
					setTimeout("transitar()", 10);
				}
				else	{
					tam1 = 100; tam2 = 0;
					document.images[decre].src = imagenes[++actual % imagenes.length];
					document.images[decre].style.left = "0px";
					tmp = incre; incre = decre; decre = tmp;
					setTimeout("transitar()", 1000);
				}
			}
		</script>
	</head>
	<body onload="transitar()">
		<div id="efecto" style="width: 133px; height: 100px; position:relative">
			<img src="http://www.pepemolina.com/galeria/fotos/mini/Diapositiva81.jpg"
			style="width: 100%; height: 100%; position: absolute; top: 0; left: 0%"
			name="img1" />
			<img src="http://www.pepemolina.com/galeria/fotos/mini/Diapositiva82.jpg"
			style="width: 0%; height: 100%; position: abolute; top: 0; left: 0%" 					name="img2" />
		</div>
	</body>
</html>

Puedes verlo insertando el código en esta página: Probador de scripts

Saludos

thrash · #7 (**permalink**) 02/01/2007, 07:05

muy interesante , veré si al ponerle las 25 imágenes que deben ir en el definitivo consigo lo que realmente tengo en mente, que es mostrar la evolución de la facultad desde el año 1982 hasta el 2007, que son los 25 años desde su creación. Bueno eso último fue el dato inútil de este mensaje.

Gracias

caricatos · #8 (**permalink**) 03/01/2007, 01:59

Hola:

Estuve revisando el código y puse el estilo position abolute (debía ser absolute)... y el estilo left de la segunda imagen debería estar invariable (borrar esa línea)

Saludos

thrash · #9 (**permalink**) 03/01/2007, 07:35

Luego queda así o me equivoco .

disculpa que use tus imágenes .
Ahora veo el parpadeo en el IE y uno leve el Fire Fox . ¿que cosas no?
Gracias

Código:

<html>
	<head>
		<title>
			efecto
		</title>
		<script type="text/javascript">
			var tam1 = 100;
			var tam2 = 0;
			function transitar() {
				if (tam1 > 0)	{
					tam1--; tam2++;
					document.images.img1.style.width = tam1 + "%";
					document.images.img1.style.left = (100 - tam1) + "%";
					document.images.img2.style.width = tam2 + "%";
					document.images.img2.style.left = (100 - tam2) + "%";
					setTimeout("transitar()", 10);
				}
				else	{
					tmp = document.images.img2.src;
					tam1 = 100; tam2 = 0;
					document.images.img2.src = document.images.img1.src;
					document.images.img1.style.width = tam1 + "%";
					document.images.img1.style.left = "0%";
					document.images.img2.style.width = tam2 + "%";
					
					document.images.img1.src = tmp;
					setTimeout("transitar()", 1000);
				}
			}
		</script>
	</head>
	<body onload="transitar()">
		<div id="efecto" style="width: 133px; height: 100px; position:relative">
			<img src="http://www.pepemolina.com/galeria/fotos/mini/Diapositiva81.jpg"
			style="width: 100%; height: 100%; position: absolute; top: 0; left: 0%"
			name="img1" />
			<img src="http://www.pepemolina.com/galeria/fotos/mini/Diapositiva82.jpg"
			style="width: 0%; height: 100%; position: absolute; top: 0; left: 0%" 					name="img2" />
		</div>
	</body>