jQuery and CSS animation problems (image accordion)

Question

I'm trying to ever so slightly modify this script here: http://www.egrappler.com/jquery-responsive-horizontal-accordion-image-slider-raccordion/

You can see in the demo that upon being initialized, it pans to slide "0", but doesn't include the caption and title. The only way to get the script to display the caption and title, is to pan to another slide and back to slide "0". I'd like to get the caption to appear on page load, but I'm terrible with Javascript and haven't been able to figure it out.

(function ($) {
    $.fn.raccordion = function (options) {
        var settings = $.extend({
            speed: 700,
            sliderWidth: 960,
            sliderHeight: 300,
            autoCollapse: true,
            activeSlide: 0
        }, options);

        return this.each(function () {
            var accordionWrapper = $(this);
            var width = accordionWrapper.find('.slide img:eq(0)').width();
            accordionWrapper.addClass('accordion-wrapper');
            var totalSlides = accordionWrapper.find('.slide').size();
            var w = width;
            initiliaze();
            if (settings.activeSlide < totalSlides - 1) {
                setTimeout(function () {
                    accordionWrapper.find('.slide:eq(' + settings.activeSlide + ')').click()
                }, settings.speed);
            }

            function initiliaze() {
                if (settings.sliderWidth > $(window).width()) {
                    width = w * (($(window).width() / settings.sliderWidth));
                    accordionWrapper.css("width", settings.sliderWidth * ($(window).width() / settings.sliderWidth));
                    accordionWrapper.find('.slide').each(function (index) {
                        $(this).animate({ left: (index * (accordionWrapper.width()) / totalSlides) }, { queue: false, speed: settings.speed, easing: 'quadEaseOut' });
                    });
                } else {
                    width = w;
                    accordionWrapper.css("width", settings.sliderWidth);

                    accordionWrapper.find('.slide').each(function (index) {
                        $(this).animate({ left: (index * (accordionWrapper.width()) / totalSlides) }, { queue: false, speed: settings.speed, easing: 'quadEaseOut' });
                    });
                }
                if (settings.sliderHeight > $(window).height()) {

                    accordionWrapper.animate({ height: settings.sliderHeight * ($(window).height() / settings.sliderHeight) }, { queue: false, speed: settings.speed, easing: 'quadEaseOut' });

                    accordionWrapper.find('.slide').animate({ height: settings.sliderHeight * ($(window).height() / settings.sliderHeight) }, { queue: false, speed: settings.speed, easing: 'quadEaseOut' });
                }
                else {
                    accordionWrapper.animate({ height: settings.sliderHeight }, { queue: false, speed: settings.speed, easing: 'quadEaseOut' });
                    accordionWrapper.find('.slide').animate({ height: settings.sliderHeight }, { queue: false, speed: settings.speed, easing: 'quadEaseOut' });
                }
                accordionWrapper.find('.caption').css({ opacity: 0 });
            }

            $(window).resize(function () {
                accordionWrapper.find('.slide').each(function (index) {
                    $(this).stop().animate({ left: (index * (accordionWrapper.width()) / totalSlides) }, { queue: false, speed: settings.speed, easing: 'quadEaseOut' });
                });
                animateCaption();
                initiliaze();
            });


            function animateCaption() {
                accordionWrapper.find('.caption').stop().animate({ opacity: 0, bottom: 0 }, { queue: false, speed: settings.speed, easing: 'quadEaseOut' });
                accordionWrapper.find('.active').find('.caption').stop().animate({ opacity: 1 }, { queue: false, speed: settings.speed, easing: 'quadEaseOut' });
            }


            accordionWrapper.find('.slide').click(function () {
                var ratio = (((accordionWrapper.width()) - width)) / (totalSlides - 1);
                if (($(this).width() == $('.slide').width()) || ($(this).width() == ratio)) {
                    accordionWrapper.find('.slide').removeClass('active');
                    $(this).addClass('active');
                    var currentIndex = accordionWrapper.find('.slide').index(this);
                    accordionWrapper.find('.slide').each(function (index) {
                        if (index == 0) {
                            $(this).animate({ left: 0 }, { queue: false, speed: settings.speed, easing: 'quadEaseOut' });
                        }
                        else if (index == currentIndex) {
                            $(this).animate({ left: (index) * ratio }, { queue: false, speed: settings.speed, easing: 'quadEaseOut' });
                        }
                        else if (index < currentIndex) {
                            $(this).animate({ left: (index) * ratio }, { queue: false, speed: settings.speed, easing: 'quadEaseOut' });
                        }
                        else if (index > currentIndex) {
                            $(this).animate({ left: width + (index - 1) * ratio }, { queue: false, speed: settings.speed, easing: 'quadEaseOut' });
                        }

                    });
                    animateCaption();
                }
            });


            if (settings.autoCollapse) {
                accordionWrapper.mouseleave(function () {
                    accordionWrapper.find('.slide').each(function (index) {
                        $(this).stop().animate({ left: (index * (accordionWrapper.width()) / totalSlides) }, { queue: false, speed: settings.speed, easing: 'quadEaseOut' });
                    });
                    accordionWrapper.find('.caption').css({ opacity: 0, bottom: 0 });
                });
            }

        });
    }
})(jQuery);

Here's some more possibly relevant code:

jQuery.extend({

easing: 
{

    // ******* back
    backEaseIn:function(p, n, firstNum, diff) {

        var c=firstNum+diff;

        var s = 1.70158; // default overshoot value, can be adjusted to suit
        return c*(p/=1)*p*((s+1)*p - s) + firstNum;
    },

    backEaseOut:function(p, n, firstNum, diff) {

        var c=firstNum+diff;

        var s = 1.70158; // default overshoot value, can be adjusted to suit
        return c*((p=p/1-1)*p*((s+1)*p + s) + 1) + firstNum;
    },

    backEaseInOut:function(p, n, firstNum, diff) {

        var c=firstNum+diff;

        var s = 1.70158; // default overshoot value, can be adjusted to suit
        if ((p/=0.5) < 1) 
            return c/2*(p*p*(((s*=(1.525))+1)*p - s)) + firstNum;
        else
            return c/2*((p-=2)*p*(((s*=(1.525))+1)*p + s) + 2) + firstNum;
    },

    // ******* bounce
    bounceEaseIn:function(p, n, firstNum, diff) {

        var c=firstNum+diff;
        var inv = this.bounceEaseOut (1-p, 1, 0, diff);
        return c - inv + firstNum;
    },

    bounceEaseOut:function(p, n, firstNum, diff) {

        var c=firstNum+diff;

        if (p < (1/2.75))
        {
            return c*(7.5625*p*p) + firstNum;
        }
        else if (p < (2/2.75))
        {
            return c*(7.5625*(p-=(1.5/2.75))*p + .75) + firstNum;
        }
        else if (p < (2.5/2.75))
        {
            return c*(7.5625*(p-=(2.25/2.75))*p + .9375) + firstNum;
        }
        else
        {
            return c*(7.5625*(p-=(2.625/2.75))*p + .984375) + firstNum;
        }
    },


    // ******* circ
    circEaseIn:function(p, n, firstNum, diff) {

        var c=firstNum+diff;

        return -c * (Math.sqrt(1 - (p/=1)*p) - 1) + firstNum;
    },

    circEaseOut:function(p, n, firstNum, diff) {

        var c=firstNum+diff;

        return c * Math.sqrt(1 - (p=p/1-1)*p) + firstNum;
    },

    circEaseInOut:function(p, n, firstNum, diff) {

        var c=firstNum+diff;

        if ((p/=0.5) < 1) 
            return -c/2 * (Math.sqrt(1 - p*p) - 1) + firstNum;
        else
            return c/2 * (Math.sqrt(1 - (p-=2)*p) + 1) + firstNum;
    },

    // ******* cubic
    cubicEaseIn:function(p, n, firstNum, diff) {

        var c=firstNum+diff;

        return c*(p/=1)*p*p + firstNum;
    },

    cubicEaseOut:function(p, n, firstNum, diff) {

        var c=firstNum+diff;

        return c*((p=p/1-1)*p*p + 1) + firstNum;
    },

    cubicEaseInOut:function(p, n, firstNum, diff) {

        var c=firstNum+diff;

        if ((p/=0.5) < 1)
            return c/2*p*p*p + firstNum;
        else
            return c/2*((p-=2)*p*p + 2) + firstNum;
    },

    // ******* elastic
    elasticEaseIn:function(p, n, firstNum, diff) {

        var c=firstNum+diff;

        if (p==0) return firstNum;
        if (p==1) return c;


        var peroid = 0.25;
        var s;
        var amplitude = c;

        if (amplitude < Math.abs(c)) 
        {
            amplitude = c;
            s = peroid/4;
        } 
        else 
        {
            s = peroid/(2*Math.PI) * Math.asin (c/amplitude);
        }

        return -(amplitude*Math.pow(2,10*(p-=1)) * Math.sin( (p*1-s)*(2*Math.PI)/peroid )) + firstNum;
    },

    elasticEaseOut:function(p, n, firstNum, diff) {

        var c=firstNum+diff;

        if (p==0) return firstNum;
        if (p==1) return c;

        var peroid = 0.25;
        var s;
        var amplitude = c;

        if (amplitude < Math.abs(c)) 
        {
            amplitude = c;
            s = peroid/4;
        } 
        else 
        {
            s = peroid/(2*Math.PI) * Math.asin (c/amplitude);
        }

        return -(amplitude*Math.pow(2,-10*p) * Math.sin( (p*1-s)*(2*Math.PI)/peroid )) + c;
    },

    // ******* expo
    expoEaseIn:function(p, n, firstNum, diff) {

        var c=firstNum+diff;

        return (p==0) ? firstNum : c * Math.pow(2, 10 * (p - 1)) + firstNum - c * 0.001;
    },

    expoEaseOut:function(p, n, firstNum, diff) {

        var c=firstNum+diff;

        return (p==1) ? c : diff * 1.001 * (-Math.pow(2, -10 * p) + 1) + firstNum;
    },

    expoEaseInOut:function(p, n, firstNum, diff) {

        var c=firstNum+diff;

        if (p==0) return firstNum;
        if (p==1) return c;

        if ((p/=0.5) < 1) 
            return c/2 * Math.pow(2, 10 * (p - 1)) + firstNum - c * 0.0005;
        else
            return c/2 * 1.0005 * (-Math.pow(2, -10 * --p) + 2) + firstNum;
    },

    // ******* quad
    quadEaseIn:function(p, n, firstNum, diff) {

        var c=firstNum+diff;

        return c*(p/=1)*p + firstNum;
    },

    quadEaseOut:function(p, n, firstNum, diff) {

        var c=firstNum+diff;

        return -c *(p/=1)*(p-2) + firstNum;
    },

    quadEaseInOut:function(p, n, firstNum, diff) {

        var c=firstNum+diff;

        if ((p/=0.5) < 1)
            return c/2*p*p + firstNum;
        else
            return -c/2 * ((--p)*(p-2) - 1) + firstNum;
    },

    // ******* quart
    quartEaseIn:function(p, n, firstNum, diff) {

        var c=firstNum+diff;

        return c*(p/=1)*p*p*p + firstNum;
    },

    quartEaseOut:function(p, n, firstNum, diff) {

        var c=firstNum+diff;

        return -c * ((p=p/1-1)*p*p*p - 1) + firstNum;
    },

    quartEaseInOut:function(p, n, firstNum, diff) {

        var c=firstNum+diff;

        if ((p/=0.5) < 1) 
            return c/2*p*p*p*p + firstNum;
        else
            return -c/2 * ((p-=2)*p*p*p - 2) + firstNum;
    },

    // ******* quint
    quintEaseIn:function(p, n, firstNum, diff) {

        var c=firstNum+diff;

        return c*(p/=1)*p*p*p*p + firstNum;
    },

    quintEaseOut:function(p, n, firstNum, diff) {

        var c=firstNum+diff;

        return c*((p=p/1-1)*p*p*p*p + 1) + firstNum;
    },

    quintEaseInOut:function(p, n, firstNum, diff) {

        var c=firstNum+diff;

        if ((p/=0.5) < 1)
            return c/2*p*p*p*p*p + firstNum;
        else
            return c/2*((p-=2)*p*p*p*p + 2) + firstNum;
    },

    // *******  sine
    sineEaseIn:function(p, n, firstNum, diff) {

        var c=firstNum+diff;
        return -c * Math.cos(p * (Math.PI/2)) +c + firstNum; 
    },

    sineEaseOut:function(p, n, firstNum, diff) {

        var c=firstNum+diff;
        return c * Math.sin(p * (Math.PI/2)) + firstNum;
    },

    sineEaseInOut:function(p, n, firstNum, diff) {

        var c=firstNum+diff;
        return -c/2 * (Math.cos(Math.PI*p) - 1) + firstNum;
    }   
}

});

Answer 1

Just add animateCaption() function here:

      function initiliaze() { 
        animateCaption(); // add this here
 if (settings.sliderWidth > $(window).width()) {...etc...etc...

    .....