how to do auto slideshow on simpleSli.de
<p>I have created a simpleSli.de from <a href="http://www.simplesli.de" rel="nofollow">http://www.simplesli.de</a> but I cant figure out how to get it to autoslide. Any help would be greatly appreciated. </p>

<p>They website says that I just have to do this </p>

<pre><code>    &lt;div class="auto-slider" rel="group"&gt;&lt;/div&gt;

// Add this javascript, and ensure it appears after the simpleSlide() call

$('.auto-slider').each( function() {
    var related_group = $(this).attr('rel');

    window.setInterval("simpleSlideAction('.right-button', " + related_group + ");", 4000);
}); 
</code></pre>

<p>But i have tried that and its not working for me. I think maybe I am doing it wrong. Here is all of the jquery plugin if someone wants to see the whole thing. Here is where I have the slideshow setup <a href="http://leodruker.theorydesign.ca/about/" rel="nofollow">http://leodruker.theorydesign.ca/about/</a></p>

<pre><code>function simpleSlide(incoming_options) {
    jQuery(function($) {
        var options = {
            'status_width': 20,
            'status_color_inside': '#fff',
            'status_color_outside': '#aaa',
            'set_speed': 1000,
            'fullscreen' : 'false',
            'swipe': 'true',
            'callback': 'function()'
        };

        $.extend(options, incoming_options);

        $.ss_options = options;

        $('.simpleSlide-slide').css({
            'opacity': '0'  
        });

        $('.simpleSlide-window').prepend('&lt;span id="ssLoading" style="color: #808080;font-family:Helvetica, Arial, sans-serif;font-size: 12px; margin: 10px 0 0 10px;display: block"&gt;Loading slides...&lt;/span&gt;');

        var no_of_images = $('.simpleSlide-slide img').size();

        if(no_of_images &gt; 0) {

            var images = new Array();
            var i = 0;
            $('.simpleSlide-slide img').each( function() {
                images[i] = $(this).attr('src');
                i++;
            });

            i = 0;

            $(images).each( function(){
                var imageObj = new Image();
                imageObj.src = images[i];

                if((imageObj).complete){
                    no_of_images--;
                    i++;
                    if(no_of_images == 0) {
                        ssInit();
                    };
                } else { 
                    $(imageObj).load( function() {
                        no_of_images--;
                        i++;
                        if(no_of_images == 0){
                            ssInit();
                        };
                    });
                };
            });
        } else {
            ssInit();
        };  
    });
};

function ssInit(){
    /* Set the dimensions of each simpleSlide window and tray
     * based on the size of the first 'slide' inside that window.
     * Every slide within a given tray/window should be uniform in dimensions.
     * Also, set Status Window size, if it's being used. Fire callback when finished.
     */

    jQuery(function($) {
        $('.simpleSlide-window').each( function() { 
            if($.ss_options.fullscreen == 'true'){
                $('body').css('overflow', 'hidden');
            }
            var window_contents = $(this).html();   
            var cleaned_contents = removeWhiteSpace(window_contents);
            $(this).html(cleaned_contents);

            var slide_count = $(this).find('.simpleSlide-slide').size();        
            $(this).find('.simpleSlide-slide').css('display','block');
            var window_height = $(this).find('.simpleSlide-slide').first().outerHeight();

            if($.ss_options.fullscreen == 'true'){
                fullScreen(this);
            };          

            $(this).find('.simpleSlide-slide').css({
                'display':'inline',
                'float':'left'
            });

            var window_width = $(this).find('.simpleSlide-slide').first().outerWidth();     

            var window_rel = $(this).attr('rel');

            if($.ss_options.fullscreen == 'false'){
                $(this).css({
                    'height': window_height,
                    'width': window_width,
                    'position': 'relative'
                });
            };          

            $(this).css('overflow','hidden');

            setTraySize(this, slide_count, window_width);

            setSimpleSlideStatus(window_rel, window_height, window_width, slide_count);

            setPaging(this);

            $(this).find('#ssLoading').remove();

            if($.ss_options.swipe = 'true' &amp;&amp; !$.browser.msie){
                simpleSwipe(this);
            };

            $(this).find('.simpleSlide-slide').animate({
                'opacity': '1'
            }, 300, "swing");

        });

        /* Fire callback after completion of image load and simpleSlide initialization */
        if(typeof($.ss_options.callback) == 'function'){
            $.ss_options.callback.call(this);
        };

        /* Gives each slide an 'alt' with the slide number */
        function setPaging(this_window) {
            var page_count = 1;

            $(this_window).find('.simpleSlide-slide').each( function() {
                $(this).attr('alt', page_count);
                page_count++;
            });
        };

        function fullScreen(this_s_window){
            var base_img = new Image();
            base_img.src = $(this_s_window).find('img').first().attr('src');
            /*var rendered_img = $(this_s_window).find('img').first();*/
            var window_prop = $(window).width() / $(window).height();
            var image_prop = base_img.width / base_img.height;
            var wh = $(window).height();
            var ww = $(window).width();

            if(window_prop &gt; image_prop){
                var new_height = (ww / base_img.width) * base_img.height;
                var height_offset = (new_height - wh) / 2;
                $(this_s_window).find('img').attr('width', ww).attr('height', new_height).css('marginLeft', 0);
                $(this_s_window).css({
                    'marginLeft': 0,                            /* Reset to beginning */ 
                    'marginTop':'-' + height_offset + 'px',
                    'height': wh + height_offset
                });
                $(this_s_window).find('.simpleSlide-slide').css({
                    'width': ww,
                    'height': new_height,
                    'overflow': 'hidden'
                });             
            } else {
                var new_width = (wh / base_img.height) * base_img.width;
                var width_offset = (new_width - ww) / 2;
                $(this_s_window).find('img').attr('height', wh).attr('width', new_width);
                $(this_s_window).find('img').css({
                    'marginLeft': '-' + width_offset + 'px'                 
                });
                $(this_s_window).find('.simpleSlide-slide').css({
                    'width': ww,
                    'height': wh,
                    'overflow': 'hidden'
                });

                /* Reset from other orientation */
                $(this_s_window).css({
                    'marginTop': 0,
                    'height': wh
                });
            };

            $(this_s_window).find('.simpleSlide-tray').css('marginLeft', 0);
        };

        /* Sets size of the "tray" that holds the "slides" */
        function setTraySize(slideWindow, count, viewer_width) {

            var slider_width = count * viewer_width;

            $(slideWindow).find('.simpleSlide-tray').css({
                'width': slider_width + 'px'
            });

            $(slideWindow).find('.simpleSlide-slide').css('display','inline-block');

        };  

        /* If user chooses to establish Status Window, this function will set
         * the dimensions of the window based on the desired width.
         * The window (and its inherent slide's) dimensions are a relative factor
         * of the main window's size, so the status window will be proportionally
         * the same as the main window and its tray.
         */
        function setSimpleSlideStatus(this_rel, height, width, image_count) {

            var ratio = $.ss_options.status_width/width;
            var status_height = ratio*height;

            $('.simpleSlideStatus-tray[rel="' + this_rel + '"]')
                .css({
                     'width': $.ss_options.status_width * image_count,
                     'height': status_height,
                     'background-color': $.ss_options.status_color_outside
                });

            $('.simpleSlideStatus-window[rel="' + this_rel + '"]')
                .css({
                     'width': $.ss_options.status_width,
                     'height': status_height,
                     'background-color': $.ss_options.status_color_inside
                });

            if(jQuery.support.opacity){
                $('.simpleSlideStatus-window .simpleSlideStatus-tray[rel="' + this_rel + '"]')
                   .css({
                       'opacity': '.5',
                       'background-color': $.ss_options.status_color_inside
                });
            };

            if(!jQuery.support.opacity){
                $('.simpleSlideStatus-window .simpleSlideStatus-tray[rel="' + this_rel + '"]').css({
                    'filter': 'alpha(opacity=50)',
                    'background-color': $.ss_options.status_color_inside
                });
            };
        };

        /* Actuates upon the clicking of a left- or right-button classed element */
        $('.left-button, .right-button, .jump-to').live('click', function() {

            var rel = $(this).attr('rel');

            if (!$('div.simpleSlide-tray[rel="' + rel + '"]').is(':animated')) {
                simpleSlideAction(this, rel);
            };
        });
    });
};

function simpleSwipe(this_window) {
    // Default thresholds &amp; swipe functions
    var defaults = {
        threshold: {
            x: $(this_window).width() * .15,
            y: $(this_window).height() * .1
        },
        swipeLeft: function() {
            simpleSlideAction('.right-button', $(this_window).attr('rel'));
        },
        swipeRight: function() {
            simpleSlideAction('.left-button', $(this_window).attr('rel'));
        },
        preventDefaultEvents: true
    };

    var options = $.extend(defaults, options);

    if (!this_window) return false;

    return $(this_window).each(function() {

        var me = $(this_window);

        // Private variables for each element
        var originalCoord = { x: 0, y: 0 };
        var finalCoord = { x: 0, y: 0 };

        // Screen touched, store the original coordinate
        function touchStart(event) {
            originalCoord.x = event.targetTouches[0].pageX;
            originalCoord.y = event.targetTouches[0].pageY;
        };

        // Store coordinates as finger is swiping
        function touchMove(event) {
            if (defaults.preventDefaultEvents){
                event.preventDefault();
            };
            finalCoord.x = event.targetTouches[0].pageX; // Updated X,Y coordinates
            finalCoord.y = event.targetTouches[0].pageY;
        };

        // Done Swiping
        // Swipe should only be on X axis, ignore if swipe on Y axis
        // Calculate if the swipe was left or right
        function touchEnd(event) {
            var changeY = originalCoord.y - finalCoord.y;
            if(changeY &lt; defaults.threshold.y &amp;&amp; changeY &gt; (defaults.threshold.y*-1)) {
                changeX = originalCoord.x - finalCoord.x;

                if(changeX &gt; defaults.threshold.x) {                    
                    defaults.swipeLeft();
                };
                if(changeX &lt; (defaults.threshold.x*-1)) {                   
                    defaults.swipeRight();
                };
            };
        };

        // Swipe was canceled
        function touchCancel(event) { 
            console.log('Canceling swipe gesture...');
        };

        // Add gestures to all swipable areas
        this_window.addEventListener("touchstart", touchStart, false);
        this_window.addEventListener("touchmove", touchMove, false);
        this_window.addEventListener("touchend", touchEnd, false);
        this_window.addEventListener("touchcancel", touchCancel, false);

    });
};

function simpleSlideAction(action, rel_no) {
    jQuery(function($) {    
        var move_speed = $.ss_options.set_speed;
        var image_count = $('.simpleSlide-window[rel="' + rel_no + '"]').find('.simpleSlide-slide').size();
        var window_width = $('.simpleSlide-window[rel="' + rel_no + '"]').innerWidth();
        var status_window_width = $('.simpleSlideStatus-window[rel="' + rel_no + '"]').innerWidth();
        var status_tray_width = status_window_width * image_count;
        var current_tray_margin = parseInt($('.simpleSlide-tray[rel="' + rel_no + '"]').css('marginLeft'), 10);
        var current_status_window_margin = parseInt($('.simpleSlideStatus-tray .simpleSlideStatus-window[rel="' + rel_no + '"]').css('marginLeft'), 10);
        var current_status_tray_margin = parseInt($('.simpleSlideStatus-window .simpleSlideStatus-tray[rel="' + rel_no + '"]').css('marginLeft'), 10);

        if($(action).is('.jump-to')) {
            var to_page = $(action).attr('alt');
            var j_margin = (to_page - 1) * (window_width * (-1));
            var st_margin = (to_page - 1) * (status_window_width * (-1));
            var sw_margin = (to_page - 1) * (status_window_width);

            move(j_margin, sw_margin, st_margin);
        };

        if($(action).is('.left-button')) {      
            if(current_tray_margin == 0) {
                var j_margin = current_tray_margin - ((image_count - 1) * window_width);
                var st_margin = current_status_tray_margin - ((image_count - 1) * status_window_width);
                var sw_margin = current_status_window_margin + ((image_count - 1) * status_window_width);           
            } else {
                var j_margin = current_tray_margin + window_width;
                var st_margin = current_status_tray_margin + status_window_width;
                var sw_margin = current_status_window_margin - status_window_width;         
            };

            move(j_margin, sw_margin, st_margin);
        };

        if($(action).is('.right-button')) {
            if(current_tray_margin == (image_count - 1) * (window_width * -1)) {
                var j_margin = 0;
                var st_margin = 0;
                var sw_margin = 0;                  
            } else {
                var j_margin = current_tray_margin - window_width;
                var st_margin = current_status_tray_margin - status_window_width;
                var sw_margin = current_status_window_margin + status_window_width;         
            };

            move(j_margin, sw_margin, st_margin);
        };      

        function move(new_margin, new_swindow_margin, new_stray_margin) {
            $('.simpleSlide-tray[rel="' + rel_no + '"]').animate({
                'marginLeft': new_margin
            }, move_speed, "swing");

            $('.simpleSlideStatus-window .simpleSlideStatus-tray[rel="' + rel_no + '"]')
                .animate({
                    'marginLeft': new_stray_margin               
            }, move_speed, "swing");

            $('.simpleSlideStatus-tray .simpleSlideStatus-window[rel="' + rel_no + '"]').animate({
                    'marginLeft': new_swindow_margin         
            }, move_speed, "swing");        
        };
    });
};


function removeWhiteSpace(raw) {
    var cleaned_string = raw.replace(/[\r+\n+\t+]\s\s+/g, "");
    return cleaned_string;
};
</code></pre>
