Getting supersized.js and jquery cycle to animate at the same time

Question

I am using the two plugins "supersized.js" and "jquery cycle" on this site here.

http://countrypleasin.com/new/

I am looking to get the supersized background animation synced up with the headline image cycle. (document).ready and wishful thinking is not cutting it so far. My headline will start animating slightly earlier than my bg rotation due to loading time.

thanks

$

        $(document).ready(function(){
            $.supersized({

                //Functionality
                slideshow               :   1,      //Slideshow on/off
                autoplay                :   1,      //Slideshow starts playing automatically
                start_slide             :   1,      //Start slide (0 is random)
                random                  :   0,      //Randomize slide order (Ignores start slide)
                slide_interval          :   5000,   //Length between transitions
                transition              :   1,      //0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
                transition_speed        :   400,    //Speed of transition
                new_window              :   1,      //Image links open in new window/tab
                pause_hover             :   0,      //Pause slideshow on hover
                keyboard_nav            :   1,      //Keyboard navigation on/off
                performance             :   1,      //0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
                image_protect           :   1,      //Disables image dragging and right click with Javascript
                image_path              :   'images/', //Default image path

                //Size & Position
                min_width               :   0,      //Min width allowed (in pixels)
                min_height              :   0,      //Min height allowed (in pixels)
                vertical_center         :   0,      //Vertically center background
                horizontal_center       :   1,      //Horizontally center background
                fit_portrait            :   1,      //Portrait images will not exceed browser height
                fit_landscape           :   0,      //Landscape images will not exceed browser width

                //Components
                navigation              :   0,      //Slideshow controls on/off
                thumbnail_navigation    :   0,      //Thumbnail navigation
                slide_counter           :   0,      //Display slide numbers
                slide_captions          :   0,      //Slide caption (Pull from "title" in slides array)
                slides                  :   [       //Slideshow Images
                                                    {image : 'images/bg3.jpg'},  
                                                    {image : 'images/bg2.jpg'},
                                                    {image : 'images/bg1.jpg'}


                                            ]

            }); 
        });

        $(document).ready(function() {
$('h1.home_headline').cycle({
    fx: 'scrollRight', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
    speed:   400,
    timeout: 5000,
    delay:    1000,
    autostop:      true,     // true to end slideshow after X transitions (where X == slide count) 
    autostopCount: 25,

});

});

Answer 1

I just had the exact same problem and was able to get it working by adding some loading conditions before starting the animation. There's probably a more elegant way to do this, but this at least works!

First initiate the two animations on $(window).load() instead of $(document).ready to ensure all your images load first, setting up a pause state for supersized using the following API call:

$(function(){
//pause supersized slideshow
api.playToggle();
});

Setup a function that we can call to advance the supersized slideshow before jQuery Cycle changes slides. It will need to know the total number of slides to ensure it loops correctly. (there might be a way to count that without having to manually enter it)

var $i = 1;
var $slideTotal = 3;

function slideAdvance()
{
    api.goTo($i);
    $i++;
    if ($i > $slideTotal)
    {
        $i = 1;
    }
}

Then you can set up jquery cycle to run your function before changing slides like so:

//Start animated banner
$('#banner').cycle({
    fx: 'scrollRight', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
    speed:   400,
    timeout: 5000,
    delay:    1000,
    autostop:      true,     // true to end slideshow after X transitions (where X == slide count) 
    autostopCount: 25,
    before: slideAdvance
});

And voila, there you have your synced banners. This also has the added bonus that supersized will autostop with jquery.