Repetir galeria aleatoria en javascript

[gebremswar]

Hola davy0324, que tal.

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:

$(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.

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:

#slideshow-container img { position:absolute }
 

y agrega la siguiente:

Código CSS:

#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:

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

y mostrar la primera (linea 2).

Código Javascript:

$(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.

<!-- EDITO-->

Te dejo estos plug-ins slideshow

<!-- /EDITO-->