Auto rotate script not auto rotating

Hi,
I am building a site for a friend. I do not know how to use jQuery but have been able to find a dreamweaver template that has a carousel in it, I have added the images and am able to do all the html changes but I am really out of my depth when it comes to jQuery.
There are three files that relate to the script for the carousel and I think the file I should be editing is here http://www.funfitbrighton.co.uk/scripts/jquery.waterwheelCarousel.setup.js however, after adding the code that I thought was correct which was:

autoPlay: 1000,
carouselSpeed: 1000,
pauseOnHover: true

I thought this was the correct format, there are no syntax errors and the script still only rotates if you click an image instead of auto rotating.

If someone can tell me what I have missed I would be very grateful.

The page the carousel is on is here http://www.funfitbrighton.co.uk/index22.html and the scripts are here:
http://www.funfitbrighton.co.uk/scripts/jquery-1.4.1.min.js
http://www.funfitbrighton.co.uk/scripts/jquery.waterwheelCarousel.js
http://www.funfitbrighton.co.uk/scripts/jquery.waterwheelCarousel.setup.js

Thank you

Matt

PS is there also a way to make the carousel rotate to the first image after it plays the last?

 

It doesn't support auto rotate. I've added that for you, I don't have the time to test this for you so make sure you make a back up of the original file before uploading this one.

<script>
/*!
 * Waterwheel Carousel
 * Version 1.0
 * http://www.bkosolutions.com
 *
 * Copyright 2010 Brian Osborne
 * Licensed under GPL version 3
 * http://www.gnu.org/licenses/gpl.txt
 *
 * Plugin written by Brian Osborne
 * for use with the jQuery JavaScript Framework
 * http://www.jquery.com
 *
 */
(function($) {

    $.fn.waterwheelCarousel = function (orientation, options) {

        // override the default options with user defined options
        options = $.extend({}, $.fn.waterwheelCarousel.defaults, options || {});

        // make sure the passed in orientation is valid
        if (orientation != "horizontal" || orientation != "veritical") {
            orientation = "horizontal";
        }

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

            /* These are univeral values that are used throughout the plugin. Do not modify them
             * unless you know what you're doing. Most of them feed off the options
             * so most customization can be achieved by modifying the options values */
            var data = {
                itemsContainer:         $(this),
                totalItems:             $(this).children().length,
                containerWidth:         $(this).width(),
                containerHeight:        $(this).height(),
                items:                  [],
                itemDistances:          [],
                waveDistances:          [],
                itemOpacities:          [],
                containerIDTag:         "#"+$(this).attr("id"),
                carouselRotationsLeft:  0,
                currentlyMoving:        false,
                itemsAnimating:         0,
                currentSpeed:           options.speed
            }

            // Setup the carousel
            beforeLoaded();
            preload(function () {
                setupDistanceArrays();
                setupCarousel();
                setupStarterRotation();
            });

            // Gets the feature container based on the number
            function getItem(itemNum) {
                return data.itemsContainer.children().eq(itemNum - 1);
            }

            // get previous feature number - accounts for wrap around
            function getPreviousNum(num) {
                var newNum = (num == 1) ? null : num--;
                return newNum;
            }

            // get next feature number - accounts for wrap around
            function getNextNum(num) {
                var newNum = (num == data.totalItems) ? null : num++;
                return newNum;
            }

            // We want to hide all the images to make sure the viewer doesn't
            // see them before the carousel moves them to proper positions
            function beforeLoaded() {
                data.itemsContainer.find("img").hide();
            }

            /**
             * This function will preload all the images in the carousel before
             * calling the passed in callback function. This is VERY necessary for
             * the carousel to function properly because it depends heavily on the
             * width and height of images (which can only be determined post-load)
             */
            function preload(callback) {
                var $imageElements = data.itemsContainer.find("img");
                var loadedImages = 0;
                var totalImages = $imageElements.length;

                $imageElements.each(function () {
                    // Attempt to load the images
                    $(this).load(function () {
                        // Add to number of images loaded and see if they are all done yet
                        loadedImages++;
                        if (loadedImages == totalImages) {
                            // All done, perform callback
                            callback();
                        }
                    });
                    // The images may already be cached in the browser, in which case they
                    // would have a 'true' complete value and the load callback would never be
                    // fired. This will fire it manually.
                    if (this.complete) {
                        $(this).trigger('load');
                    }
                });
            }

            /**
             * This function will setup the various distance arrays that are used in the carousel
             * These values are calculated beforehand to reduce calculation time while the
             * carousel is moving
             */
            function setupDistanceArrays() {
                // Start each array with the first starting value from the options
                data.itemDistances[0] = options.startingItemSeparation;
                data.waveDistances[0] = options.startingWaveSeparation;
                data.itemOpacities[0] = 1 * .75;
                // Then go thru and calculate the rest of the values all the way up to
                // either edge and beyond 1 (to account for the hidden items)
                for (var i = 1; i < options.flankingItems+1; i++) {
                    data.itemDistances[i] = data.itemDistances[i-1] * options.itemSeparationFactor;
                    data.waveDistances[i] = data.waveDistances[i-1] * options.waveSeparationFactor;
                    data.itemOpacities[i] = data.itemOpacities[i-1] * options.opacityDecreaseFactor;
                }
                // The last opacity should be zero
                data.itemOpacities[data.itemOpacities.length-1] = 0;
            }

            /**
             * This function will perform the necessary steps to setup the carousel and the items
             * within it. This mostly means positioning the elements properly and setting
             * their data values
             */
            function setupCarousel() {
                // Fill in a data array with jQuery objects of all the images
                data.items = data.itemsContainer.children('img');
                for (var i = 0; i < data.items.length; i++) {
                    data.items[i] = $(data.items[i]);
                }

                data.itemsContainer
                    // Want the container to have relative positioning
                    .css('position','relative')
                    .find('img')
                        .each(function (i) {
                            // Put all images in the center default position
                            var newLeft,newTop;
                            if (orientation == "horizontal") {
                                newLeft = (data.containerWidth / 2) - ($(this).width() / 2);
                                newTop = options.centerOffset;
                            } else {
                                newLeft = options.centerOffset;
                                newTop = (data.containerHeight / 2) - ($(this).height() / 2);
                            }
                            $(this)
                                // Apply positioning and layering to the images
                                .css({
                                    left: newLeft,
                                    top: newTop,
                                    position: 'absolute',
                                    'z-index': options.flankingItems+2,
                                    'opacity': 1
                                })
                                // Give each image a data object so it remembers specific data about
                                // it's original form
                                .data({
                                    currentPosition:    0,
                                    width:              $(this).width(),
                                    owidth:             $(this).width(),
                                    height:             $(this).height(),
                                    oheight:            $(this).height(),
                                    top:                newTop,
                                    left:               newLeft,
                                    opacity:            1,
                                    index:              i
                                })
                                // The image has been setup... Now we can show it
                                .show();
                        });
            }

            /**
             * All the items to the left and right of the center item need to be
             * animated to their starting positions. This function will
             * figure out what items go where and will animate them there
             */
            function setupStarterRotation() {
                // Get the center item and collections of the items that will be
                // to the left and to the right
                var $centerItem = data.itemsContainer.children('img').eq(options.startingItem - 1);
                var $previousItems = $centerItem.prevAll();
                var $nextItems = $centerItem.nextAll();

                // We will be rotating the carousel, so we set the animation queue to one
                data.carouselRotationsLeft = 1;

                var counter;
                counter = 1;
                // Move all the left side items to their proper positions
                $previousItems.each(function () {
                    for (i = 0; i < counter; i++) {
                        moveItem($(this),false);
                    }
                    counter++;
                });

                counter = 1;
                // Move all the right side items to their proper positions
                $nextItems.each(function () {
                    for (i = 0; i < counter; i++) {
                        moveItem($(this),true);
                    }
                    counter++;
                });
            }

            function setupSlider() {
                $("#slider").slider({
                    min:        1,
                    max:        data.items.length,
                    step:       1,
                    value:      options.startingItem,
                    animate:    true,
                    stop:      function () {
                        stopAnimations();
                        data.currentlyMoving = false;
                        var oldValue = $('#slider').slider('value');
                        var positionOfItem = data.items[oldValue-1].data().currentPosition;

                        if (positionOfItem < 0) {
                            rotateCarousel(true, Math.abs(positionOfItem));
                        } else if (positionOfItem > 0) {
                            rotateCarousel(false, positionOfItem);
                        }

                    }
                });

            }

            /**
             * Given the item and position, this function will calculate the new data
             * for the item. One the calculations are done, it will store that data in
             * the items data object
             */
            function performCalculations($item, newPosition) {

                // Distance to the center
                var oldPosition = $item.data().currentPosition;
                var newDistanceFromCenter = Math.abs(newPosition);

                /** CALCULATE THE NEW WIDTH AND HEIGHT OF THE ITEM **/
                    var oldWidth = $item.data().width, newWidth = $item.data().owidth;
                    var oldHeight = $item.data().height, newHeight = $item.data().oheight;
                    for (var i = 0; i < newDistanceFromCenter; i++) {
                        newWidth = newWidth * options.itemDecreaseFactor;
                        newHeight = newHeight * options.itemDecreaseFactor;
                    }
                    var widthDifference = Math.abs(oldWidth - newWidth);
                    var heightDifference = Math.abs(oldHeight - newHeight);

                /** CALCULATE THE NEW WAVE SEPARATION OF THE ITEM **/
                    var waveSeparation = 0, centeringNumber
                    // number to center item on horizon (vertical or horizontal)
                    if (orientation == "horizontal")
                        centeringNumber = heightDifference / 2;
                    else
                        centeringNumber = widthDifference / 2;
                    // Item growing
                    if ((newPosition > -1 && (newPosition < oldPosition)) || (newPosition < 1 && (newPosition > oldPosition))) {
                        // center item along the horizon
                        waveSeparation -= centeringNumber;
                        // now add the wave
                        waveSeparation += data.waveDistances[Math.abs(newPosition)];
                    // Item shrinking
                    } else if ((newPosition > -1 && (newPosition > oldPosition)) || (newPosition < 1 && (newPosition < oldPosition))) {
                        // center item along the horizon
                        waveSeparation += centeringNumber;
                        // now subtract the wave
                        waveSeparation -= data.waveDistances[Math.abs(newPosition) - 1];
                }

                /** CALCULATE THE NEW ITEM SEPARATION OF THE ITEM **/
                    var itemSeparation = 0;
                    // if moving towards the center, the separation value will be different
                    // than if it were moving away from the center
                    if (Math.abs(newPosition) < Math.abs(oldPosition)) {
                        itemSeparation = data.itemDistances[Math.abs(newPosition)];
                    // if not moving towards center, just give it normal positioning
                    } else {
                        itemSeparation = data.itemDistances[Math.abs(newPosition)-1];
                    }
                    // Need to account for additional size separation only if the item is
                    // on the right side or moving to the center from the right side
                    if (newPosition > 0 || (newPosition == 0 && oldPosition == 1)) {
                        if (orientation == "horizontal")
                            itemSeparation += widthDifference;
                        else
                            itemSeparation += heightDifference;
                    }
                    // We want to separation to be negative if the image is going towards the left
                    if (newPosition < oldPosition) {
                        itemSeparation = itemSeparation * -1;
                    }

                /** CALCULATE NEW OPACITY OF THE ITEM **/
                    var newOpacity;
                    if (newPosition == 0) {
                        newOpacity = 1;
                    } else {
                        newOpacity = data.itemOpacities[Math.abs(newPosition)-1];
                    }

                // Figure out the new top and left values based on the orientation
                var newTop = $item.data().top;
                var newLeft = $item.data().left;
                if (orientation == "horizontal") {
                    newTop = $item.data().top + waveSeparation;
                    newLeft = $item.data().left + itemSeparation;
                } else {
                    newTop = $item.data().top + itemSeparation;
                    newLeft = $item.data().left + waveSeparation;
                }

                // Depth will be reverse distance from center
                var newDepth = options.flankingItems + 2 - newDistanceFromCenter;
                // Set calculations
                $item.data('width',newWidth);
                $item.data('height',newHeight);
                $item.data('top',newTop);
                $item.data('left',newLeft);
                $item.data('currentPosition',newPosition);
                $item.data('depth',newDepth);
                $item.data('opacity',newOpacity);
            }

            /**
             * This function is called when moving an item in the given direction.
             * It will figure out the new position based on the direction of the carousel
             * and then obtain the new calcuations for the item and apply them
             */
            function moveItem($item, direction) {
                // Get old and new positions
                var oldPosition = $item.data('currentPosition'), newPosition;
                if (direction == false) {
                    newPosition = oldPosition - 1;
                } else {
                    newPosition = oldPosition + 1;
                }

                // Only want to physically move the item if it is within the boundaries
                // or in the first position just outside either boundary
                if (Math.abs(newPosition) <= options.flankingItems + 1) {
                    // increment number of items animating
                    data.itemsAnimating++;
                    // Obtain the updated data values for the item
                    performCalculations($item, newPosition);
                    // NOTE: After this method is called, the items data object has updated
                    // position values

                    // Change depth of item right away based on its new position
                    $item.css('z-index',$item.data().depth);
                    $item
                        // Animate the items to their new position values
                        .animate({
                            left: $item.data().left,
                            width: $item.data().width,
                            height: $item.data().height,
                            top: $item.data().top,
                            opacity: $item.data().opacity
                        },data.currentSpeed,options.animationEasing, function () {
                            // Animation for the item has completed, call method
                            itemAnimationComplete($item, newPosition, direction);
                        });
                // If the item is moving further outside of the boundary, don't move it,
                // just increment its position
                } else if (Math.abs(newPosition) > options.flankingItems) {
                    $item.data('currentPosition',newPosition);
                }

            }

            /**
             * This function is called once an item has finished animating to its
             * given position. Several different statements are executed here, such as
             * dealing with the animation queue
             */
            function itemAnimationComplete($item, newPosition, direction) {
                // If the item moved to the center position, trigger the custom event
                if (newPosition == 0) {
                    options.movedToCenter($item);
                }

                // Decrement one from the amount of items that are animating
                data.itemsAnimating--;
                // If there are no more items left animating, that means that all the items within
                // the carousel have finished animating
                if (data.itemsAnimating == 0) {
                    // Decrement one from the amount of rotations the carousel has made
                    data.carouselRotationsLeft -= 1;
                    // The carousel has finished rotating and is no longer moving
                    data.currentlyMoving = false;
                    // If there are still rotations left in the queue, rotate the carousel again
                    if (data.carouselRotationsLeft > 0) {
                        rotateCarousel(direction, 0);
                    // Otherwise there are no more rotations and...
                    } else {
                        // Reset the speed of the carousel to original
                        data.currentSpeed = options.speed;
                    }
                }
            }

            function stopAnimations() {
                for (var i = 0; i < data.items.length; i++) {
                    data.items[i].stop();
                }
            }

            // Short function to determine if a rotation is allowed or not
            function rotationAllowed(direction) {
                // Deny if currently moving already
                if (data.currentlyMoving == true)
                    return false;
                // Deny if trying to move to right and already at right-most item
                if (direction == true && data.items[0].data().currentPosition == 0)
                    return false;
                // Deny if trying to move to left and already at left-most item
                if (direction == false && data.items[data.totalItems-1].data().currentPosition == 0)
                    return false;

                // Everything is OKAY
                return true;
            }

            /**
             * Function called to rotate the carousel the given number of rotations
             * in the given direciton. Will check to make sure the carousel should
             * be able to move, and then adjust speed and move items
             */
            function rotateCarousel(direction, rotations) {

                // Check to see that a rotation is allowed
                if (rotationAllowed(direction)) {

                    // Carousel is now moving
                    data.currentlyMoving = true;
                    // Reset items animating to zero
                    data.itemsAnimating = 0;
                    // Add given rotations to queue
                    data.carouselRotationsLeft += rotations;

                    if (options.quickerForFurther == true) {
                       // Figure out how fast the carousel should rotate
                       if (rotations > 1) {
                           data.currentSpeed = options.speed / rotations;
                       }
                       // Assure the speed is above the minimum to avoid weird results
                       data.currentSpeed = (data.currentSpeed < 100) ? 100 : data.currentSpeed;
                    } else {
                        data.currentSpeed = options.speed;
                    }

                    // Iterate thru each item and move it
                    for (var i = 0; i < data.items.length; i++) {
                        var $item = $(data.items[i]);
                        var currrentPosition = $item.data().currentPosition;
                        // Only move items that are within the boundaries of the carousel
                        // (but also the first flanking hidden item on either side if there is one)
                        if (currrentPosition >= ((options.flankingItems*-1)-1) && currrentPosition <= (options.flankingItems)+1) {
                            moveItem($item, direction);
                        // If the item is not in the boundaries, then that means it is a hidden flank image
                        // we don't want to move it, but we want to increment it's position
                        } else {
                            if (direction == true) {
                                $item.data('currentPosition',currrentPosition+1);
                            } else {
                                $item.data('currentPosition',currrentPosition-1);
                            }
                        }
                    }
                }
            }

            /**
             * The event handler when an image within the carousel is clicked
             * This function will rotate the carousel the correct number of rotations
             * to get the clicked item to the center, or will fire the custom event
             * the user passed in if the center item is clicked
             */
            $('img',data.containerIDTag).live("click", function () {
                var itemPosition = $(this).data().currentPosition;
                var rotations = Math.abs(itemPosition);
                if (itemPosition < 0) {
                    rotateCarousel(true, rotations);
                } else if (itemPosition > 0) {
                    rotateCarousel(false, rotations);
                } else {
                    options.clickedCenter($(this));
                }
            });

            $('#left').click(function () {
                rotateCarousel(false,1);
            });

            $('#right').click(function () {
                rotateCarousel(true,1);
            });

            // create auto rotate
            setTimeout(function(){
                rotateCarousel(false,1);
            },
            2000); // rotate in milliseconds 

        });

    };

    $.fn.waterwheelCarousel.defaults = {
        startingItem:               1,      // item to place in the center at the start
        startingItemSeparation:     180,    // the starting separation distance between each item
        itemSeparationFactor:       .5,     // determines how drastically the item separation decreases
        startingWaveSeparation:     30,      // the starting separation distance for the wave
        waveSeparationFactor:       .75,    // determines how drastically the wave separation decreases
        itemDecreaseFactor:         .8,     // determines how drastically the item's width and height decrease
        opacityDecreaseFactor:      .5,     // determines how drastically the item's opacity decreases
        centerOffset:               65,     // the number of pixels to offset the center item in the carousel
        flankingItems:              4,      // the number of items visible on either side of the center
        speed:                      300,    // speed in milliseconds it will take to rotate from one to the next
        animationEasing:            'linear',// the animation easing when rotating each item
        quickerForFurther:            true, // set to true to make animations faster when clicking an item that is far away from the center
        movedToCenter:              $.noop, // custom function executed when an item moves to the center
        clickedCenter:              $.noop  // custom function executed when the center item is clicked
    };

})(jQuery);
</script>

Code (markup):