Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Full Page Background Transition

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #40242
    Watson90
    Member

    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;

    slideshow

    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

    #111682
    TheDoc
    Member

    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.

    #111721
    Watson90
    Member

    Hey @TheDoc

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

    Thanks for your reply.

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.