Repetir galeria aleatoria en javascript

davy0324 · #1 (**permalink**) 16/08/2012, 21:13

tengo esta galeria, el problema es que cuando acaba de elegir todas las iamgenes al azar, se detiene, como hago para que vuelva y se repita indefinidamente?

- si es posible, que las imagenes esten centradas, y que la primera imagen aleatoria aparezca con un fade in, o opacidad 0 a 100, pero sobre todo lo de repetir el ciclo.

aqui esta el codigo:

<!doctype html>
<html>
<head>

<title></title>

<style type="text/css">
#slideshow-container { position:relative; }
#slideshow-container img { position:absolute; }
</style>

</head>
<body>

<div id="slideshow-container" style="height:892px; width:587px">
<div id="slideshow">
<div>
<img src="http://davy0324.netne.net/dummys/dummy1.jpg">
<img src="http://davy0324.netne.net/dummys/dummy2.jpg">
<img src="http://davy0324.netne.net/dummys/dummy3.jpg">
<img src="http://davy0324.netne.net/dummys/dummy4.jpg">
<img src="http://davy0324.netne.net/dummys/dummy5.jpg">

</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>

<script>
$('img').wrapAll('<div id="slideshow-container img"></div>');

</script>

<script type="text/javascript">
//extending jQuery with ':random' selector, best put into separate plugin js file
jQuery.jQueryRandom = 0;
jQuery.extend(jQuery.expr[":"],
{
random: function(a, i, m, r) {
if (i == 0) {
jQuery.jQueryRandom = Math.floor(Math.random() * r.length);
};
return i == jQuery.jQueryRandom;
}
});
//end :random extend

$(function() {
$('#slideshow img').not(':random').hide(); //hide all images except one initially
setInterval(function(){
$('#slideshow img:visible').fadeOut('slow')
.siblings('img:random').fadeIn('slow') //find a random image
.end().appendTo('#slideshow');},
5500); //5 second interval
});

</script>
</body>
</html>

gebremswar · #2 (**permalink**) 17/08/2012, 03:10

Hola davy0324, que tal.

Cita:

Iniciado por davy0324

tengo esta galeria, el problema es que cuando acaba de elegir todas las iamgenes al azar, se detiene, como hago para que vuelva y se repita indefinidamente?

Sin tocar mucho tu código. Puedes solucionar lo de "repetir" de la siguiente manera.

Código Javascript:

Ver original$(function(next) {  
    $('#slideshow img').not(':random').hide(); //hide all images except one initially
    setInterval(function(){
        $('#slideshow img:visible').fadeOut('slow')
        .siblings('img:random').fadeIn('slow') 
        .end().appendTo('#slideshow');
    }, 5500);
    next();
});

Atento en la linea 1 y la 7.

Cita:

Iniciado por davy0324

- si es posible, que las imagenes esten centradas, y que la primera imagen aleatoria aparezca con un fade in, o opacidad 0 a 100, pero sobre todo lo de repetir el ciclo.

Lo del "centrado" es cosa de CSS para tu caso, prueba con quitar esta linea:

Código CSS:

Ver original#slideshow-container img { position:absolute }

y agrega la siguiente:

Código CSS:

Ver original#slideshow { text-align:center }

Todo depende de tu maquetacion y también debes asegurarte de que todas tus imagenes sean del mismo tamaño o al menos que asi se presenten. Te dejo este link CSS.

Finalmente para que la primera imagen se muestre con el efecto. Debes ocultar todas ( agrega style="display:none" a todas las imagenes )

Código HTML:

Ver original<img src="http://davy0324.netne.net/dummys/dummy1.jpg" style="display:none">

y mostrar la primera (linea 2).

Código Javascript:

Ver original$(window).load(function(){
    $('img:random').fadeIn('slow');
})
$(function(next) {      
    setInterval(function(){
        $('#slideshow img:visible').hide()
        .siblings('img:random').fadeIn('slow')
        .end().appendTo('#slideshow');
    }, 5500); //5 second interval
    next();
});

No lo he probado, si estaba funcionando bien el slideshow excepto por lo que nos comentaste ya no deberias tener problemeas.

Aplicarlo y coméntanos.



Te dejo estos plug-ins slideshow



davy0324 · #3 (**permalink**) 17/08/2012, 13:48

Perfecto! muchisimas gracias por tu aporte!, lo unico que no sirvio fue lo de repetir la galeria el resto lo de alineacion y fade in si funciono :)

Código HTML:

 $(function(next) { 
        $('#slideshow img').not(':random').hide(); //hide all images except one initially
        setInterval(function(){
            $('#slideshow img:visible').fadeOut('slow')
            .siblings('img:random').fadeIn('slow')
            .end().appendTo('#slideshow');
        }, 2000);
        next();
		$slide.queue('#slideshow');

    });

davy0324 · #4 (**permalink**) 17/08/2012, 17:29

YA LO RESOLVI, muchas gracias a ti por tus soluciones me diste muchas ideas mil gracias por tu tiempo

, solo le quite la linea que empezaba por .end y otras modificaciones pequeñas.

Código:

$(function() { 
		var next = function()
		{
		
        $('#slideshow img').not(':random').hide(); 
        setInterval(function(){
            $('#slideshow img:visible').fadeOut('slow')
            .siblings('img:random').fadeIn('slow')
          
        }, 2000);
		}
        next();
		});