Using jQuery bgImageTransition to create a continuous fadeshow

Question

After passing time, using http://plugins.jquery.com/project/bgImageTransition to create slide shows with crossfades using background URLs. The reason I use background images is because the entire slideshow needs rounded corners and insertion shadows. The problem is that the plugin seems to disappear in the new image and then disappear to the original. I want each image to be new, not A, B, A, D, A, X, A, E, etc.

I did JSFiddle: http://jsfiddle.net/dJgge/2/ and also copied the corresponding 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, and then removes it. I decided that I just needed to randomize the #thumbshow background image, 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 do this, it creates the effect of a blinking image. And I also need to ensure that the hidden background image I see doesn't match what is currently on top. Suggestions?

Answer 1

I managed to get it to work with the Loop plugin, which is hard to transition. Look at the fiddle here and see if it comes close to where you need it. It still uses background images, but it does so on a separate div, which is dynamically added to the parent element of the slide show.

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

The loop plugin is here.

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