Question

How can I get the slideshow to pause on the first category? Thanks!

$(document).ready(function(){      

            var images = [
            { 
                 id:0,
                 images: ['media/image0.jpg'],
                    dom: null
             },
                { 
                    id:1,
                images: ['media/image1.jpg'],
                    dom: null

                },
                { 
                    id:2,
                 images: ['media/image2.jpg'],
                    dom: null

                },
                { 
                    id:3,
                     images: ['media/image3.jpg'],
                    dom: null

                },
                { 
                    id:4,
                                    images: ['media/image4.jpg'],
                    dom: null
                },
                { 
                    id:5,
                                       images: ['media/image5.jpg'],
                    dom: null
                },
                { 
                    id:6,
                                        images: ['media/image6.jpg'],
                    dom: null
                }
            ];

            function preloadImages(images, func) {        
                var i = 0;
                var cache = [];
                var loaded = 0;
                var num = images.length;

                for ( ; i < num; i++ ) (function(i) {

                    var new_image = $('<img/>').attr('src', images[i]).load(function(){
                        loaded++;

                        if(loaded == num)
                        {                                                
                            func();                   
                        }
                    });                     
                    cache.push(new_image);
                })(i);

                return true;
            };

            for (var i=0; i < images.length; i++) {   
                preloadImages(images[i].images, function () {});
            }


            var category = 0; // the current tab group to display
            var index = 0; // the current image in the tab group to display
            var slider = $("#slider-container");
            var timer = null;
            var speed = 1000;

            initCategories = function() {
                for (var i = 0; i < images.length; ++i) {
                    images[i].dom = $("<ul/>").addClass("holder");
                    for (var j = 0; j < images[i].images.length; ++j) {
                        images[i].dom.append($("<li/>").addClass("slide").css("background", "url(" + images[i].images[j] + ") no-repeat"));
                    }
                }
            }

            switchCategory = function(newCategory) {
                //if (newCategory != category) {
                    category = newCategory;
                    $(".slideCat").removeClass("active");
                    $(".slideCat[rel='" + category + "']").addClass("active");
                    slider.empty().append(images[category].dom);
                //}
                index = 0;
                $(".holder", slider).css("margin-left", 0);
            }

            switchSlide = function(newSlide, animate) {
                //if (newSlide != index) {
                    index = newSlide;
                    var newMargin = $(".slide:first", slider).width() * -index;
                    if (animate) {
                        $(".holder", slider).animate({"margin-left": newMargin + "px"}, speed, null, null);
                    } else {
                        $(".holder", slider).css("margin-left", newMargin + "px");
                    }
                //}
            }

            doTransition = function() {
                ++index;
                if (index >= images[category].images.length) {
                    ++category;
                    if (category >= images.length) {
                        category = 0;
                    }
                    switchCategory(category);
                } else {
                    switchSlide(index, true);
                }
            }

            $(".slideCat").click(function (e) {
                clearInterval(timer);
                switchCategory(this.rel);
                timer = setInterval(doTransition, 5000);
                return false;
            });

            $(".prev").click(function (e) {
                clearInterval(timer);
                --index;
                if (index < 0) {
                    --category;
                    if (category < 0) {
                        category = images.length - 1;
                    }
                    switchCategory(category);
                    switchSlide(images[category].images.length - 1);
                } else {
                    switchSlide(index);
                }
                timer = setInterval(doTransition, 5000);
                return false;
            });

            $(".next").click(function (e) {
                clearInterval(timer);
                ++index;
                if (index >= images[category].images.length) {
                    ++category;
                    if (category >= images.length) {
                        category = 0;
                    }
                    switchCategory(category);
                } else {
                    switchSlide(index, false);
                }
                timer = setInterval(doTransition, 15000);
                return false;
            });

            // this doesn't work! hover gets triggered like this, but we don't know which <li/> we're over.
            // if we use e.g. $(".holder", slider) or $("li", slider), the event doesn't get triggered :(
            $(slider).hover(function () {
                console.log("hover");
                clearInterval(timer);
                $(this).find(".caption").stop().fadeTo(500, 0.8);
            }, function() {
                $(this).find(".caption").stop().fadeTo(500, 0);
                timer = setInterval(doTransition, 15000);
            });

            // load the categories
            initCategories();
            switchCategory(0);
            switchSlide(0, false);
            timer = setInterval(doTransition, 15000);
       });

Answer 1

I see from your comments in the code that you’re also struggling with the .hover() event handler. To get this working, try changing the slider variable from the jQuery object $('#slider-container') to the string '#slider-container', and change your calls to the variable from slider to $(slider) accordingly. Finally, for the .hover() event, change $(slider).hover to $(slider+' li').hover. This will attach the hover event handler to each child list-item of #slider-container.

EDIT: here’s how to achieve the desired transition effect:

First, in this block of code:

// load the categories
initCategories();
switchCategory(0);
switchSlide(0, false);
timer = setInterval(doTransition, 15000);

change timer = setInterval(doTransition, 15000); to:

timer = setTimeout(doTransition, 20000); 

This will put a 20-second delay, after the very first image is loaded, before replacing it with the second image.

Next, change all other instances of setInterval to setTimeout and clearInterval to clearTimeout. This will give us more control over the length of each transition (setInterval starts an infinite action-delay loop, while setTimeout happens only once.)

Finally, in your doTransition() function, after switchCategory(category);, enter either:

timer = setTimeout(doTransition, 20000);

…if you want the first image in EVERY category to have a 20 second delay, or:

if (category == 0) 
{
    timer = setTimeout(doTransition, 20000);
}
else
{
    timer = setTimeout(doTransition, 15000);
}

to apply the 20 second delay to ONLY the very first image in your slideshow.

Last, but not least, after switchSlide(index, true);, enter:

timer = setTimeout(doTransition, 15000);

…to apply the standard 15 second delay to the remaining inter-slide transitions. That should be everything you need!