Full Page Background Transition

[Watson90]

Hey guys

I have created this website for a friend, and he seems happy enough with it, however is a bit unsure with the background transition effect.

The thing he doesn’t like about it is the transition from one image to the next, the bit where the white space appears as the code is grabbing the next image.

On the homepage, I have made a custom template as it is a static page and only needs the sidebar.php file.

On this template I have added the line;

And the jQuery looks like this;

jQuery.noConflict();

var aImages = new Array();
var iPrev = -1;
var iRnd = -1;

aImages[0] = “wp-content/themes/SJPhotographyTheme/images/MSF-photo-home.jpg”;
aImages[1] = “wp-content/themes/SJPhotographyTheme/images/queen-peekabo.jpg”;
aImages[2] = “wp-content/themes/SJPhotographyTheme/images/sistine-chapel.jpg”;
aImages[3] = “wp-content/themes/SJPhotographyTheme/images/titanic-photo-home.jpg”;
aImages[4] = “wp-content/themes/SJPhotographyTheme/images/colosseum-rome.jpg”;
aImages[5] = “wp-content/themes/SJPhotographyTheme/images/kitchen-photo-home.jpg”;

jQuery(document).ready(function() {

/* Define the function that triggers to fade in the background as soon as the image has loaded */
jQuery(“img#bg”).load(function()
{
/* Fade in during 2 seconds */
jQuery(“img#bg”).fadeTo(2500,1);

/* Set the timeout to fade out the image after 10 seconds*/
setTimeout(function()
{
jQuery(“img#bg”).fadeOut(2500);

/* Load the next image after 4 seconds */
setTimeout(LoadImages,3000);
}
,12000);
}
)

/* Start the slideshow one second after the page is ready */
setTimeout(LoadImages,1000);

});

function LoadImage(iNr)
{

/* Assign the new image to the background */
jQuery(“img#bg”).attr(“src”, aImages[iNr]);

};

function LoadImages()
{

/* Select a random image number and make sure this is not equal to the previous image */
while(iPrev == iRnd)
{
iRnd = Math.floor(Math.random()*aImages.length);
}

/* Show the selected image */
LoadImage(iRnd);

iPrev = iRnd;

};

Is there ANY way possible to cross fade these images? I have tried looking for a plugin on WordPress for this type of thing but none seem to work :(

Any help would be appreciated.

Steven

[TheDoc]

The crossfade might be difficult to accomplish. Why don’t you just add another `` that starts at zero opacity that is sitting on top of the original, then start fading that one in as the other fades out.

[Watson90]

Hey @TheDoc

I have managed to use different code now and it works quite well :)

Thanks for your reply.

[Author]

Posts