Mas de un rotator javascript

[modeff]

Hola Chicos: siento entrar a preguntar nuevamente y no a contestar.

Quisiera implementar más de un rotator en una pagina de una web (el tipico rotator con fade in).
El problema es que al poner varios banner, solo muestra 1 rotando, si puedo evitarlo no quiero usar flash.

Mi idea es poner varios banner con imagenes rotando. He buscado en el todo el sitio de Foros del web

¿saben de algun link que se pueda aplicar de esta manera? ideal sería con jquery, pero no he encontrado nada aún.



Agradecería alguna sugerencia.

Saludos

[raul_romero]

Hola revisa esto, es con jquery no es nada dificil.

http://medienfreunde.com/lab/innerfade/


Saludos....

[modeff]

Hola raul_romero muchas gracias por el enlace.
Lo he puesto en mi código, aún no me funciona y tengo algunas dudas al respecto.

Cuando con el Firebug reviso el script original, al seleccionar cualquier banner, en el codigo html veo que esa imagen aparece con z-index position absolute y display none, en el html no en hoja css. ¿de donde lo lee? mi problema es que a mi me pone las imagenes hacia el lado, todas visibles y no encuentro el script con lo que te menciono.

[modeff]

[QUOTE=modeff;3321064]Hola raul_romero muchas gracias por el enlace.
Lo he puesto en mi código, aún no me funciona y tengo algunas dudas al respecto.

Cuando con el Firebug reviso el script original, al seleccionar cualquier banner, en el codigo html veo que esa imagen aparece con z-index position absolute y display none, en el html no en hoja css. ¿de donde lo lee?


Pregunté mal: se que lo lee del jquery. Lo tengo linkeado igual que otros javascript, pero a mi no me aparecen esas características z-index, position: absolute etc... entonces ¿será que hay algo con lo que hay que tener especial cuidado? he implementado todo, de hecho tomé la precaución de usar ul y li de la misma manera.
Pero seguro debe haber algo mas.

[modeff]

Hola nuevamente: el firebug me arroja esto

Failed to load source for: http:// ... y muestra la ruta del enlace que al revisar esta correcta ¿significa que no existe el archivo ahi?

Saludos

[modeff]

Por si acaso puse los .js al lado del archivo, ahora el firebug si lee el contenido pero sigue sin darle los atributos a las img. Sigue sin funcionar

[raul_romero]

Hola amigo, no es nada dificil es simple, practicamente no tienes nada que escribir:

Pones en el encabezado los js (El jquey y innerfade)

Si estan junto a tu pagina en el src del script solamente escribes "jquery.js" si estan en una carpeta escribes "carpeta/jquery.js", en mi caso siempre los pongo en una carpeta js.

Código HTML:

<script language="javascript" type="text/javascript" src="js/main.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.innerfade.js"></script>
 

Luego en un contenedor div colocas las imagenes que vas a utilizar en una lista utilizando ul y li, a este ul dale un id por ejemplo lista.

Código HTML:

<ul id="lista">
<li><img src="images/rio.gif" alt="Good Guy bad Guy" /> </li>
<li><img src="images/paisaje.gif" alt="Whizzkids" /> </li>
<li><img src="images/colina.jpg" alt="Königin Mutter" /> </li>
<li><img src="images/nevado.jpg" alt="RT Hybride Archivierung" /> </li>
<li><img src="images/playa.jpg" alt="TÜV SÜD Gruppe" /> </li>
</ul>
 

Luego en el HEAD de tu pagina despues de llamar los js, colocas lo siguiente:

Código Javascript:

<script type="text/javascript">
$(document).ready( function(){
                $('#lista').innerfade({
                     animationtype: 'slide', // o fade
                     speed: 750, // o slow, normal y fast
                     timeout: 2000,
                     type: 'random', // o sequence
                     containerheight: 'auto' //Alto de tus imagenes.
                     });
                } );
</script>
 

Te explico rapidamente, cuando ya esten cargados los elementos $(document).ready, lanza el innerfade, alli colocas el id de tu lista de imagenes, puedes cambiar los parametros del innerfade, estan en el enlace que te mande.

Porsiacaso no coloques la hoja de estilos que viene en el innerfade no es necesario.

Saludos...

[vitro012]

hola, yo tambien esoty aprendiendo sobre jquery, y al ver el código me surgio una duda. ¿Cuál es el contenido de la página jquery.innerfade.js?

Supongo que es:

Código HTML:

<script type="text/javascript">
$(document).ready( function(){
                $('#lista').innerfade({ 
                   animationtype: 'slide', // o fade
                   speed: 750, // o slow, normal y fast  
                   timeout: 2000,      
                  type: 'random', // o sequence
                  containerheight: 'auto' //Alto de tus imagenes. 
                  });  
          } );
</script> 

¿o me equivoco?, porque veo que lo mandas llamar en una cabecera. o jquery.innerfade.js es ¿otra libreria a parte de la de jquey?

Gracias!

[raul_romero]

Iniciado por vitro012

hola, yo tambien esoty aprendiendo sobre jquery, y al ver el código me surgio una duda. ¿Cuál es el contenido de la página jquery.innerfade.js?

Supongo que es:

Código HTML:

<script type="text/javascript">
$(document).ready( function(){
                $('#lista').innerfade({ 
                   animationtype: 'slide', // o fade
                   speed: 750, // o slow, normal y fast  
                   timeout: 2000,      
                  type: 'random', // o sequence
                  containerheight: 'auto' //Alto de tus imagenes. 
                  });  
          } );
</script> 

¿o me equivoco?, porque veo que lo mandas llamar en una cabecera. o jquery.innerfade.js es ¿otra libreria a parte de la de jquey?

Gracias!

Hola amigo, ese no es el contenido de innerfade.js, eso es el script que tienes que colocar dentro del head de la pagina donde vas a mostrar la animacion.

El innerfade.js es otra libreria que se apoya en el jquery.

Saludos....

[modeff]

Hola raul_romero: muchas gracias por tu ayuda. He puesto incluso tu código en la llamada a la funcion y el ul con ese nombre también y sigue sin funcionar
No encuentro el error y se ve muy sencilla la aplicación.

Había dejado la animación para el final mientras terminaba el resto, por eso no agradecí antes.

No se me ocurre cual puede ser el problema, me arroja un error en la consola:
jQuery is not defined
})(jQuery); y no rota la imagen, si no mas bien aparecen las 3 imagenes.

Un saludo y nuevamente muchas gracias,
Modeff

[raul_romero]

Hola amigo tienes razon, lo que pasa es que en mi primer post de este tema cometi un error y recien me doy cuenta:

En el encabezado donde van los js, escribi el nombre de un archivo que utilizo para mis proyectos main.js

Código Javascript:

<script language="javascript" type="text/javascript" src="js/main.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.innerfade.js"></script>
 

En realidad tenia que haber escrito la ruta del jquery

Código Javascript:

<script language="javascript" type="text/javascript" src="js/jquery.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.innerfade.js"></script>
 

Supongo que con esto debe funcionar.

NOTA: Yo renombro el archivo del jquery (Ej. Actualmente en la web de jquery tienen los nombres jquery-1.4.2.min.js y jquery-1.4.2.js, yo por comodidad lo renombro a jquery.js)

Saludos..

[modeff]

Muchas gracias resulto muy bien!!!!!!

Saludos

[jorgezarate]

Hola raul_romero.. te comento que es lo que me pasa: te paso directamente la url donde lo estoy probando http://www.explorarweb.com.ar/jqueryinnerfade/index.htm con el codigo que me baje del zip. Asi tal cual lo subi... y nose que pasa que no funciona..

Perdon por la molestia, es que estuve renegando bastante con esto, hasta que me decidi a subir el codigo tal cual y me siguio dando problemas.. ah.. te comento que localmente me funciona barbaro.. el problema es cuando lo subo al servidor

Bueno, desde ya muchisimas gracias y muchas gracias por la ayuda de antemano..

Slds, Jorge

[modeff]

Hola jorgezarate:
Yo finalmente me cambié de rotator.

Mira esto:
http://ekallevig.com/jshowoff/



Ahora estoy usando uno que funciona muy bien.

En la cabecera debes poner los enlaces a estos archivos:

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="jquery.jshowoff.min.js">

También en la cabecera debes llamar al elemento que va a contener el elemento a rotar

Aquí para que lo entiendas llamo al
<div id="inicio-rotator"> contendrá las imagenes a rotar 1 (puedes poner varios contenedores de imágenes a rotar)

Dentro de las{} puedes poner los valores que quieras en cuanto a velocidad de rotación, si quieres que muestre los links para ir a otra página, que efecto tendrá al hacer la rotación etc.....

<script type="text/javascript">
$(document).ready(function(){
$('#inicio-rotator').jshowoff({ speed:7200, links: false, controlText:false,changeSpeed:600,effect:'fade' }); });

</script>

Mucho ánimo, al principio un ; y/o una { } pueden darte mucho dolor de cabeza.
Paciencia y fíjate en todos los detalles para que estén tal cual se muestra en el ejemplo. Para eso te puse el link mas arriba

(no olvides descargarte los archivos linkeados en la cabecera)

un saludo,
Modeff