Transición imagenes fondo

rhdpre · #1 (**permalink**) 18/01/2014, 14:01

Hola:

Necesito poner en la home una transición de imagenes que se alternen con un fundido.

No sé Java script y en google lo único que he encontrado no me funciona (lo adjunto)

Lo pego en DW y me da un error en la linea 33 (en rojo)

¿alguien me puede dar una pista?

Muchas gracias de antemano.

Un saludo

<!DOCTYPE html>

<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”es” lang=”es”>
<head>
<title>:: BG IMG BIG FADE ::</title>
<meta http-equiv=”Content-Type” Content=”text/html; charset=ISO-8859-1″>
<meta name=”copyright” content=”Copyright © 2011 ScriptShow, All Rights Reserved”>
<meta name=”author” content=”ScriptShow Web http://scriptshow.wordpress.com“>
<meta http-equiv=”imagetoolbar” content=”no”>
<style type=”text/css”>
body {
background:#000000;
}

#bgimg {
position:absolute;
position:fixed;
width:100%;
left:0px;
top:0px;
filter:alpha(Opacity=0);
-khtml-opacity:0;
-moz-opacity:0;
opacity:0;
z-index:1;
}
</style>
<script type=”text/javascript”>
// ===================================
// ScriptShow Web © 2000 – 2011
// http://scriptshow.wordpress.com
// ===================================
var imgnames=new Array(‘imgs/img_01.jpg’,'imgs/img_02.jpg’,'imgs/img_03.jpg’,'imgs/img_04.jpg’,'imgs/img_05.jpg’,'imgs/img_06.jpg’,'imgs/img_07.jpg’,'imgs/img_08.jpg’);

var c=0;
function slidebg(){
obj.src=imgnames[c];
if(c < imgnames.length-1){c++}
else
if(c == imgnames.length-1){c=0}
setTimeout(“fadeimg(0)”, 8000);
fadeimg(1);
}

function init(){
obj=document.all?document.all(“bgimg”):document.ge tElementById(“bgimg”);
slidebg();
}

var fade=0;
var opac=0;
var goIn=null;
function fadeimg(fade){
if(document.all)obj.filters.alpha.Opacity=opac;
if(!document.all)obj.style.MozOpacity=(opac/100)-0.001;
if(!document.all)obj.style.KHTMLOpacity=(opac/100)-0.001;
if(!document.all)obj.style.opacity=(opac/100)-0.001;
if(fade==1 && opac < 100){opac=opac+2} else{clearTimeout(goIn)}
if(fade==0 && opac > 000){opac=opac-2} else{clearTimeout(goIn)}
if(fade==0 && opac < 002){init()}
goIn=setTimeout(“fadeimg(‘”+fade+”‘)”, 10);
}
</script>
</head>
<body>
<img id=”bgimg” name=”bgimg” src=”imgs/img_01.jpg” border=”0″ alt=”" title=”" />
<script>
init();
</script>
</body>
</html>

PHPeros · #2 (**permalink**) 18/01/2014, 14:04

Pon comillas normales.

Cita:

'imgs/img_01.jpg','imgs/img_02.jpg', 'img_06.jpg','imgs/img_07.jpg','imgs/img_08.jpg'

Alexis88 · #3 (**permalink**) 18/01/2014, 14:22

Como este ya es un tema muy visto, te voy a mostrar la forma en la que creo mis sliders.

Primero, añado una cantidad X de imágenes en el documento HTML y les asigno una clase en particular:

Código HTML:

Ver original<img src = "imagen1.jpg" class = "slider" />
<img src = "imagen2.jpg" class = "slider" />
<img src = "imagen3.jpg" class = "slider" />

Luego, les doy una posición absoluta para que todas las imágenes ocupen la misma ubicación y las hago transparentes, además, le doy 1 segundo de transición por cada vez que se afecte la opacidad de la imagen:

Código CSS:

Ver original.slider{
    position: absolute;
    opacity: 0;
    transition: opacity 1s;
}

Finalmente, tomo las imágenes por el nombre de clase, creando así un array con las imágenes, obtengo el total de ellas y declaro una variable que me servirá para acceder al array e ir tomando las imágenes una a una para modificar su opacidad:

Código Javascript:

Ver originalvar imagenes = document.getElementsByClassName("slider"),
    total = imagenes.length;
    indice = 0;
 
imagenes[indice].style.opacity = 1;
 
var slider = {
    show: function(){
      imagenes[indice].style.opacity = 0;
      indice = indice == total - 1 ? 0 : ++indice;
      imagenes[indice].style.opacity = 1;
    }
};
 
setInterval(slider.show, 3000);

Inicialmente, le quitamos la transparencia a la primera imagen, luego, declaramos el objeto "slider" que contiene al método "show", en el cual hacemos transparente a la imagen que actualmente se está viendo, evaluamos el valor del índice, si es igual a la posición de la última imagen del array, le damos cero como valor para inicie la cadena, caso contrario, aumenta su valor en uno. Finalmente, mostramos la imagen equivalente al nuevo valor del índice.

El método setInterval, controla la ejecución de nuestro método, iniciándolo cada 3000 milisegundo o 3 segundos.

Así es como se ve: http://jsbin.com/OfELUcuB/1

Adecua algunos detalles para que funcione en todos los navegadores, yo lo estoy probando en Chrome y Opera y va genial.

Saludos

rhdpre · #4 (**permalink**) 18/01/2014, 14:38

Cita:

Iniciado por PHPeros

Pon comillas normales.

Muchas gracias, solucionado el problema de la linea 33, pero ahora me da otra en la me dice que init no definido.....

Y no se porqué pero en el firebug veo código "extraño en varias lineas:

Muestro una de ejemplo(añade una A(china) y añade el símbolo del :
€????

<img id="â€bgimgâ€" border="â€0â€³" title="â€"" alt="â€"" src="â€imgs/img_01.jpgâ€" name="â€bgimgâ€">

rhdpre · #5 (**permalink**) 18/01/2014, 15:30

Porque no me deja citar a alexxis88?

rhdpre · #6 (**permalink**) 18/01/2014, 15:34

Cita:

Iniciado por Alexis88

Como este ya es un tema muy visto, te voy a mostrar la forma en la que creo mis sliders.

Primero, añado una cantidad X de imágenes en el documento HTML y les asigno una clase en particular:

Código HTML:

Ver original<img src = "imagen1.jpg" class = "slider" />
<img src = "imagen2.jpg" class = "slider" />
<img src = "imagen3.jpg" class = "slider" />

Luego, les doy una posición absoluta para que todas las imágenes ocupen la misma ubicación y las hago transparentes, además, le doy 1 segundo de transición por cada vez que se afecte la opacidad de la imagen:

Código CSS:

Ver original.slider{
    position: absolute;
    opacity: 0;
    transition: opacity 1s;
}

Finalmente, tomo las imágenes por el nombre de clase, creando así un array con las imágenes, obtengo el total de ellas y declaro una variable que me servirá para acceder al array e ir tomando las imágenes una a una para modificar su opacidad:

Código Javascript:

Ver originalvar imagenes = document.getElementsByClassName("slider"),
    total = imagenes.length;
    indice = 0;
 
imagenes[indice].style.opacity = 1;
 
var slider = {
    show: function(){
      imagenes[indice].style.opacity = 0;
      indice = indice == total - 1 ? 0 : ++indice;
      imagenes[indice].style.opacity = 1;
    }
};
 
setInterval(slider.show, 3000);

Inicialmente, le quitamos la transparencia a la primera imagen, luego, declaramos el objeto "slider" que contiene al método "show", en el cual hacemos transparente a la imagen que actualmente se está viendo, evaluamos el valor del índice, si es igual a la posición de la última imagen del array, le damos cero como valor para inicie la cadena, caso contrario, aumenta su valor en uno. Finalmente, mostramos la imagen equivalente al nuevo valor del índice.

El método [URL="https://developer.mozilla.org/en-US/docs/Web/API/Window.setInterval"][B]setInterval[/B][/URL], controla la ejecución de nuestro método, iniciándolo cada 3000 milisegundo o 3 segundos.

Así es como se ve: [url]http://jsbin.com/OfELUcuB/1[/url]

Adecua algunos detalles para que funcione en todos los navegadores, yo lo estoy probando en Chrome y Opera y va genial.

Saludos

Hola Alexis:

he tratado de usar tu código y no me funcionaba.

He visto que llamabas a unos JS y los "he pillado" y me funciona...pero me preocupa: ¿ES LEGAL?, si eso me lo dices y "me los borro"....

Lo único que no consigo es que la imagen se "maximice" con el navegador, como aquí:

[URL="http://www.neoclick.es/cokote"][/URL]

las pruebas las estoy haciendo en index2.htm..

Un saludo y muchas gracias

rhdpre · #7 (**permalink**) 18/01/2014, 15:52

[QUOTE=Alexis88;4556297]

Ok, LO he conseguido!

Lo único que me preocupa es lo de los JS......

Si he cometido alguna ilegalidad, sorry dimelo y subsano.

Un saludo y un millón de gracias.

Alexis88 · #8 (**permalink**) 18/01/2014, 19:44

¿Ilegal?, nada hermano, el algoritmo lo elaboré yo, no utilizo algo que no me pertenezca y si lo publico de esta forma es porque quiero que otras personas lo analicen, utilicen y mejoren. ¿De qué me vale saber algo si no lo comparto con otros?, el conocimiento no debe ser limitado, debe estar al alcance de todos.

Saludos

rhdpre · #9 (**permalink**) 19/01/2014, 02:41

Cita:

Iniciado por Alexis88

¿Ilegal?, nada hermano, el algoritmo lo elaboré yo, no utilizo algo que no me pertenezca y si lo publico de esta forma es porque quiero que otras personas lo analicen, utilicen y mejoren. ¿De qué me vale saber algo si no lo comparto con otros?, el conocimiento no debe ser limitado, debe estar al alcance de todos.

Saludos

Me gusta como piensas...
Lo dicho, un placer conocerte y un millón de gracias (espero poder devolverte el favor algún día....)