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):