Duplicar un javascript.
3 seguidores
Hola buenos días.
Estoy empezando a utilizar javascript para aprender cosas nuevas que me puedan ayudar el dia de mañana.
Ahora bien... tengo un problema que no se solucionar pues me he copiado un código para hacer un banner dinámico en mi web que es bastante simple, (loops de fotografias con solapamiento suave).
Lo que me pasa es que quiero poner uno debajo de otro y no consigo darle al archivo .js el codigo adecuado para que reconozca un banners nuevo.
Muchas gracias.
phpninja
Si pones el código que has "copiado" será mas fácil ayudarte.
; )
mads_creativo
Ok muchas gracias.
Estoy un poco pez con el tema este de los Javascript.
Solo quisiera saber como dar los valores para copiar todos los javasript sin que se solapen.
Se que esto sólo es el inicio, estoy estudiando todo lo que puedo para enterarme un poquillo como va el tema.
Te agradezco mucho tu ayuda.
ESTO LO TENGO EN "INDEX"
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<script src="fuente.js"></script>
<title>Documento sin título</title>
</head>
<body onload="init();">
<div id="mContainer"></div>
</body>
ESTO EN STYLE.CSS
#mContainer {
width:300px;
height:100px;
margin: 30px;
}
.mPhoto {
position:absolute;
top:0px;
left:0px;
-moz-opacity:0.0;
filter:Alpha(opacity=0);
}
Y ESTO EN FUENTE.JS
var currentPhoto = 0;
var secondPhoto = 1;
var currentOpacity = new Array();
var imageArray = new Array("images/sevilla/slide1.png","images/sevilla/slide2.png","images/slide3.png","images/sevilla/slide4.png");
var FADE_STEP = 4;
var FADE_INTERVAL = 30;
var pause = false;
function init() {
currentOpacity[0]=99;
for(i=1;i<imageArray.length;i++)currentOpacity[i]=0;
mHTML="";
for(i=0;i<imageArray.length;i++)mHTML+="<div id=\"photo\" name=\"photo\" class=\"mPhoto\"><img src=\"" + imageArray[i] +"\"></div>";
document.getElementById("mContainer").innerHTML = mHTML;
if(document.all) {
document.getElementsByName("photo")[currentPhoto].style.filter="alpha(opacity=100)";
} else {
document.getElementsByName("photo")[currentPhoto].style.MozOpacity = .99;
}
mInterval = setInterval("crossFade()",FADE_INTERVAL);
}
function crossFade() {
if(pause)return;
currentOpacity[currentPhoto]-=FADE_STEP;
currentOpacity[secondPhoto] += FADE_STEP;
if(document.all) {
document.getElementsByName("photo")[currentPhoto].style.filter = "alpha(opacity=" + currentOpacity[currentPhoto] + ")";
document.getElementsByName("photo")[secondPhoto].style.filter = "alpha(opacity=" + currentOpacity[secondPhoto] + ")";
} else {
document.getElementsByName("photo")[currentPhoto].style.MozOpacity = currentOpacity[currentPhoto]/100;
document.getElementsByName("photo")[secondPhoto].style.MozOpacity =currentOpacity[secondPhoto]/100;
}
if(currentOpacity[secondPhoto]/100>=.98) {
currentPhoto = secondPhoto;
secondPhoto++;
if(secondPhoto == imageArray.length)secondPhoto=0;
pause = true;
xInterval = setTimeout("pause=false",2000);
}
}
imorente
El problema de ese código javascript es que está pensado para tener un único banner por página. Podrías adaptarlo pero no creo que merezca la pena. Parece ser un script bastante antiguo; el efecto de animación, por ejemplo, no se vería en navegadores basados en webkit, como Chrome o Safari.
Si quieres tener una galería de imágenes en tu web, te recomendaría utilizar alguno de estos plugins de jquery:
- Nivo slider
- Zurb orbit
- Flex slider
Este último, el Flexslider, incluso responde a gestos en dispositivos táctiles (prueba a visitar su web desde un móvil o tableta táctil tipo iphone/ipad/android).
El único inconveniente a tener en cuenta con estos plugins es que las imágenes deben estar en el html. Esto quiere decir que la página puede acabar siendo muy pesada si tienes muchas imágenes. Guitobon hizo un comentario al respecto en este post. Quizá él te pueda recomendar algún script de los que comenta que hacen un uso inteligente de Ajax para cargar las imágenes.
mads_creativo
Bueno ante todo muchisimas gracias por vuestra ayuda.
Comprendo todo lo que me dices y te agradezco los vinculos que me has mandado, son geniales, pero... no encuentro un javascript que me haga un pase de diapositivas sencillo y sin clicar... (como si fuera una presentacion de power point) todos son demasiados complicados. Yo sólo quiero 4 fotografias haciendo loops con un solapamiento de degradado, nada de cortinitas o algo por el estilo, y que se pueda duplicar tantas veces como uno quiera. Me interesa sobre todo para insertar banners publicitarios en páginas web como los que vemos a diario.
Muchas gracias de nuevo.
imorente
Aquí tienes una posible solución basada en el código que pegaste: http://jsfiddle.net/s3VyP/28/
Échale un vistazo y si tienes dudas te lo explico en más detalle :)
mads_creativo
Va fenomenal.
Muchas gracias. Suponto que cuanto mas aprenda de Javascript menos dudas iré teniendo, pero ahora es todo un mundo de aprendizaje. Estoy empezando con un libro titulado "Introducción al Javascript" de Javier Eguíluz y está muy bien redactado. Pero siempre me pasa que quiero correr mas de lo que voy aprendiendo y me pego unas ostias tremendas.
mads_creativo
Hola Imorente. El código que me distes me ha servido de mucho y ahora me gustaría hacerte otra pregunta.
¿Puedo hacer que pare la galería en la última foto?
Gracias.
imorente
La manera más rápida sería simplemente añadir una condición en la primera línea de la función crossFade:
donde pone:
if (paused) return;
poner
if (paused || next == 0) return;
Pero esto significa que el navegador seguiría ejecutando cada x tiempo la comprobación de ver si tiene que hacer algo para cambiar la imagen. Así que, aunque lleve más código yo haría algo así: http://jsfiddle.net/s3VyP/32/