fondo con javascript

[fedefrankk]

hola a todos, tengo un problema. el siguiente codigo lo saque de este foro, pero no lo puedo adaptar a mi web..

javascript

se llama : main.js

Código Javascript:

$( function(){
    var arrImagenes = [ 'fondo-1.jpg','fondo-2.jpg', 'fondo-3.jpg', 'fondo-4.jpg','fondo-5.jpg','fondo-6.jpg' ];
    var imagenActual = 'fondo-1.jpg';
    var tiempo = 3000;
    var id_contenedor = 'bg'
    setInterval( function(){
        do{
            var randImage = arrImagenes[Math.ceil(Math.random()*(arrImagenes.length-1))];
        }while( randImage == imagenActual )
        imagenActual = randImage;
        cambiarImagenFondo(imagenActual, id_contenedor);
    }, tiempo)
})
 
 function cambiarImagenFondo(nuevaImagen, contenedor){
        var contenedor = $('#' + contenedor);
        //cargar imagen primero
        var tempImagen = new Image();
        $(tempImagen).load( function(){
            contenedor.css('backgroundImage', 'url('+tempImagen.src+')');
        });
        tempImagen.src = 'img/fondos/' + nuevaImagen;
        
    }
 

mi html index.html

Código HTML:

<div id="bg"> </div>
 

y mi css:

Código CSS:

#bg{ background-image:url(img/fondos/fondo-2.jpg);
    position:fixed;
    top:0;
    left:0;
    z-index:-1;
}
 

Se que en algun lufar le estoy fallando mal. pero no puedo darme cuenta...

la ruta de las imagenes seria asi:


carpeta
index.html
main.js
main.css
img
(dentro de img) fondos
fondo-1.jpg



Bueno espero alguna mano y gracias de antemano saludos a todos

fede

[alfonmaco]

creo que el error esta en las ultimas lineas.
tempImagen.src = 'img/fondos/' + nuevaImagen; debe ir dentro del load. ya que si lo pones al final no existe cuando la cargas al contenedor.css

Pruebalo asi y comentas.

Código Javascript:

$( function(){
    var arrImagenes = [ 'fondo-1.jpg','fondo-2.jpg', 'fondo-3.jpg', 'fondo-4.jpg','fondo-5.jpg','fondo-6.jpg' ];
    var imagenActual = 'fondo-1.jpg';
    var tiempo = 3000;
    var id_contenedor = 'bg'
    setInterval( function(){
        do{
            var randImage = arrImagenes[Math.ceil(Math.random()*(arrImagenes.length-1))];
        }while( randImage == imagenActual )
        imagenActual = randImage;
        cambiarImagenFondo(imagenActual, id_contenedor);
    }, tiempo)
})
 
 function cambiarImagenFondo(nuevaImagen, contenedor){
        var contenedor = $('#' + contenedor);
        //cargar imagen primero
        var tempImagen = new Image();
        $(tempImagen).load( function(){
        tempImagen.src = 'img/fondos/' + nuevaImagen;
            contenedor.css('backgroundImage', 'url('+tempImagen.src+')');
        });
        
    }
 

[fedefrankk]

Hola, gracias por contestar, no es ese el problema... el problema es que algo en el div de la imagen y css, porque sacando el codigo javascript, tampoco me muestra la imagen de fondo...
si le pongo la imagen al body, y al codigo javascrip le pongo la id "body" no funciona.... no se que puede ser.. .!!!!!!!!!


Gracias por tu repuesta y tiempo.!!
Saludos
fede

[elmouse19]

Hola. Segun entiendo el codigo sirve para hacer una secuencia de imagenes que cambian en el fondo del sitio.

Es eso lo que queres hacer?

[fedefrankk]

Hoal. "elmouse19", si si extactamente eso, cambiar el fondo cada x tiempo, lo he visto andar con el codigo que he dejado.. pero no se como hacerlo en mi hatml.. como fondo..
Tambien he visto jquery que es mas suave de imagen a imagen pero no se si es mas complicado o no
Vos que pensas?..

Muchas gracias por tu tiempo
saludos
fede

[elmouse19]

Sinceramente no veo el error en el codigo.

Pero puedo pasarte un script de jquery, que yo uso en algunos de mis sitios.

Te dejo un ejemplo AQUI

Si te sirve, te digo como usarlo. Es bastante simple

[fedefrankk]

Hola esta buenisimo.!!! eso es lo que necesitaba....
me puedes explicar como implementarlo en mi html y javascript.?

Muchas gracias y gracias por tu tirmpo
saludos
fede

[elmouse19]

Hola.
Perdón la demora. Estuve muy ocupado.

Si puedo pasarte el código, y explicarte. Es muy sencillo en realidad.

Primero, necesitas DESCARGAR ESTA LIBRERIA que corresponde al plugin.

Luego, por supuesto, tienes que descomprimir los archivos y subirlos a tu servidor. Sube todos los archivos en una carpeta del servidor diferenciada. Por ejemplo, yo cree una carpeta de nombre "vegas" en la raiz de public_html, y ahí coloque todos los archivos. Esto servirá para mantener el orden de los archivos, y para que no te falte ninguno a la hora de usar el plugin.

Luego tienes que llamar a la librería con el siguiente código.

Código HTML:

<script src="vegas/jquery.vegas.js"></script> 

Por ultimo, tenes que agregar esto en tu codigo, dentro de las etiquetas head y script.

Código Javascript:

/* Vegas */
    $(function() {
        $.vegas('slideshow', {
            delay:3500,
            backgrounds:[
                { src:'images/backgrounds/bg1.jpg', fade:1000 },
                { src:'images/backgrounds/bg2.jpg', fade:1000 },
                { src:'images/backgrounds/bg3.jpg', fade:1000 }
            ]
            })('overlay', {
                src:'/vegas/overlays/11.png'
            });
    });
 

Reemplazando por supuesto las lineas:
{ src:'images/backgrounds/bg1.jpg', fade:1000 },
{ src:'images/backgrounds/bg2.jpg', fade:1000 },
{ src:'images/backgrounds/bg3.jpg', fade:1000 }
por la url correspondiente a las imagenes que deseas poner de fondo. Una linea por cada imagen.
El ",fade:1000" es el efecto de transición y su duración, expresada en milisegundos; por lo tanto 1000 milisegundos es igual a 1 segundo.

Esta parte del codigo:
})('overlay', {
src:'/vegas/overlays/11.png'
});

Corresponde a la imagen de overlay que quieras usar. Es decir, una imagen semitransparente que sirve de textura para las imágenes de fondo. Esta imagen se pone sobre todas las imágenes que pongas de fondo, y el plugin cuenta con varias opciones de overlay a elegir. Las podrás ver dentro de la carpeta overlays.

Si no quieres ningún overlay simplemente sacas esa parte del código. Ejemplo.
('overlay', {
src:'/vegas/overlays/11.png'
});

Y quedaría asi:

Código Javascript:

/* Vegas */
    $(function() {
        $.vegas('slideshow', {
            delay:3500,
            backgrounds:[
                { src:'images/backgrounds/bg1.jpg', fade:1000 },
                { src:'images/backgrounds/bg2.jpg', fade:1000 },
                { src:'images/backgrounds/bg3.jpg', fade:1000 }
            ]
            })
    });
 

Cualquier duda, pregúntame.
Saludos.

[fedefrankk]

Hola. Muchisimas gracias por tu explicacion,
excelente
gracias por tu tiempo.
Saludos
fede