Slideshow first slide timeout longer

Question

I have a custom image slideshow that I am having to modify. I am trying to make the first slide timeout longer, basically I want it to be visible 2 seconds longer than the others. What would be the best way to go about? Here is the code:

(function($) {

var settings = {
        'promoid': 'promo',
        'selectorid': 'promoselector',
        'promoanimation': 'fade',
        'timeout': 4500,
        'speed': 'slow',
        'go': 'true',
        'timeoutname': 'promotimeout'
};

$.fn.promofade = function(options) {
    settings.promoid = $(this).attr("id");

    return this.each(function() {   
        $.promofade(this, options);
    });
};

$.promofade = function(container, options) {

    if ( options ) {
        $.extend( settings, options );
    }

    var elements = $("#" + settings.promoid).children();
    var selectors = $("#" + settings.selectorid).children();

    if ( elements.length != selectors.length ) { alert("Selector length does not match."); }

    if ( settings.go == 'true' )
    {
        settings.timeoutname = setTimeout(function() {
                $.promofade.next(elements, selectors, 1, 0);
                }, settings.timeout);
    } else {
        clearTimeout( settings.timeoutname );
    }
};

$.promofade.next = function( elements, selectors, current, last ) {

    if ( settings.promoanimation == 'fade' )
    {
        //$(elements[last]).fadeOut( settings.speed );
        //$(elements[current]).fadeIn( settings.speed );
        $(elements[last]).hide();
        $(elements[current]).show();
    } else if ( settings.promoanimation == 'slide' ) {
        // This creates a 'slide gap', where they havent crossed yet, causing a blank spot
        // TODO: fix!
        $(elements[last]).slideUp( settings.speed );
        $(elements[current]).slideDown( settings.speed );
    }

    $(selectors[last]).removeClass("on");
    $(selectors[current]).addClass("on");
    //$(selectors[current]).attr("class", "on");

    // They are both the same length so we only calculate for one
    if ( (current + 1) < elements.length ) {
        current = current + 1;
        last = current - 1;
    } else {
        current = 0;
        last = elements.length - 1;
    }

    if ( settings.go == 'true' )
    {
        settings.timeoutname = setTimeout( function() {
            $.promofade.next( elements, selectors, current, last );
        }, settings.timeout );
    } else {
        clearTimeout( settings.timeoutname );
    }
};
})(jQuery);

My html is built out like so:

<div id="fader">
    <a href="#"><img src="#" alt='#'/></a>
    <a href="#"><img src="#" alt='#'/></a>
    <a href="#"><img src="#" alt='#'/></a>
</div>

Answer 1

You could solve it by specifying a separate first slide timeout that's assigned during initialization, then use the standard timeout on promofade.next.

(function($) {

    var settings = {
            'promoid': 'promo',
            'selectorid': 'promoselector',
            'promoanimation': 'fade',
            'firstslidetimeout':2000, //apply this during $.promofade only
            'timeout': 4500,
            'speed': 'slow',
            'go': 'true',
            'timeoutname': 'promotimeout'
    };

    $.fn.promofade = function(options) {
        settings.promoid = $(this).attr("id");

        return this.each(function() {   
            $.promofade(this, options);
        });
    };

    $.promofade = function(container, options) {

        if ( options ) {
            $.extend( settings, options );
        }

        var elements = $("#" + settings.promoid).children();
        var selectors = $("#" + settings.selectorid).children();

        if ( elements.length != selectors.length ) { alert("Selector length does not match."); }

        if ( settings.go == 'true' )
        {
            settings.timeoutname = setTimeout(function() {
                    $.promofade.next(elements, selectors, 1, 0);
                    }, settings.timeout + settings.firstslidetimeout);
        } else {
            clearTimeout( settings.timeoutname );
        }
    };

    $.promofade.next = function( elements, selectors, current, last ) {

        if ( settings.promoanimation == 'fade' )
        {
            //$(elements[last]).fadeOut( settings.speed );
            //$(elements[current]).fadeIn( settings.speed );
            $(elements[last]).hide();
            $(elements[current]).show();
        } else if ( settings.promoanimation == 'slide' ) {
            // This creates a 'slide gap', where they havent crossed yet, causing a blank spot
            // TODO: fix!
            $(elements[last]).slideUp( settings.speed );
            $(elements[current]).slideDown( settings.speed );
        }

        $(selectors[last]).removeClass("on");
        $(selectors[current]).addClass("on");
        //$(selectors[current]).attr("class", "on");

        // They are both the same length so we only calculate for one
        if ( (current + 1) < elements.length ) {
            current = current + 1;
            last = current - 1;
        } else {
            current = 0;
            last = elements.length - 1;
        }

        if ( settings.go == 'true' )
        {
            settings.timeoutname = setTimeout( function() {
                $.promofade.next( elements, selectors, current, last );
            }, settings.timeout);

        } else {
            clearTimeout( settings.timeoutname );
        }
    };
    })(jQuery);

Answer 2

You might need to make changes in two places to get what you wanted.

(function ($) {
    var settings = {
        'promoid': 'promo',
        'selectorid': 'promoselector',
        'promoanimation': 'fade',
        'timeout': 4500,
        'firstAdditionalTimeout': 4500,
        'speed': 'slow',
        'go': 'true',
        'timeoutname': 'promotimeout'
    };

    $.fn.promofade = function (options) {
        settings.promoid = $(this).attr("id");
        return this.each(function () {
            $.promofade(this, options);
        });
    };

    $.promofade = function (container, options) {
        if (options) {
            $.extend(settings, options);
        }
        var elements = $("#" + settings.promoid).children();
        var selectors = $("#" + settings.selectorid).children();
        //if (elements.length != selectors.length) {
        //    alert("Selector length does not match.");
        //}
        if (settings.go == 'true') {
            settings.timeoutname = setTimeout(function () {
                $.promofade.next(elements, selectors, 1, 0);
            }, settings.timeout + settings.firstAdditionalTimeout); // here 
        } else {
            clearTimeout(settings.timeoutname);
        }
    };

    $.promofade.next = function (elements, selectors, current, last) {

        if (settings.promoanimation == 'fade') {
            //$(elements[last]).fadeOut( settings.speed );
            //$(elements[current]).fadeIn( settings.speed );
            $(elements[last]).hide();
            $(elements[current]).show();
        } else if (settings.promoanimation == 'slide') {
            // This creates a 'slide gap', where they havent crossed yet, causing a blank spot
            // TODO: fix!
            $(elements[last]).slideUp(settings.speed);
            $(elements[current]).slideDown(settings.speed);
        }

        //$(selectors[last]).removeClass("on");
        //$(selectors[current]).addClass("on");
        //$(selectors[current]).attr("class", "on");

        // They are both the same length so we only calculate for one
        if ((current + 1) < elements.length) {
            current = current + 1;
            last = current - 1;
        } else {
            current = 0;
            last = elements.length - 1;
        }

        if (settings.go == 'true') {
            settings.timeoutname = setTimeout(function () {
                $.promofade.next(elements, selectors, current, last);
            }, current == 1 ? (settings.timeout + settings.firstAdditionalTimeout) : settings.timeout); // and here
        } else {
            clearTimeout(settings.timeoutname);
        }
    };
})(jQuery);

DEMO