Question

Having a hell of a time using http://plugins.jquery.com/project/bgImageTransition to create a slideshow of crossfaded images using div background urls. The reason I’m using background images is that the entire slideshow needs rounded corners and inset shadows. The problem is that the plugin seems to fade in a new image then fade back out to the original. I want each image to be new, not A, B, A, D, A, X, A, E, etc.

I made a JSFiddle: http://jsfiddle.net/dJgge/2/ and also copied the relevant code below:

var currImage = '007.jpg';
setInterval( function(){
    do{
        var randImage = bgImages[Math.ceil(Math.random()*(bgImages.length-1))];
    }while( randImage == currImage )
    currImage = randImage;
    jQuery('#thumbshow').BgImageTransition( 'path/'+currImage );
}, 2000)

This basically creates #thumbshow2 on top of #thumbshow, then removes it. I figured I just need to randomize the background image of #thumbshow while #thumbshow2 is on top:

var randImage2 = bgImages[Math.ceil(Math.random()*(bgImages.length-1))];
jQuery('#thumbshow').css('background',"url(path/"+randImage2+")");

But wherever I put this, it creates a flashing image effect. And I also need to ensure the secretly replaced background image doesn’t match the one currently on top. Suggestions?

Answer 1

I was able to get it working using the “Cycle” plugin which is rock solid for transitions. Check out the fiddle here and see if this gets you closer to where you need to be. It’s still using background images, but doing so on separate div’s which are dynamically added to the parent slide show element.

http://jsfiddle.net/H7Q33/1/

Cycle plugin is here….

http://jquery.malsup.com/cycle/